微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程
通过前面四个章节的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法已经有了一个最基本的认识了。在这个基础上,让我们进一步学习微信小程序控制器,掌握在小程序控制器中响应用户输入的方法。
这个例子很简单,在微信小程序的视图index.wxml里,我定义了一个按钮,和一个文本元素。
<button bindtap="jerry_increase"> 点我加1 </button>
<text class="user-motto">{{counter}}</text>
文本元素绑定到小程序数据模型的counter字段上,是一个计数器。按钮绑定了一个事件处理函数jerry_increase。每点击一次按钮,微信小程序UI上的计数器加一。
为此,首先需要在控制器index.js的data数据模型里增添一个counter字段。
然后实现button的bindtap绑定的函数jerry_increase。可以看到这个事件处理函数有一个输入参数e:
当事件处理函数被调用时,这个输入参数e是微信框架自动传入到事件处理函数的。通过微信开发者工具的调试器可以看到这个参数e的明细:tap事件发生的X和Y坐标,以及事件类型tap。
我们如果从当前控制器事件处理函数执行栈向外观察,发现它的前一层,即微信框架层的处理逻辑里,在调用事件处理函数前后分别取两个当前的时间戳。如果时间戳之差大于1000毫秒,会执行第30365行的Reporter.slowReport。由此我们看出,微信希望开发者实现的事件处理函数要尽可能高效,执行时间不能超过1秒。在手机使用场景里,1秒的等待时间对于最终用户来说是一个相当长的时间了。
另一个值得一提的知识点是,如果直接用JavaScript修改数据模型的值,则UI不会有任何变化。
下面是错误的做法:
jerry_increase: function(e){
this.data.counter = this.data.counter + 1;
},
下面是正确的做法:
jerry_increase: function(e){
this.setData({
counter: this.data.counter + 1
});
},
我们可以通过单步调试正确的做法来理会其中的奥妙:
可以看到this.setData里面会调用微信框架的c.default.emit函数,把最新的数据通过emit函数投递出去。
继续查看emit的实现,可以发现emit又调用了微信工具类wx的方法:invokeWebviewMethod。从WAService.js的内部实现,我们能发现其实微信小程序在手机上的执行实际是运行在WebView里的。
一旦WeixinJSBridge.publish.apply(WeixinJSBridge, e)这一行代码执行完毕,UI上的计数器才被刷新。
本文介绍了如果在微信小程序里编写JavaScript来响应button的点击事件。
本系列的下一篇文章会介绍微信小程序的button组件提供的一些微信原生功能,比如获取当前用户信息等强大功能的用法。
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
- [Silverlight动画]转向行为 - 介绍
- WCF技术剖析之十七:消息(Message)详解(中篇)
- flash游戏引擎整理
- [Silverlight动画]转向行为 - 群落
- [Silverlight动画]转向行为 - 路径跟随
- [Silverlight动画]转向行为 - 漫游行为
- [Silverlight动画]转向行为 - 对象回避
- [mobile开发碎碎念]手机页面上显示PDF文件
- Windows Server 2008 R2 配置AD(Active Directory)域控制器
- ios开发基础知识 - 2
- ios开发基础知识 - 1
- 为UINavigationBar添加自定义背景
- UIScrollView无法响应touches的解决方法
- WCF技术剖析之十七:消息(Message)详解(下篇)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 谷歌开源NLP模型可视化工具LIT,模型训练不再「黑箱」
- Python 装饰器填坑指南 | 最常见的报错信息、原因和解决方案
- 社区开源框架预制件相关模块:CollectManager详解
- Kettle构建Hadoop ETL实践(三):Kettle对Hadoop的支持
- 3种 Springboot 全局时间格式化方式,别再写重复代码了
- 一文搞懂CDN加速原理
- 3分钟短文:Laravel Carbon自定义日期时间格式
- (30)字符截取命令sed
- 2. Bean Validation声明式校验方法的参数、返回值
- 如何识别和阻止基于电报的僵尸网络
- 由String,String Builder,String Buffer 引起的面试惨案
- MySQL案例:各类临时文件的存放位置
- 关于加@Transactional注解的方法之间调用,事务是否生效的问题
- 基于Vue实现一个有点意思的拼拼乐小游戏
- 硬核手写字节码实现HelloWorld