微信小程序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 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
JavaScript流程控制(分支)
Dec 06 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&&mysql)五
2006/10/09 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
讲解python参数和作用域的使用
2013/11/01 Python
Python复制文件操作实例详解
2015/11/10 Python
python数据封装json格式数据
2018/03/04 Python
pandas object格式转float64格式的方法
2018/04/10 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
pycharm新建一个python工程步骤
2019/07/16 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
大学生的创业计划书就该这么写
2014/01/30 职场文书
倡议书格式范文
2014/04/14 职场文书
运动会入场口号
2014/06/07 职场文书
篮球赛口号
2014/06/18 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
党小组意见范文
2015/06/08 职场文书
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL