怎么理解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 相关文章推荐
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
js微信支付实现代码
Dec 22 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
ng-zorro-antd 入门初体验
Dec 03 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
pymysql模块使用简介与示例
2020/11/17 Python
python 实用工具状态机transitions
2020/11/21 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
行政人事主管岗位职责
2015/04/11 职场文书
2016国庆促销广告语
2016/01/28 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript