微信小程序wx.navigateTo方法里的events参数使用详情及场景

所属分类: 网络编程 / JavaScript 阅读数: 383
收藏 0 赞 0 分享

个人理解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中调用还是会被看到刷新过程影响使用体验,个人理解,不喜勿喷

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

js实现图片上传预览原理分析

这篇文章主要为大家详细介绍了js实现图片上传预览的原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Angular限制input框输入金额(是小数的话只保留两位小数点)

最近做项目遇到这样的需求输入框要求输入金额,只能输入数字,可以是小数,必须保留小数点后两位。下面分为两部分代码给大家介绍实现代码,需要的的朋友参考下吧
收藏 0 赞 0 分享

详解vue-cli + webpack 多页面实例配置优化方法

本篇文章主要介绍了详解vue-cli + webpack 多页面实例配置优化方法,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)

本篇文章主要介绍了React-Native解决键盘遮挡问题(Keyboard遮挡问题),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript反弹动画效果的实现代码

本文通过实例代码给大家介绍了js反弹动画效果的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享

解决vue2.x中数据渲染以及vuex缓存的问题

本篇文章主要介绍了vue2.x中请求之前数据显示以及vuex缓存的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jsonp跨域请求详解

这篇文章主要为大家详细介绍了jsonp跨域请求的相关资料,激活了所有接口支持浏览器跨域请求的封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

解决vue里碰到 $refs 的问题的方法

本篇文章主要介绍了解决vue里碰到 $refs 的问题的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js自定义弹框插件的封装

这篇文章主要为大家详细介绍了js自定义弹框插件的简单封装,自己封装一个弹框插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入理解vue $refs的基本用法

本篇文章主要介绍了深入理解vue $refs的基本用法 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多