微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020-03-29 18:56
871 查看
个人理解wx.navigateTo方法里的events参数使用详情及场景
微信小程序在2.7.3版本wx.navigateTo这个方法中新增了events这个属性
微信官方文档里面写的很模糊,在微信公众平台的社区里也有一些人在问,我第一次看到也是先百度了一下使用场景,搜到的也只是copy官方文档的抄袭党,并没什么卵用,相信大家都是看的一头雾水,所以用业余时间研究了一下,以下仅代表个人的理解,如果有更好的想法或者使用不当的地方希望大家提出防止我的个人想法误导大家
个人理解这个新增的属性使用的场景就是能在一个页面执行另一个页面的方法,以大家最熟悉的购物为例,假设现在大家在购物的订单列表页,然后想从这个页跳转到评论订单的页面,在评论完成后刷新订单页面的订单,原来的处理方式就是评论完回到订单页在onShow方法中执行刷新订单的操作,用户体验会差一点,有了events这个属性就能解决这个问题//订单页js,order.js //跳转去评论页的方法 fnToComment(){ wx.navigateTo({ url: `../comment/comment`, events:{ //执行刷新订单的操作data是从评论页传递的参数 fnFefresh:function(data){ console.log(data)//此处接收的是comment.js传递的{data:'2222'} } }, success: function (res) { //跳转comment页要执行的方法 res.eventChannel.emit('fresh', { data: '1111' }) } }) }, //评论页js,comment.js var eventChannel Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { eventChannel = this.getOpenerEventChannel() // 监听fresh事件,获取上一页面通过eventChannel传送到当前页面的数据 eventChannel.on('fresh', function (data) { console.log(data)//此处接收的是order.js传递的{data:'1111'} }) }, //提交评论的方法同时刷新order.js的刷新订单方法 fnComment(){ //刷新order.js的events属性中的fnFefresh方法 eventChannel.emit('fnFefresh', { data: '2222' }); } })
####### 官方给的文档传递的数据都是这个{data:‘test’},可能让大家蒙了,其实这个和vue的组件之间传递数据有点相似,emit就是相当于用于发送事件,on就是相当于接收同名的emit传递的方法,也就是说当前所在的页面(也就是执行wx.navigateTo方法的页面 )的emit的方法在被打开也就是要去的页面里on去接收传递的数据,如果被打开的页面里有执行的方法同时又要调用当前页面的方法,就在被打开页面里也有执行emit的地方,在当前页面里events参数里的方法就是接收被打开页面emit的同名的方法就能接收到被打开页面执行某一方法同时执行emit传递到当前页面的数据,也就是相当于被打开页面已经打开之后,执行某一方法可以同时调用之前执行wx.navigateTo方法的页面里面的方法,个人理解使用场景就是能在一个页面执行了另一个页面的方法,例如执行一些刷新操作之类的,防止在onshow中调用还是会被看到刷新过程影响使用体验,个人理解,不喜勿喷
- 点赞 2
- 收藏
- 分享
- 文章举报
相关文章推荐
- 微信小程序wx.navigateTo方法里的events参数使用详情及场景
- 微信小程序节点查询方法:wx.createSelectorQuery()的使用场景与注意事项
- 微信小程序出现wx.navigateTo页面不跳转问题的解决方法
- 微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
- 微信小程序使用wx.navigateTo或wx.redirectTo跳转失败
- 微信小程序跳转小程序 wx.navigateToMiniProgram
- 微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
- 小程序wx.navigateTo跳转时传多个参数及获取
- 微信小程序wx.navigateTo无法跳转
- 微信小程序跳转API的理解 wx.redirectTo(Object object) wx.navigateTo(Object object)
- 微信小程序如何将本地图片文件上传到服务器?wx.chooseImage& wx.uploadFile方法使用案例以及微信小程序如何获取input框的值。
- 微信小程序参数二维码的8大使用场景
- 微信小程序wx.navigateTo页面不跳转
- 微信小程序navigateTo 传对象参数(特殊符号)
- 微信小程序wx.redirectTo、wx.navigateTo跳转失败
- 微信小程序开发(2)------使用navigateTo数据传递
- 微信小程序 wx.canvasToTempFilePath 方法之巨坑
- 微信小程序 wx.canvasToTempFilePath 方法之巨坑
- 微信小程序 wx.navigateTo和wx.redirectTo 不跳转问题
- 微信小程序学习:navigateTo url 如何带多个参数&从子页面退回父页面时的数据传递