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

微信小程序页面之间数据传递的五种方法，包括通过URL拼接传递数据、使用eventChannel、返回上一个页面传递数据、使用本地缓存wx.setStorageSync存储数据以及在app.js中添加公用数据。

### 1.使用 \color{red}{wx.navigateTo()}\ 时，在 url 中拼接,这种方法适用于数据量少的情况
跳转前A页面在 url 中拼接参数，参数与路径之间使用\color{red}{?}\分隔，参数键与参数值用\color{red}{=}\相连，不同参数用\color{red}{\&}\分隔；
```javascript
wx.navigateTo({
    url: '/somePathXXX/somePathXXX?keyA=valueA&keyB=valueB'
})
```
跳转到B页面在生命周期函数 onLoad 中接收
```javascript
onLoad: function (options) {
    let keyA = options.keyA
    let keyB = options.keyB
},
```
如果需要传递对象或数组，需先将对象或数据转为JSON字符串
```javascript
let data = {
    name: 'sun',
    sex: '女',
    age: 20
}
let dataStr = JSON.stringify(data)
wx.navigateTo({
  url: '/somePathXXX/somePathXXX?dataStr=' + dataStr,
})
```
接收时再转换回对象或数组
```javascript
onLoad: function (options) {
    let data = JSON.parse(options.dataStr)
    console.log(data); // {name: "sun", sex: "女", age: 20}
},
```
### 2.使用 \color{red}{wx.navigateTo()}\ 时，通过 eventChannel 向被打开页面传送数据， 或被打开页面向原页面传递数据，适合数据量大或者相对复杂的数据传递
##### 1.A页面跳转至B页面，同时A页面向B页面传递数据
跳转前A页面：
```javascript
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页面不能重复接收，只能接受一次，哪怕在不同方法中）
```javascript
onLoad: function (options) {
    const eventChannel = this.getOpenerEventChannel();
    // 监听 pageBEvent 事件，获取上一页面通过 eventChannel 传送到当前页面的数据
    eventChannel.on('pageBEvent', (params) => {
        console.log(params);
    });
},
```
###### 2.A页面跳转至B页面，B页面向A页面传递数据
跳转前A页面：
```javascript
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 中的事件可以任意多次，每次传递的数据可以不同）
```javascript
onLoad: function (options) {
    const eventChannel = this.getOpenerEventChannel();
    // 触发A页面的事件并传递数据
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test111'});
    eventChannel.emit('someEvent', {data: 'test222'});
},
```
###### 3.EventChannel还可以在A-B-C多个页面直接建立数据通道。
```javascript
//可以保存在getApp()全局实例中以备其他页面使用
// 保留AB通道事件，已备C页面给A页面发送数据
// B页面
    const eventChannel = this.getOpenerEventChannel()
    getApp().pageBEventChannel = eventChannel
//C页面 触发A页面的事件并传递数据
 getApp().pageBEventChannel.emit('acceptDataFromOpenedPage', { data: 'Page C->A' });
```
### 3.返回上一个页面同时传递数据
假如从B页面返回A页面时需向A页面传递数据，可使用这种方法
在B页面
```javascript
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之后的任意阶段重复获取）
```javascript
onShow: function () {
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1];
    let backData = currPage.__data__.backData; // 此处既是上一页面传递过来的值
    console.log(backData);
},
```
### 4.使用\color{red}{本地缓存}\ wx.setStorageSync()
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
以这种方式储存的数据是公用数据，可以在任意地方储存、修改，修改后会在全局生效，可以在任意地方获取。
```javascript
//储存
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 ，因为操作内存是需要时间的，往往没有代码走的快。

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

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

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