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

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

微信小程序开发系列教程

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

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

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

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

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

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

这个例子很简单,在微信小程序的视图index.wxml里,我定义了一个按钮,和一个文本元素。

<button bindtap="jerry_increase"> 点我加1 </button>

<text class="user-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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281835.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

理解Object.defineProperty的作用

Object.defineProperty 是vue中双向绑定的基础。vue是通过数据劫持的方式来做数据绑定的&#xff0c;最核心的方法是通过 Object.defineProperty()方法来实现对属性的劫持&#xff0c;达到能监听到数据的变动。要实现数据的双向绑定&#xff0c; 当使用存取器描述属性的特性的时…

直播修仙:使用.NET 的 WebView2 如何获取请求的响应内容,以微信直播的互动直播为例...

背景近几年直播行业快速发展&#xff0c;门槛也越来越低&#xff0c;越来越的人涌入直播大军。不得不说&#xff0c;直播不仅带来了更多的娱乐消遣&#xff0c;还提供了一个新型的就业方式。说起直播的类型&#xff0c;有一个非常小众的娱乐直播&#xff0c;没有主播&#xff0…

web第6次作业position

position 属性指定了元素的定位类型。 position 属性的五个值&#xff1a; static &#xff08;静态定位&#xff09; HTML元素的默认值&#xff0c;即没有定位&#xff0c;元素出现在正常的流中。 静态定位的元素不会受到 top, bottom, left, right影响。 div.stati…

GeneralUpdate版本更新公告20221009

大家好我是juster&#xff0c;GeneralUpdate的开源项目作者。这次将发布GeneralUpdate兼容.NET MAUI和多平台为核心的版本。经过国庆假期的打磨修复了大量开源社区开发者的提交的bug和不合理修改建议&#xff0c;重构、删除了大量代码和结构使用和上一个版本没有太大变化。1.更…

实验2 java_《Java程序设计》实验2

1、使用java语言编程&#xff0c;从键盘输入N个整数存储到数组中&#xff0c;求数组所有元素的和、最大值和平均值。import java.util.Scanner;public class Program01{public static void main(String [] args){Scanner scanner new Scanner(System.in);System.out.println(&…

WPF遍历当前容器中某种控件的方法

原文:WPF遍历当前容器中某种控件的方法版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 https://blog.csdn.net/m0_37591671/article/details/79528845 WPF遍历当前容器中某种控件的方法 WPF遍历当前容器中某种控件的方法1.目的&#xff1a;2.实现思…

善用Object.defineProperty巧妙找到修改某个变量的准确代码位置

2019独角兽企业重金招聘Python工程师标准>>> 我今天的工作又遇到一个难题。前端UI右下角这个按钮被设置为"禁用(disabled)"状态。 这个按钮的可用状态由属性enabled控制。我通过调试发现&#xff0c;一旦下图第88行代码执行完毕之后&#xff0c;这个按钮的…

使用 C# 开发的轻量级开源数据库 LiteDB

你好&#xff0c;这里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;实用的工具或组件&#xff0c;希望对您有用&#xff01;简介 LiteDB 是一个小型、快速、轻量级的 .NET NoSQL 嵌入式数据库&#xff0c;也就是我们常说的 K/V 数据库&#xff0c;完全用 C# …

微信小程序仿微信SlideView组件slide-view

微信小程序仿微信SlideView组件。 使用 1、安装 slide-view 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始&#xff0c;小程序支持使用 npm 安装第三方包。 npm install --save miniprogram-slide-view2、在需要使用 slide-view 的页面 page.json 中…

hibernate 环境搭建测试

对于hibernate的介绍&#xff0c;网络上一搜一堆&#xff0c;恐怕我写的也没前辈总结的好。这个博主总结的十分好,方便大家欣赏 http://blog.csdn.net/liujiahan629629/article/details/21442607 真正要掌握&#xff0c;还得需要自己动手&#xff0c;才能丰衣足食。所需jar包j…

C# WPF 中使用 MahApps.Metro.IconPacks 提供的图标

