详解微信小程序页面间传递信息的三种方式

详解微信小程序页面间传递信息的三种方式

在开发微信小程序的时候，经常会遇到在页面间传递信息的情况，有三种方法可以实现。

1. 使用数据缓存

将要存储的数据使用以下方法放入缓存

wx.setStorage({
      key:"key",
      data:"value"
    })

在下一个页面要用的时候，使用如下方法取出

var that = this
    wx.getStorage({
      key: 'key',
      success (res) {
        console.log(res.data)
        that.setData({
          myData:res.data
        })
      }
    })

2. 利用navigator组件传参数

将参数放在<navigator>组件的url参数后面，不同参数中间使用&相连

<navigator url="/pages/demo2/demo2?myData1=123&myData2=456">跳转到demo2</navigator>

获取方法：在onLoad()函数内，通过 options.参数名 的方式获取

 onLoad: function (options) {
    console.log(options.myData1)
    console.log(options.myData2)
  },

运行截图：

3. 利用路由传参数

官方教程
除了官方教程，同样的，我们可以在url上进行参数传递

wx.navigateTo({
      url: '/pages/demo2/demo2?myData1=123&myData2=456',
    })

同样的，在onLoad()函数内，通过 options.参数名 的方式获取传递的参数

 onLoad: function (options) {
    console.log(options.myData1)
    console.log(options.myData2)
  },

运行截图：

4. 我的看法：

我不建议直接将需要传的参数分开传，而建议大家将需要传的数据封装成对象，利用JSON.stringify()函数将对象转换为json格式数据，传递json，然后通过JSON.parse()函数返回对象，取出所需要的值。