文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序中怎么响应用户输入事件

2023-06-05 03:37

关注

这期内容当中小编将会给大家带来有关微信小程序中怎么响应用户输入事件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

微信小程序中如何响应用户输入事件

让我们进一步学习微信小程序控制器,掌握在小程序控制器中响应用户输入的方法。

这个例子很简单,在微信小程序的视图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上的计数器才被刷新。

微信小程序中怎么响应用户输入事件

上述就是小编为大家分享的微信小程序中怎么响应用户输入事件了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