怎么理解wx.navigateTo的events参数使用详情


Posted in Javascript onMay 18, 2020

遇到一个这样的业务需求, 用户点击提现按钮, 跳转到提现处理结果页面, 为了避免提现请求被重复提交, 所以需要在用户点击了提交按钮以后就把按钮锁起来不给用户提交, 在拿到请求结果以后再把按钮打开
先看界面

怎么理解wx.navigateTo的events参数使用详情

再看实现逻辑

onWithdraw () {
 console.log('加锁', this.data.isWithdrawing)
 if (this.data.isWithdrawing) return
 // isWithdrawing要在data中初始化为false
 this.data.isWithdrawing = true
 console.log('按照预期, 这里在跳转之前应该只执行一次', this.data.isWithdrawing)

 req.redpack.withdraw(this.data.withDrawAmount, this.data.currentCardId)
  .then(res => {
   // 请求参数不用看, 是封装的方法
   if (res.code === 201) {
    this.data.isWithdrawing = true
    wx.navigateTo({
     url: '/pages/redpack/withdrawResult/withdrawResult'
    })
   }  
  })
}

于是我输入金额, 疯狂的点击按钮, 看到的是这样的

怎么理解wx.navigateTo的events参数使用详情

怎么理解wx.navigateTo的events参数使用详情

难道应该把this.data.isWithdrawing = true放在 wx.navigateTo后?于是测试, 无果(有兴趣的同学可以试试)

于是, 我打开了微信官方文档

怎么理解wx.navigateTo的events参数使用详情

噢...我懂了, this.data.isWithdrawing = true应该放在complete回调里去支持, 于是我把代码改成这样:

怎么理解wx.navigateTo的events参数使用详情

测试

怎么理解wx.navigateTo的events参数使用详情

额......

由此我推断, complete回调是在页面跳转前执行的, 跳转前把锁解开, 然后我手速又比较快, 所以才出现了多次执行的情况, 那究竟要怎么处理呢?

再次翻阅文档, 一个event参数吸引了我, 但是官方写得有点模糊, 于是自己进行了代码的测试, 下面将我的理解分享给大家, 我喜欢用图形来表达, 请看图:

怎么理解wx.navigateTo的events参数使用详情

怎么理解wx.navigateTo的events参数使用详情

怎么理解wx.navigateTo的events参数使用详情

重点重点重点:

1) eventChannel是页面跳转时产生的一个独立于页面外的对象, 父页面和子页面都可以在eventChannel里面定义方法, 而eventChannel里面的方法在某种意义上是可以操作两个页面的数据的
2) 父页面通过events参数定义父方法一, 父方法二...
3) 子页面通过this.getOpenerEventChannel()拿到eventChannel对象, 并且通过eventChannel.on来定义子方法一, 子方法二...
4) 父页面通过success或者complete里面的res拿到eventChannel对象, 并通过res.eventChannel.emit来触发子页面通过eventChannel.on定义的方法
5) 子页面通过this.getOpenerEventChannel()拿到eventChannel对象执行emit来触发父页面定义的方法
6) 最后, 我所说的父方法, 子方法, 其实都是定义在eventChannel上的, 这样说只是方便大家理解, 父页面应该也也是可以通过emit去触发自己在events里面定义的方法的, 但是这样没有意义, 所以, 我就不做测试了,因为没有人会傻到自己跟自己通信吧, 哈哈哈...

再回到我们一开始的业务需求:
我们是不是可以这样操作, 在子页面显示的以后再去把父页面的锁打开呢?这样不就避免了重复提交的问题了吗?(当然有人会问我, 你为什么搞得这么复杂?直接锁死不就好了吗?但是你是够考虑到这样一种情况, 用户在提现以后, 又点击了后退页面, 再次进行提现, 这样你的锁还开着, 第二不就不能提现了吗?)
好了, 下面我们来实现代码
父页面:

怎么理解wx.navigateTo的events参数使用详情

子页面:

怎么理解wx.navigateTo的events参数使用详情

结果:

怎么理解wx.navigateTo的events参数使用详情

点返回, 再次提现

怎么理解wx.navigateTo的events参数使用详情

妥妥的....

到此这篇关于怎么理解wx.navigateTo的events参数使用详情的文章就介绍到这了,更多相关wx.navigateTo的events参数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
复制js对象方法(详解)
Jul 08 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
vue中的scope使用详解
Oct 29 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 #Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 #Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 #Javascript
react 生命周期实例分析
May 18 #Javascript
react使用CSS实现react动画功能示例
May 18 #Javascript
Node.js API详解之 net模块实例分析
May 18 #Javascript
Javascript实现简易天数计算器
May 18 #Javascript
You might like
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
python简单的函数定义和用法实例
2015/05/07 Python
python实现网站的模拟登录
2016/01/04 Python
Python日期时间Time模块实例详解
2019/04/15 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
勤俭节约倡议书
2014/04/14 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
春风化雨观后感
2015/06/11 职场文书