小程序navigateTo页面间传值

页面间传值：打开新页面操作时改变前一个页面的值
场景描述：在A页面向B页面传一个num，在B页面对num进行操作后，返回A页面，A页面的num也同步被修改。
1、A向B传值：

• 在navigateTo的url后拼接参数，在B页面的onload的option接收即可：

 // pageA
 wx.navigateTo({
    url: '/pages/pageB/pageB?froms=1',
 });
 // pageB
  onLoad: function(options) {
    console.table(options)
  },

• 或者通过navigateTo的events事件传值（可以传对象），参数说明见下图：

  navigateTo

• 在B页面监听events里定义的事件，获取A页面通过eventChannel传送到B的数据；
  示例：

 //pageA:
wx.navigateTo({
      url: '/pages/pageB/pageB?froms=1&num=' + self.data.num,
      events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        sendObj: function(data) {
          console.log(data)
        },
      },
      success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('sendObj', {
          text: 'hello',name:'Tom'
        })
      }
    })
//pageB
onLoad: function(options) {
    const eventChannel = this.getOpenerEventChannel();
    // 监听sendObj事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('sendObj', function (data) {
      console.log(data)
      that.setData({
        dto:data
      })
    })
  },

2、B向A传值，或者说叫A页面的监听（页面间通信接口，用于监听被打开页面发送到当前页面的数据）

• events为指定事件添加一个监听器，获取被B页面传送到A页面的数据；
• 在被B页面通过eventChannel绑定events里定义的事件，向A页面传值
  实例：

<!--pageA.wxml-->
<view class="content">
  <view>
    <text>pageA：</text>
    <text>{{num}}</text>
  </view>
  <button type="primary" bindtap="goPage">to pageB</button>
</view>
//pageA.js
Page({
  data: {
    num: 1
  },
  goPage() { //去B页面
    let self = this;
    wx.navigateTo({
      url: '/pages/pageB/pageB?froms=1&num=' + self.data.num,
      events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        addNumFromDet: function(data) {
          console.log(data)
          self.setData({
            num: data.num
          })
        }
      },      
    })
  }
})

B页面

<!--pageB.wxml-->
<view class="content">
  <view>
    <text>pageB：</text>
    <text>{{num}}</text>
  </view>
  <view wx:if="{{dto}}">{{dto.text}}--{{dto.name}}</view>
  <button type="primary" bindtap="addNum" plain="true">增加</button>
</view>
// pageB.js
Page({
  data: {
    dto:null,
    num:'',
    froms:''//页面来源
  },
  onLoad: function(options) {
    this.setData({
      num: options.num,
      froms: options.froms
    });
  },
  addNum(){
    let num = this.data.num;
    this.setData({
      num: ++num
    });
    this.addListen();
  },
  /** 返回上一个页面num的变化 */
  addListen() {
    let that = this, num = that.data.num;
    if (that.data.froms == 1) {    // 页面来源是pageA  
      const eventChannel = that.getOpenerEventChannel();
      // 上一页面通过eventChannel传送当前页面的数据
      eventChannel.emit('addNumFromDet', {
        num:num
      });     
    }
  },  
})

效果如下：

效果图.gif
查看完整代码