微信小程序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 相关文章推荐
jQuery知识点整理
Jan 30 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
js实现无缝滚动特效
Dec 20 Javascript
老生常谈的跨域处理
Jan 11 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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.MVC的模板标签系统(三)
2006/09/05 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
javascript 定时器工作原理分析
2016/12/03 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
初学Python实用技巧两则
2014/08/29 Python
python黑魔法之编码转换
2016/01/25 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
出售房屋委托书范本
2014/09/24 职场文书
欠条范文
2015/07/03 职场文书
放假通知怎么写
2015/08/18 职场文书
Django显示可视化图表的实践
2021/05/10 Python
pyqt5打包成exe可执行文件的方法
2021/05/14 Python