【微信小程序】传参存储

 

目录

一、本地数据存储 wx.setStorage wx.setStorageSync

 1.1、异步缓存 存取数据

1.2、同步缓存 存取数据

二、使用url跳转路径携带参数

2.1、 wx.redirectTo({})      

2.2、 wx.navigateTo({})   

2.3、 wx.switchTab({})

2.4 、wx.reLaunch({})

 2.5、组件跳转

三、globalData(全局)


一、本地数据存储 wx.setStorage wx.setStorageSync

在微信小程序中,大多数的数据操作都是异步的,包括像 wx.setStorage 这样的存储数据的方法。异步操作意味着当调用这些方法时,程序会继续执行后续的代码,而不会等待这些方法执行完成。当这些异步方法执行完成时,会通过回调函数来返回结果或执行后续逻辑。

而同步操作则是指方法执行时会阻塞后续代码的执行,直到该方法执行完成才会继续执行后续代码。

针对 wx.setStorage 方法,它是一个异步的数据存储方法,优势和区别主要体现在以下几点:

  1. 非阻塞:异步方法不会阻塞后续代码的执行,可以提高程序的响应速度和性能。

  2. 避免页面假死:如果使用同步方法进行数据存储,可能会导致页面假死,用户体验会受到影响。

  3. 更好的并发控制:异步方法适用于需要处理大量并发请求的场景,能更好地控制多个操作之间的执行顺序和结果处理。

总的来说,异步方法能够更好地保持程序的响应性和用户体验,而同步方法可能会导致页面假死、响应迟缓等问题。因此,在小程序开发中,推荐使用异步方法进行数据操作,如 wx.setStorage,确保程序的流畅性和性能

 1.1、异步缓存 存取数据
  wx.setStorage({           // 异步存储数据
      key: 'user',
      data: 'zhangsan',
    })

    wx.getStorage({         //异步取出数据
      key: 'user',
      success: function(res) {
        console.log(res)
      },
    });
1.2、同步缓存 存取数据
 wx.setStorageSync('name', '张三')    //同步存储数据

wx.getStorageSync('id')           //同步取出数据

二、使用url跳转路径携带参数

2.1、 wx.redirectTo({})      

        不允许跳转到 tabBar

///关闭当前页面跳转 
wx.redirectTo({
      url:"/pages/index/index?id=999"
 })
//跳转的页面上js 获取
  onLoad(options) {
    console.log(options);
},
2.2、 wx.navigateTo({})   

        不允许跳转到 tabBar

//保留当前页面,跳转到应用内的某个页面
wx.navigateTo({
      url: '/pages/user/index?id=999'
    });
//跳转的页面上js 获取
  onLoad(options) {
    console.log(options);
},
2.3、 wx.switchTab({})

    只能跳转到tabBar页面且不能携带参数

   wx.switchTab({
      url: '/pages/index/index'
  })

2.4 、wx.reLaunch({})

    关闭所有页面,打开到应用内的某个页面

   wx.reLaunch({
      url: '/pages/index/index?id=999'
  })
//跳转的页面上js 获取
  onLoad(options) {
    console.log(options);
},
 2.5、组件跳转

效果跟上面一模一样,注意事项也是一样,只是形式不同罢了


<view>
  <navigator open-type="switchTab" url="/a">/navigator>
  <navigator open-type="reLaunch" url="/a?id=1"></navigator>
  <navigator open-type="redirectTo" url="/a?id=1"></navigator>
  <navigator open-type="navigateTo" url="/a?id=1"></navigator>
</view>

三、globalData(全局)

  globalData类似vue中的vuex,当globalData中数据发生改变时,页面上之前赋值信息不回发生改变,如果要求改变的话也需要改变,可以在切换页面的时候 在onShow中再重新赋值。

// app.js 类似vuex 全局可以
App({
  globalData:{},
})
// a.js
const app = getApp();
app.globalData.token='sdasdasd';
//b.js
const app = getApp();
console.log(app.globalData.token) //sdasdasd

相关推荐

  1. 程序页面

    2024-03-12 01:56:01       13 阅读
  2. #程序程序常见的配置&

    2024-03-12 01:56:01       15 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-12 01:56:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-12 01:56:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-12 01:56:01       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-12 01:56:01       20 阅读

热门阅读

  1. VUE3+X6流程图实现数据双向绑定的方案

    2024-03-12 01:56:01       21 阅读
  2. 如何远程SSH连接在家的服务器主机

    2024-03-12 01:56:01       22 阅读
  3. SpringBoot项目中同时支持https和http协议

    2024-03-12 01:56:01       24 阅读
  4. 英语听力 3.11

    2024-03-12 01:56:01       21 阅读
  5. vue使用西瓜视频插件xgplayer

    2024-03-12 01:56:01       47 阅读
  6. Leetcode 189. 轮转数组

    2024-03-12 01:56:01       23 阅读
  7. C++split的替代方法

    2024-03-12 01:56:01       23 阅读
  8. Go语言中,如何调用C++的dll文件

    2024-03-12 01:56:01       25 阅读
  9. Python中输入输出函数input和print用法

    2024-03-12 01:56:01       21 阅读