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


Posted in Javascript onJanuary 07, 2020

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

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

Javascript 相关文章推荐
js拼接html注意问题示例探讨
Jul 14 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 #Javascript
小程序跨页面交互的作用与方法详解
Jan 07 #Javascript
JavaScript实现联动菜单特效
Jan 07 #Javascript
JS实现电商商品展示放大镜特效
Jan 07 #Javascript
JS实现字体背景跑马灯
Jan 06 #Javascript
JS实现音乐钢琴特效
Jan 06 #Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 #Javascript
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
php无限级分类实现方法分析
2016/10/19 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
jQuery参数列表集合
2011/04/06 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
深入学习python的yield和generator
2016/03/10 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Python封装原理与实现方法详解
2018/08/28 Python
PHP统计代码行数的小代码
2019/09/19 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
小区停车场管理制度
2014/01/27 职场文书
《满井游记》教学反思
2014/02/26 职场文书
2015年预算员工作总结
2015/05/14 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Django+Celery实现定时任务的示例
2021/06/23 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
基于Redission的分布式锁实战
2022/08/14 Redis
Vue router配置与使用分析讲解
2022/12/24 Vue.js