关于微信小程序wx.navigateTo()方法的events的使用

微信小程序的官方说明文档地址

wx.navigateTo(Object)

events 通信接口

events 通讯接口基于微信小程序基础版本v2.7.3,用于当前页面与新打开页面之间进行通讯使用，使用方式

//官方文档的示例
wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

引用自官方文档

实际场景应用

• 举例场景： 奶茶小程序提交订单需要选择地址界面
• 实现功能：在订单页面点击选择地址跳转地址选择页面，选择后需要保留订单信息且需要显示选择的地址信息。
• 笨拙方法： 订单页跳转地址选择页面带着订单信息传入到选择页面，选择后再传回订单页面进行处理。
• 缺点: 带参跳转繁琐且对象需要不断转换。回跳使用navigateTo会将页面添加到路由页面栈中，使订单返回页异常，需要特殊处理。
• 新方法实现: 跳转时打开通信通道，进行相互之间通讯，将选择的地址传给订单页面，订单页面进行处理，且进行判断是否可以使用来推送给选择页面结果。通讯确定无误之后使用navigateBack进行返回，不会使订单页返回异常
• 实现伪代码

//订单页面跳转选择页面方法
chooseAddress(){
	var _this = this;
	wx.navigateTo({
		url: '/pages/address/address',
		events: {
			//接受地址传回
			acceptAddress: function(address){
				//判断地址是否可用 没有相关需求可不写
				if(!CanUseAddress(address)){
					//不可用传递给选择页面
					_this.addressChanel.emit('canUseAddress', false);
					return;
				}
				//对数据进行处理
				//...
				_this.addressChanel.emit('canUseAddress', true);
			},
			success: function (res){
				_this.addressChanel = res.eventChannel;
			}
		}
	})
}
//地址选择页面
onLoad(e){
	const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('canUseAddress', function(result) {
	    if(result){
			//可以选择则返回订单页面
			wx.navigateBack();
			return;
		}
      	//不可以则继续选择
      	//...
    })
},
tapAddressItem(e){
	const currAddr = e.currTarget.dataset.item;
	//传递给订单页面去判断
	const eventChannel = this.getOpenerEventChannel()
	eventChannel.emit('acceptAddress', currAddr);
}

• 除这个方法之外还可以使用 getCurrentPages()方法设置上一个页面的数据，具体可以自行百度