微信小程序第三天的笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/SuoYi_/article/details/136207025

本文探讨了在IT项目开发中，如何通过事件机制如tap事件、bindtap以及bindinput实现用户界面的响应。内容涵盖了事件绑定、参数传递、文本框与data数据同步，以及如何在轻松与压力间寻找满足感的工作体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

真是能划水，不知道为什么今年过年就没动力了。

我时常在想，究竟什么样的生活才是我想要的，我可以为之努力奋斗的。是所谓的高薪吗？是一坐就是一天的IT吗？还是轻松悠闲简单钱少的文职人员？我不知道，我不知道我想要什么样的生活，好像都不是我想要的。太轻松的不想做，太累的不想做，为什么没有那种很充实，很舒适，很有满足感的生活？或许我可能要去体验一下支教下乡？

1.事件

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

常用事件

tap事件相当于HTML的onclick

1.1事件绑定

<button type="primary" bindtap="btnTapHandler"> 按钮 </button>

//与data平级
data:{
    ......
},
//定义按钮的事件处理函数
btnTapHandler(e){ //event==e
    console.log(e)
},

显示效果在控制器中可见

<button type="primary" bindtap="CountChange"> +1 </button>

//+1 按钮的点击事件处理函数

CountChange(e){ 
    console.log('ok')
},

效果如下：

在data中添加count: 0

修改刚刚的js

//+1 按钮的点击事件处理函数

CountChange(){ 
    this.setData({
        count: this.data.count + 1
    })
},

运行效果为每次点击 count值+1

1.2事件传参

绑定事件与事件传参不能同时进行

event.target.dataset.参数名即可获取具体参数的值

<button type="primary" bindtap="btnTap2" data-info="{{2}}"> +2 </button>
//{{2}}是数字 2 是文本

btnTap2(e){ 
    console.log(e) //打印输出
},

显示在控制台Console中 type -- target -- dataset :{info: 2} 此处2为数字 "2"为文本

//自增+2
btnTap2(e){ 
    this.setData({
        count: this.data.count + e.target.dataset.info  //e.target.dataset.为固定
    })
},

显示在AppData

1.3 bindinput 语法格式

<input bindinput="inputHandler"></input>

//inputHandler输入框的事件处理函数
inputHandler(e){
    console.log(e.detail.value)
},

1.4文本框和data数据同步

第一步 data中添加msg

第二步 wxml中放置文本框

第三步wxss美化文本框

如果想用文本框影响AppData

修改js

效果：

学习两分钟，摸鱼两周，摸鱼时间到！