概述我们在桌面应用程序开发时经常会用到很多图标&#xff0c;时常我是在阿里矢量图库下载&#xff1a;https://www.iconfont.cn/&#xff0c;然后存放多项目中去引用&#xff0c;不过这样操作起来有点繁琐&#xff0c;这节我们介绍一个更加便捷的方式.用法概述Wpf 图标管理工具…

java多线程同时运行_Java实现的两个线程同时运行案例

本文实例讲述了Java实现的两个线程同时运行。分享给大家供大家参考&#xff0c;具体如下&#xff1a;/*** 两个案例同时运行案例* 1:这个两个线程并不是有规律的运行而是有没有规律的交替运行*/package com.test3;public class Demo10_3 {/*** param args*/public static void …

dotnet 用 SourceGenerator 源代码生成技术实现中文编程语言

相信有很多伙伴都很喜欢自己造编程语言&#xff0c;在有现代的很多工具链的帮助下&#xff0c;实现一门编程语言&#xff0c;似乎已不是一件十分困难的事情。我利用 SourceGenerator 源代码生成技术实现了一个简易的中文编程语言&#xff0c;核心原理是将中文编程语言翻译为 C#…

HTTP/2 规格制定完成

IETF HTTP工作者的负责人Mark Nottingham在其博客上宣布HTTP/2规格制定完成&#xff0c;接下来将是分配RFC编号和正式发表。HTTP是Web的核心技术之一&#xff0c;相比HTTP/1&#xff0c;HTTP/2的改进之处包括更快的页面加载&#xff1b;更长久的连接&#xff1b;服务器推送&…

easyui combobox java_Easyui的combobox实现动态数据级联效果

实现从数据库中动态获取对应的list集合&#xff0c;并在easyui的combobox中显示出来。实现的效果如下&#xff1a;1、数据库的表设计如图所示2、数据库中填写相关的数据&#xff0c;如图所示。如图所示【法律法规】是所属栏目&#xff0c;因此他的字段parentid是0。【中国公民出…

为什么应该默认将 Class 设为密封类?

前言最近在 dotnet/sdk 上看到一个 Issue&#xff0c;它提出了一个有趣的要求&#xff1a;默认情况下将类设置为密封类(Sealed)&#xff1f;什么是密封类&#xff1f;默认情况下&#xff0c;类是开放的&#xff0c;这意味着它是可以被继承的。例如&#xff1a;class BaseClass …

Spring工具类的使用

2019独角兽企业重金招聘Python工程师标准>>> Spring-core中提供了大量的工具类&#xff0c;常用的有StringUtils、ObjectUtils、NumberUtils、Base64Utils等&#xff0c;Spring工具类在spring-core.jar中的org.springframework.util包下。 org.springframework.util…

python作业高级FTP(第八周)

作业需求&#xff1a; 1. 用户加密认证 2. 多用户同时登陆 3. 每个用户有自己的家目录且只能访问自己的家目录 4. 对用户进行磁盘配额、不同用户配额可不同 5. 用户可以登陆server后&#xff0c;可切换目录 6. 查看当前目录下文件 7. 上传下载文件&#xff0c;保证文件一致性 8…

Edge 浏览器被爆存在 XSS 绕过漏洞

来自知名安全测试套件Burp Suite厂商PortSwigger的安全专家Gareth Heyes近日在微软Edge浏览器的内置XSS过滤器存在绕过漏洞&#xff0c;这就意味着尽管微软在Edge浏览器中进行了大量的安全策略部署&#xff0c;但用户浏览网页的时候依然有可能让攻击者通过这种方式在Edge浏览器…

来了!十大更新

面向 Windows 10 正式版用户&#xff0c;微软发布了 2022 年 10 月更新。Windows 10 版本 21H1 更新后操作系统内部版本升级至 Build 190432130/2132&#xff08;带外更新&#xff09;。Windows 10 版本 21H2 更新后操作系统内部版本升级至 Build 19044.2130/2132&#xff08;带…