小程序：wx.navigateTo()的新用法

前几天查看小程序的API，突然发现wx.navigateTo()的功能升级了，出于好奇，对其进行研究了一番。

我们知道wx.navigateTo(Object object)是保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。之前我们从A页面向B页面传值的时候，都是在URL里添加参数，在B页面里的onLoad里进行接收数据；但从B页面里不能向A页面传输数据。

现在，wx.navigateTo(Object object)的新功能就解决了A页面和B页面互相通信的问题。

下面我们具体实践一下这个功能，重新认识一下wx.navigateTo(Object object)吧。

//注意事项//

在实践之前，我们需要注意一下，此功能需要最低基础库为 2.7.3，我们需要设置一下基础库，设置如下：

image

//代码示例//

A页面和B页面

• A页面向B页面传输的数据是：“这是从A页面向B页面传输的数据”；

• B页面向A页面传输的数据是：“这是从B页面向A页面传输的数据”。

A页面代码：

toA() {

wx.navigateTo({

url: '../test/test?id=1',

events: {

//events里的函数是兼听B页面的事件，获取其传过来的数据。events里可以有多个兼听事件 

acceptDataFromB: function(data){

console.log(data) //这是从B页面向A页面传输的数据

},

success: function(res) {

//通过eventChannel向B页面发送数据。

res.eventChannel.emit('acceptDataFromA', {text: '这是从A页面向B页面传输的数据'}) 

} 

}) 

}

B页面代码：

//这个页面里接收数据和发送数据大onLoad里执行。 

onLoad: function(option) {

//获取A页面中url里的参数值

console.log(option.id) 

//B页面发送数据用getOpenerEventChannel()里的emit函数，接收数据用其on函数。

const eventChannel = this.getOpenerEventChannel() 

eventChannel.emit('acceptDataFromB', {text: '这是从B页面向A页面传输的数据'})

eventChannel.on('acceptDataFromA', function(data) {

console.log(data) //这是从A页面向B页面传输的数据

})

}

不知道大家有没有看懂。一开始我也是没有看懂，但自己在页面上试了一下，将各个对象数据都输出一遍后，才明白各个对象和函数的意义。想知其中奥秘，自大行实践一下吧。祝大家好运，GET新技能！

可关注微信号：duzhan2018。欢迎入驻前端学习群的大家庭噢！