微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程
通过前面四个章节的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法已经有了一个最基本的认识了。在这个基础上,让我们进一步学习微信小程序控制器,掌握在小程序控制器中响应用户输入的方法。
这个例子很简单,在微信小程序的视图index.wxml里,我定义了一个按钮,和一个文本元素。
点我加1
{{counter}}
文本元素绑定到小程序数据模型的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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
微信小程序开发系列五:微信小程序中如何响应用户输入事件的更多相关文章
- 第三篇 :微信公众平台开发实战Java版之请求消息,响应消息以及事件消息类的封装
微信服务器和第三方服务器之间究竟是通过什么方式进行对话的? 下面,我们先看下图: 其实我们可以简单的理解: (1)首先,用户向微信服务器发送消息: (2)微信服务器接收到用户的消息处理之后,通过开发者 ...
- 微信公众号开发系列-获取微信OpenID
在微信开发时候在做消息接口交互的时候须要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID.接收事件推送方式和网页授权获取用户基本信息方式获取. 1.通过接收被动消息方式获 ...
- Java微信公众平台开发(十五)--微信JSSDK的使用
转自:http://www.cuiyongzhi.com/post/63.html 在前面的文章中有介绍到我们在微信web开发过程中常常用到的 [微信JSSDK中Config配置] ,但是我们在真正的 ...
- 微信小程序开发系列六:微信框架API的调用
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列教程三:微信小程序的调试方法
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...
- 微信小程序开发系列四:微信小程序之控制器的初始化逻辑
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...
- 第八篇 :微信公众平台开发实战Java版之如何网页授权获取用户基本信息
第一部分:微信授权获取基本信息的介绍 我们首先来看看官方的文档怎么说: 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
随机推荐
- iOS 观察者模式(KVO)的简单使用
KVO的全称是Key-Value Observing,它实现了一种机制,对所关心的属性对象添加观察者,当属性值发生变化时会得到通知,我们可以对变化做相应的处理.看过设计模式的同学应该知道,这是一种典型 ...
- [JSOI 2007] 字符加密
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1031 [算法] 将字符串倍长 , 构建后缀数组 , 然后按要求输出即可 时间复杂度 ...
- Watir: 如何处理简单的网页弹出警告框?
以下是一个很经典的把Watir与AutoIt连接在一起的实例.如果我们对AutoIT了解的更多,处理类似的问题会更加简单.以下实例会判断页面上是否有某“删除”链接,一旦有该链接,就点击,然后点击弹出的 ...
- 后台接口平台 基于Laravel 开发 快速开发数据接口
laravelPCMS V1.5.0 项目地址:https://github.com/q1082121/laravelcms 喜欢的朋友可以支持下 点点星标 百牛信息技术bainiu.ltd整理发布于 ...
- 使用Ajax选取ListBox的值异步更新视图,并作为表单值提交
一.控制器返回一个ViewBag MultiSelecList值. public ActionResult Create() { ViewBag.ReviewIndexItems = new Mult ...
- zabbix3.4自定义监控
zabbix的服务器.客户端都已经部署完成,监控正常,用的是微信报警: 现在想监控一台Linux服务器(172.16.0.56)的剩余内存,在小于一定值的时候就报警: 1.在172.16.0.56上, ...
- linux软硬连接学习总结
创建连接实质上就是给系统中已经存在的文件指定另外一个可以访问它的名称,linux系统当中连接的创建有两种形式:硬链接(Hard Link),与符号链接(Symbloic Link)既软链接. ln命令 ...
- Win32控制台程序和Win32应用程序
刚接触Windows那一套,大多数概念都还没建立起来,整理了一下网上对“Win32控制台程序”的理解,谢谢各位网友了. win32控制台项目指在32位Windows命令提示符(即所谓的dos)环境下运 ...
- js跳转方法整理与自动刷新
js方式的页面跳转1.window.location.href方式 <script language="JavaScript" type="text/javascr ...
- Eclipse中,Open Type(Ctrl+Shift+T)失效后做法。
好几天ctrl shift T都不好用了,一直认为是工程的问题,没太在意,反正ctrl shift R也可也,今天看同事的好用,于是到网上查了一下解决的方法,刚才试了一下,应该是这个问题,明天就去公司 ...