微信小程序原生开发:常用事件与属性列表

常用事件与属性列表

处理点击事件

接下来我们希望做一件事情:

创建一个按钮

当用户点击按钮时

让 product 的 num + 1

创建按钮的方式非常简单:

html 复制代码
<button type="primary">num + 1</button>

问题在于:我们如何给这个按钮添加点击事件呢?

有过开发经验的同学,可能会猜到:我们可以给 button 一个 click 事件来监听按钮的点击。

可是大家需要知道,现在我们是在【小程序】中,那么如果想要给 button 添加点击事件则不可以使用 click 而是 bind:tap / bindtap

其中 bind: / bind 表示【绑定事件】,tap 为绑定的具体事件。小程序具体事件列表,可以点击 这里 查看。

html 复制代码
  <button type="primary" bind:tap="onAddNum">num + 1</button>

接下来需要在 js 中定义对应的 事件

js 复制代码
 /**
  * 定义事件处理的方法
  */
 onAddNum () {
  console.log('onAddNum')
 }

到目前:我们已经 监听了按钮的点击事件,并且写入了对应的处理函数 ,接下来就需要 **修改 num 的值 **

修改 data 的数据

想要修改 data 中的数据,那么我们需要借助一个函数 setData

setData 接收一个 对象作为参数,这个对象就是最新的 data 数据。

其中 key 为要修改的数据, value 为最新的值

访问 data 的数据

因为我们想要让 num + 1 ,所以我们还需要拿到 num 的当前值,想要访问 num 的值,可以通过 this.data.product.num 的形式访问

所以最终的修改 num 的代码为:

js 复制代码
 /**
  * 定义事件处理的方法
  */
 onAddNum () {
  this.setData({
    'product.num': this.data.product.num + 1
  })

此时,当我们点击 button ,可以发现:【当 num 发生改变时,总价格也发生了对应的变化】

  1. 如何为按钮添加点击事件?
    1. bindtap || bind:tap
  2. 如何修改 data 中数据的值?
    1. 通过 this.setData({}) 定义新的值
    2. 通过 this.data 访问具体的值
相关推荐
2501_916007479 小时前
iOS 混淆与团队协作,研发、安全、运维、测试如何在加固流程中高效配合(iOS 混淆、ipa 加固、协作治理)
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆14 小时前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序
江城开朗的豌豆14 小时前
嘿,别想那么复杂!我的第一个微信小程序长这样
前端·javascript·微信小程序
2501_9160088915 小时前
iOS 不上架怎么安装?多种应用分发方式解析,ipa 文件安装、企业签名、Ad Hoc 与 TestFlight 实战经验
android·macos·ios·小程序·uni-app·cocoa·iphone
CRMEB定制开发17 小时前
PHP多商户接入阿里云识图找商品
android·阿里云·小程序·php·商城系统·微信商城·crmeb
00后程序员张18 小时前
iOS App 混淆实战,在源码不可用情况下的成品加固与测试流程
android·ios·小程序·https·uni-app·iphone·webview
说私域20 小时前
基于开源AI智能名片与链动2+1模式的S2B2C商城小程序研究:构建“信息找人”式精准零售新范式
人工智能·小程序·开源
知识分享小能手20 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面交互 —— 知识点详解与案例实现(3)
前端·javascript·学习·react.js·微信小程序·小程序·交互
说私域20 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序在公益课裂变法中的应用与影响研究
人工智能·小程序
Tartly20 小时前
掌中智汇,运筹帷幄 - 全新ASUS华硕智汇商擎小程序上线
小程序