小程序页面之间数据传递的五种方法

使用 `wx.navigateTo()` 时，在 url 中拼接,这种方法适用于数据量少的情况

跳转前A页面在 url 中拼接参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；

wx.navigateTo({
      
      
    url: '/somePathXXX/somePathXXX?keyA=valueA&keyB=valueB'
})

跳转到B页面在生命周期函数 onLoad 中接收

onLoad: function (options) {
      
      
    let keyA = options.keyA
    let keyB = options.keyB
},

如果需要传递对象或数组，需先将对象或数据转为JSON字符串

let data = {
      
      
    name: 'sun',
    sex: '女',
    age: 20
}
let dataStr = JSON.stringify(data)
wx.navigateTo({
      
      
  url: '/somePathXXX/somePathXXX?dataStr=' + dataStr,
})

接收时再转换回对象或数组

onLoad: function (options) {
      
      
    let data = JSON.parse(options.dataStr)
    console.log(data); // {name: "sun", sex: "女", age: 20}
},

使用 `wx.navigateTo()` 时，通过 eventChannel 向被打开页面传送数据，或被打开页面向原页面传递数据，适合数据量大或者相对复杂的数据传递

① A页面跳转至B页面，同时A页面向B页面传递数据

跳转前A页面：

let data = {
      
      
    name: 'sun',
    sex: '女',
    pats: [ 'cat', 'dog', 'fish' ],
    address: {
      
      
        province: '山东省',
        city: '青岛市'
    } 
}
wx.navigateTo({
      
      
    url: '/pages/eventChannel-demoB/eventChannel-demoB',
    success: function (res) {
      
      
        res.eventChannel.emit('pageBEvent', data) 
    }
})

跳转后B页面在生命周期函数 onLoad 中接收（也可以在其他生命周期函数中，或其他任意阶段接收，测试结果是B页面不能重复接收，只能接受一次，哪怕在不同方法中）

onLoad: function (options) {
      
      
    const eventChannel = this.getOpenerEventChannel();
    // 监听 pageBEvent 事件，获取上一页面通过 eventChannel 传送到当前页面的数据
    eventChannel.on('pageBEvent', (params) => {
      
      
        console.log(params);
    });
},

② A页面跳转至B页面，B页面向A页面传递数据

跳转前A页面：

wx.navigateTo({
      
      
    url: '/pages/eventChannel-demoB/eventChannel-demoB',
    events: {
      
      
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function(data) {
      
      
            console.log(data)
        },
        someEvent: function(data) {
      
      
            console.log(data)
        }
    }
})

B页面（也可以在其他生命周期函数中，或其他任意阶段触发A页面的方法，传递数据，并且与接收参数不同，触发A页面的 events 中的事件可以任意多次，每次传递的数据可以不同）：

onLoad: function (options) {
      
      
    const eventChannel = this.getOpenerEventChannel();
    // 触发A页面的事件并传递数据
    eventChannel.emit('acceptDataFromOpenedPage', {
      
      data: 'test111'});
    eventChannel.emit('someEvent', {
      
      data: 'test222'});
},

③ EventChannel还可以在A-B-C多个页面直接建立数据通道。

//可以保存在getApp()全局实例中以备其他页面使用
// 保留AB通道事件，已备C页面给A页面发送数据
// B页面
    const eventChannel = this.getOpenerEventChannel()
    getApp().pageBEventChannel = eventChannel
//C页面 触发A页面的事件并传递数据
 getApp().pageBEventChannel.emit('acceptDataFromOpenedPage', {
      
       data: 'Page C->A' });

返回上一个页面同时传递数据

假如从B页面返回A页面时需向A页面传递数据，可使用这种方法

在B页面

goBack: function () {
      
      
    let backData = {
      
      
        name: 'Lily',
        age: 18,
        address: {
      
      
            province: '山东省',
            city: '青岛市',
        },
        pets: ['dog','cat']
    }
    var pages = getCurrentPages();//获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。
    var prevPage = pages[pages.length - 2]; //获取上一个页面
    //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
    prevPage.setData({
      
      
        backData: backData
    })
    console.log(prevPage.__data__.backData);//数据已存在prevPage.__data__.backData中
    wx.navigateBack()
},

在A页面获取传回的值（也可以在onShow之后的任意阶段重复获取）

onShow: function () {
      
      
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1];
    let backData = currPage.__data__.backData; // 此处既是上一页面传递过来的值
    console.log(backData);
},

注：不要在 App.onLaunch 的时候调用 getCurrentPages() ，此时page还没有生成

使用本地缓存 wx.setStorageSync()

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

以这种方式储存的数据是公用数据，可以在任意地方储存、修改，修改后会在全局生效，可以在任意地方获取。
```
//储存
wx.setStorageSync('someKey', {
      
       name: 'lily' }),
//需要时获取指定key
console.log(wx.getStorageSync('someKey')); // {name: 'lily'}
//修改指定key
wx.setStorageSync('someKey', {
      
       name: 'nana' }),
//移除指定key
wx.removeStorageSync('someKey')
//移除全部key
wx.clearStorageSync()
```
注：setStorage 与setStorageSync的区别：setStorage 是异步的，而setStorageSync是同步的。

当后面的操作必须依赖于修改storage后的数据，那就需要使用同步，也就是setStorageSync，不然后面操作执行时，使用的还是没有更新的数据。

当后面的操作并不需要用到修改的storage数据，那就不需要立即同步，这时就可以选择使用异步，也就是setStorage ，因为操作内存是需要时间的，往往没有代码走的快。
在 app.js 中添加公用数据

每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例，在App(object)方法的 object 参数中，开发者可以添加任意函数或数据变量，在其它页面可以通过 getApp() 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。

以这种方式储存的数据是公用数据，可以在任意地方储存、修改，修改后会在全局生效，可以在任意地方获取。

在 app.js 中：
```
App({
      
      
  globalData: {
      
      
      name: 'globalName'
  },
  globalString: 'globalStringXXX',
  },
  // 其他……
})
```
在页面中获取（生命周期函数onLoad中也可以获取）：
```
let app = getApp()
console.log(app.globalData); // {name: 'globalName'}
console.log(app.globalString); // globalStringXXX
```
修改：
```
let app = getApp()
app.globalString = '修改后的stringXXX'
console.log(app.globalString); // 修改后的stringXXX
```