评论

页面间数据修改的方法

对微信提供的页面间通信接口的实例

微信小程序提供了路由API,用于提供页面间跳转的能力。在常见的页面间跳转的功能中,将数据从A页面传递到B页面处理,处理完后将结果返回到A页面并修改的场景是比较常见的。在传递的过程中,针对数据的处理有好几种方法,我常用的方法有两种。
一种是设置globalData中的变量或者缓存的形式来处理这些传递数据,这种情况适合跨页面数量少,变量较少的情况。
另外一种则是通过getCurrentPages()获取页面栈去操纵数据,这种方法使用起来比较简单,影响到的变量比较少。
在最近的一次更新中,微信官方在navigateTo中提供了一个页面间通信的接口,用于在页面间通信,试了一下,使用比较方便。

通过页面间通信接口实现页面间的通信

实现代码:

 //index.wxml
<view>
   {{sum}}
 </view>
 <view bindtap="nav">测试页面间传值</view>
 //index.js
 /**
  * 监听页面显示
  */
 nav: function(e) {
   var that = this;
   wx.navigateTo({
     url: '/pages/nav/index',
     events: {
       sendEvent: function(data) {
         console.log('data', data);
         var sum = data.sum;
         console.log('sum', sum)
         that.setData({
           sum: sum
         })
       },
     },
     success: function(res) {
       console.log('res', res);
       res.eventChannel.emit('receiveEvent', {
         a: 9,
         b: 10,
       })
     }
   })
 }
 //nav.js
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {
   var that = this;
   that.sum();
  },
  sum: function() {
    var that = this;
    const eventChannel = this.getOpenerEventChannel();
    var sum = 0;
    setTimeout(function() {
      wx.navigateBack({
        delta: 1,
        success: function() {
          eventChannel.on('receiveEvent', function(data) {
            console.log('被跳转页面', data);
            var a = data.a;
            var b = data.b;
            that.setData({
              a: a,
              b: b
            })
            sum = Number(a) + Number(b);
          });
          eventChannel.emit('sendEvent', {
            sum: sum,
          });
        }
      })
    }, 1000)
  }

截图

结论

根据使用场景,选择合适的跳转处理方式,微信提供了页面间通信功能之后,可以尝试采用新的方法进行页面间数据修改。

最后一次编辑于  08-21  
点赞 3
收藏
评论