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

小程序页面之间数据传递的五种方法
- **使用 `wx.navigateTo()` 时，在 url 中拼接,这种方法适用于数据量少的情况**
- **使用 `wx.navigateTo()` 时，通过 eventChannel 向被打开页面传送数据，或被打开页面向原页面传递数据，适合数据量大或者相对复杂的数据传递**
- 返回上一个页面同时传递数据
- 使用本地缓存 wx.setStorageSync()
- 在 app.js 中添加公用数据

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

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

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

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

onLoad: function (options) {let keyA = options.keyAlet 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
```