由于工作需要,笔者曾经参与过一个微信小程序与SAP系统集成的项目,所以从零开始学习微信小程序的开发知识。在这里我通过一系列文章分享我所学到的知识,希望对相关的学习者有所帮助。
通过前面四章的介绍,你已经对微信小程序的视图和控制器以及微信调试器的使用有了基本的了解。在此基础上,我们进一步研究微信小程序控制器,掌握小程序控制器响应用户输入的方法。
这个例子很简单。在微信小程序的视图index.wxml中,我定义了一个按钮和一个文本元素。
点我加1
{{计数器}}
文本元素绑定到小程序数据模型的计数器字段,是一个计数器。该按钮绑定到事件处理程序 jerry_increase。每点击一次按钮,微信小程序UI上的计数器就加一。
为此,首先需要在控制器 index.js 的数据模型中添加一个计数器字段。
然后实现按钮的bindtap绑定的函数jerry_increase。可以看到这个事件处理器有一个输入参数e:
调用事件处理器时,微信框架会自动将入参e传递给事件处理器。通过微信开发者工具的调试器可以看到这个参数e的详细信息:点击事件的X和Y坐标微信小程序如何开发 系统定制开发 ,以及事件类型点击。
如果我们从当前控制器事件处理函数执行栈观察,我们发现在其上一层,即微信框架层的处理逻辑中,在事件处理函数调用前后取了两个当前时间戳如果时间戳之间的差异大于 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来响应按钮点击事件。
本系列下一篇文章将介绍微信小程序按钮组件提供的一些微信原生功能微信小程序如何开发 小程序开发制作 ,如获取当前用户信息等强大功能的使用。
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网