小程序——页面间的通信与数据传递

小程序的页面跳转API像wx.navigateTo()、wx.redirectTo()之类的，都是跳转到一个全新的页面，当这个页面是表单的时候，有时候需要跳转到其它页面选取信息后再跳转回来，那之前填的信息就必须得存在。

小程序的页面跳转API像wx.navigateTo()、wx.redirectTo()之类的，都是跳转到一个全新的页面，当这个页面是表单的时候，有时候需要跳转到其它页面选取信息后再跳转回来，那之前填的信息就必须得存在，这个时候可以当跳转到选择信息的页面，选中信息后设置设置上一页的data，然后再返回到上一页，这样数据都会存在。

方法一 ：

把当前页面数据放入本地缓存（ wx.setStorage（wx.setStorageSync），上一个页面再从缓存中取出（wx.getStorage（wx.getStorageSync））同时退出登录时要清除缓存（wx.clearStorage（wx.clearStorageSync））。处理不好的话容易出问题，不够优雅，建议使用方法二。

方法二：

在当前页设置上一页的data,例如

var pages = getCurrentPages();
      // var currPage = pages[pages.length - 1];   // 当前页面
      var prevPage = pages[pages.length - 2];  // 上一个页面
     // 直接调用上一个页面的setData()方法，把数据存到上一个页面中去
      prevPage.setData({
        liveId: that.liveId
      });

当然这个“liveId”必须是上一页有的数据才行，即必须在data里有定义

在上一页的onshow里取数据：

onShow() {
      let that = this;
      var pages = getCurrentPages();
      var currPage = pages[pages.length - 1];   // 当前页面
      that.liveId = currPage.data.liveId;
}

直接调用方法名来更新数据 

页面A：

Page({
     data: {
        name: ''
     },
     ...
     ,
     //更新name
     changeData: function(name){
        this.setData({
            name: name
        })
     }
})

页面B,假设有一个文本框用于输入姓名,点击返回按钮后更新页面A的name

Page({
    //此方法用于文本框输入回调
    inputTyping: function (e) {
        //获取页面栈
        var pages = getCurrentPages();
        if(pages.length > 1){
            //上一个页面实例对象
            var prePage = pages[pages.length - 2];
            //关键在这里
            prePage.changeData(e.detail.value)
        }
    }
})

这样就可以实现数据传递给上一个页面，要注意页面A必须使用wx.navigateTo跳转到页面B，不能使用wx.redirectTo，这样会关闭上一个页面，导致页面B无法获取上一页Page实例。

方法三： 
在app.js中设置全局变量，当前页赋值，上一页取之。

例如：

globalData: {
    userInfo: null,
  }

注意：方法一，方法三，都需要重新刷新页面数据所走方法为：

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },

另外补充两种方法：

方法四：使用 WxNotificationCenter.js

微信小程序通知广播模式类,降低小程序开发的耦合度

使用例子

• 主页面注册事件

• // 引入WxNotificationCenter 工具
  const WxNotificationCenter = require("../../utils/WxNotificationCenter.js");
  
  // 回调函数传值
  onPickerCountry: function (country) {
      this.setData({
        country: country
      });
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      WxNotificationCenter.addNotification("testNotificationName", this.onPickerCountry, this);
    },
  
  // 跳转到子页面
    pickerCountry: function(){
      wx.navigateTo({
        url: 'b',
      })
    },
  

   

• 子页面触发事件

• // 同样需要先引入WxNotificationCenter
  const WxNotificationCenter = require("../../utils/WxNotificationCenter.js");
  
  // 触发事件，回传数据
  bindPickerChange: function (e) {
      var index = e.detail.value;
      var country = this.data.countries[index];
      this.setData({ country: country})
      console.log('picker发送选择改变，携带值为', index)
      console.log('picker发送选择改变，携带值为', country.name)
  // 回传数据
         WxNotificationCenter.postNotificationName("testNotificationName", country);
    },
  

  注意这里面的 testNotificationName 是一个标识，类似click 是点击事件一样，你也可以按照自己的业务或者操作来命名

方法五：使用 onfire.js

是一个很简单的事件分发的Javascript库（仅仅 0.9kb），简洁实用。

使用例子

• 主页面注册事件

// 引入bonfire 工具
const onfire = require("../../utils/onfire.js");

// 回调函数传值
onPickerCountry: function (country) {
    this.setData({
      country: country
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var eventObj = onfire.on('eventName', this.onPickerCountry);
  },

// 跳转到子页面
  pickerCountry: function(){
    wx.navigateTo({
      url: 'b',
    })
  },

• 子页面触发事件

// 同样需要先引入onfire
const onfire = require("../../utils/onfire.js");

// 触发事件，回传数据
bindPickerChange: function (e) {
    var index = e.detail.value;
    var country = this.data.countries[index];
    this.setData({ country: country})
    console.log('picker发送选择改变，携带值为', index)
    console.log('picker发送选择改变，携带值为', country.name)
// 回传数据
    onfire.fire('eventName', country);
  },

注意这里面的 eventName 是一个标识，类似click 是点击事件一样，你也可以按照自己的业务或者操作来命名

大家还有其他好的方法也可以在底下留言评论，未完待续！