微信小程序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技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
详解微信小程序之提高应用速度小技巧
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
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python算法应用实战之队列详解
2017/02/04 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
python如何更新包
2020/06/11 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
留学推荐信范文
2014/05/10 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技