微信小程序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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
javascript事件问题
Sep 05 Javascript
JS修改css样式style浅谈
May 06 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
详解微信小程序之提高应用速度小技巧
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
第五节 克隆 [5]
2006/10/09 PHP
透析PHP的配置文件php.ini
2006/10/09 PHP
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
ECMAScript 基础知识
2007/06/29 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
Javascript缓存API
2016/06/14 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
Python字典的核心底层原理讲解
2019/01/24 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
使用Tkinter制作信息提示框
2020/02/18 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
感恩之星事迹材料
2014/05/03 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
中职生自荐信范文
2014/06/15 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
民事赔偿协议书
2014/11/02 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书