专栏首页Jerry的SAP技术分享微信小程序开发系列五:微信小程序中如何响应用户输入事件

微信小程序开发系列五:微信小程序中如何响应用户输入事件

版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog.csdn.net/article/details/82532425

微信小程序开发系列教程

微信小程序开发系列一:微信小程序的申请和开发环境的搭建

微信小程序开发系列二:微信小程序的视图设计

微信小程序开发系列三:微信小程序的调试方法

微信小程序开发系列四:微信小程序之控制器的初始化逻辑

通过前面四个章节的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法已经有了一个最基本的认识了。在这个基础上,让我们进一步学习微信小程序控制器,掌握在小程序控制器中响应用户输入的方法。

这个例子很简单,在微信小程序的视图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组件提供的一些微信原生功能,比如获取当前用户信息等强大功能的用法。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 005从零开始学Python—字符串处理

    注:三引号是适用情况最多的字符串构造方法,而且三引号允许长字符串的换行,这是其他两种引号无法实现的,如变量string4所示。

    1480
  • Android 中心区域选中图表 WheelChart

    产品要做一个支持横向滚动、中心区域选中、惯性滚动、停止时回滚到中心位置、点击选中、处理嵌套滚动的图表需求

    Android技术干货分享
  • 你比个手势,AI就识别出Emoji,浏览器上跑:已开源,推特2.8万赞

    AI的爸爸,名字叫Nick Bourdakos (简称“尼克”) ,是来自IBM的程序猿。

    AI算法与图像处理
  • Spring/Spring Boot中使用@Async

    当我们在调用某些耗时的方法,比如发起第三方调用时而不关心他的返回值,可以采用@Async来实现异步调用。极大的提升程序的响应速度。

    我的小熊不见了丶
  • Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置

    前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议...

    江南一点雨
  • springboot结合MyBatis中使用foreach

    在pom.xml中自行加入需要的依赖,application.properties的配置如下

    道可道非常道
  • vue实战-实现换主题/皮肤功能

    接下来就是具体实现换皮肤功能了,换皮肤一般都是点击一个按钮弹出一些皮肤的选项,选中选项后皮肤生效。 我们将换皮肤功能抽成一个组件theme-switch。pc...

    我的小熊不见了丶
  • 大数据之脚踏实地学18--Scala正则表达式的使用

    在《大数据之脚踏实地学17--Scala字符串的清洗》一文中我们介绍了Scala语言中常用的字符串处理方法,但这些方法并不是万能的,例如字符串子串的获取,如果目...

    1480
  • 多端统一开发-Taro的安装与使用

    Taro是一套遵循React语法规则的多端开发解决方案。目前市面上已经有各式各样的小程序、h5和安卓、ios端,如何解决一次开发,多端运行已经成为开发者目前迫切...

    我的小熊不见了丶
  • 聊聊我的第一篇10万+,同时反驳某些评论

    知乎后台显示我的回答《如何衡量一个人的 JavaScript 水平?》的阅读量已经超过了10万,具体截止2019年5月20号是115172。

    Fundebug

扫码关注云+社区

领取腾讯云代金券