微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程
通过前面四个章节的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法已经有了一个最基本的认识了。在这个基础上,让我们进一步学习微信小程序控制器,掌握在小程序控制器中响应用户输入的方法。
这个例子很简单,在微信小程序的视图index.wxml里,我定义了一个按钮,和一个文本元素。
点我加1
文本元素绑定到小程序数据模型的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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
- 微信程序开发系列教程(三)使用微信API给微信用户发文本消息
- 微信小程序开发怎么获取用户输入
- 如何在微信公众帐号开发模式下,通过程序代码向用户发送符号表情。
- 微信小程序—如何获取用户输入文本框的值
- 微信程序开发系列教程(二)使用JavaScript给微信用户发送消息
- Windows Phone开发(13):如何规范用户的输入行为
- .NET基础扩展系列-如何获取事件的响应函数列表
- 【Cocoa(mac) Application 开发系列之四】动作编辑器(Cocos2dx)制作流程详解及附上响应鼠标滚轴事件、反转坐标系、导入/创建资源目录等知识点代码!
- StevGuo系列文章翻译之Android中的输入事件如何分发
- swing程序中如何响应JasperViewer关闭事件?
- linux在用户程序中如何向操作系统发送按键事件
- 串的处理 在实际的开发工作中,对字符串的处理是最常见的编程任务。本题目即是要求程序对用户输入的串进行处理。具体规则如下: 1. 把每个单词的首字母变为大写。 2. 把数字与字母之间用下划线字符(_)分
- 在Symbian操作系统上开发的手机程序必须进行数字签名,才能在手机终端上安装成功。数字签名机制能够有效阻止恶意手机程序的传播,并保护软件开发商和手机用户的合法权益。那么,如何进行Symbian数字签
- Windows 8 开发系列- metro 程序里面没有提供关闭App的事件
- Windows Phone开发(13):如何规范用户的输入行为 转:http://blog.csdn.net/tcjiaan/article/details/7341513
- swing程序中如何响应鼠标回车事件?
- 从获取QQ验证码谈如何改进用户体验,提高程序的响应效果
- StevGuo系列文章翻译之Android中的输入事件如何分发
- Windows Phone开发(13):如何规范用户的输入行为
- ArcGIS for iOS 开发系列(5) – 基础篇-手势和事件响应