驻马店网站建设天祥,个人简历生成器,网站站长统计怎么弄,淘宝导购网站怎么做2019独角兽企业重金招聘Python工程师标准 微信小程序开发系列教程 微信小程序开发系列一#xff1a;微信小程序的申请和开发环境的搭建 微信小程序开发系列二#xff1a;微信小程序的视图设计 微信小程序开发系列三#xff1a;微信小程序的调试方法 微信小程序… 2019独角兽企业重金招聘Python工程师标准 微信小程序开发系列教程 微信小程序开发系列一微信小程序的申请和开发环境的搭建 微信小程序开发系列二微信小程序的视图设计 微信小程序开发系列三微信小程序的调试方法 微信小程序开发系列四微信小程序之控制器的初始化逻辑 通过前面四个章节的介绍大家对微信小程序的视图和控制器以及微信调试器的用法已经有了一个最基本的认识了。在这个基础上让我们进一步学习微信小程序控制器掌握在小程序控制器中响应用户输入的方法。 这个例子很简单在微信小程序的视图index.wxml里我定义了一个按钮和一个文本元素。 button bindtapjerry_increase 点我加1 /button text classuser-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的原创技术文章请关注公众号汪子熙或者扫描下面二维码: 转载于:https://my.oschina.net/u/3771578/blog/2250151
