目录
（1）小程序中的事件传参比较特殊，即不能在绑定事件的同时进行参数的传递。
一、数据处理
原理：在.js文件中的data:{ }页面数据块中进行变量的声明，然后在.wxml文件中使用Mustache语法格式，即{{ }}进行数据的使用。另外{{ }}可以支持数据的运算包括三元运算以及图片数据的动态绑定。
1.字符数据的绑定
声明数据
data: {
info:'hello word!',//定义变量info
},使用数据
<view>{{info}}</view>2.图片数据的动态绑定
声明数据
//变量值存放的是图片的地址
data: {
imageSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F01%2F210924134Q43357-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659682783&t=228a191082446f27834a00087ebf252b',
},使用数据
<image src="{{imageSrc}}" mode="widthFix"></image>3.数据运算
- 以生成随机数并用三目运算符判断值的范围为例
声明数据
data: {
randomNumber:(Math.random()*10).toFixed(2),//生成10以内的随机生成数，并保留两位小数
randomNumber2:Math.random().toFixed(2),//将0~1之间的随机数保留两位小数
},使用数据
<view>
<view>
<text class="container1">随机数1为：{{randomNumber}}</text>
<!-- 使用Mustache即{{}}进行三元运算 -->
{{randomNumber >= 5 ? '随机数大于或等于5' : '随机数小于5'}}
</view>
<view>
<text class="container2">随机数2为：{{randomNumber2*100}}</text>
{{randomNumber >= 50 ? '随机数大于或等于50' : '随机数小于50'}}
</view>
</view>4.总代码与测试截图
.js文件(仅展示页面数据data部分)
/**
* 页面的初始数据
*/
// 数据绑定
data: {
info:'hello word!',//定义变量info
imageSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F01%2F210924134Q43357-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659682783&t=228a191082446f27834a00087ebf252b',
randomNumber:(Math.random()*10).toFixed(2),//生成10以内的随机生成数
randomNumber2:Math.random().toFixed(2),//将随机数保留两位小数
},.wxml文件
<!-- 使用Mustache语法调用.js文件中data中所声明的变量info,将其渲染到页面上 -->
<!-- 字符数据的绑定 -->
<view>{{info}}</view>
<!-- 图片数据的动态绑定 -->
<image src="{{imageSrc}}" mode="widthFix"></image>
<view>
<view>
<text class="container1">随机数1为：{{randomNumber}}</text>
<!-- 使用Mustache即{{}}进行三元运算 -->
{{randomNumber >= 5 ? '随机数大于或等于5' : '随机数小于5'}}
</view>
<view>
<text class="container2">随机数2为：{{randomNumber2*100}}</text>
{{randomNumber2*100 >= 50 ? '随机数大于或等于50' : '随机数小于50'}}
</view>
</view>.wxss文件
/* pages/databind/dayabind.wxss */
.container1{
background-color: lightgreen;
}
.container2{
background-color:lightpink;
}测试截图
获取图片地址
（也可以绑定根目录下image文件夹里面的图片，给出路径即可）
二、事件处理
1.概念
- 事件是渲染层（.wxml）到逻辑层（.js）的通讯方式。
- 通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务处理
常用的事件：
当事件回调函数被触发时，会接收到一个事件对象event，它的详细属性如下：
另外，target与currentTarget的区别：
2.事件绑定
（1）bindtap
- 在小程序中，没有HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为
.wxml代码
<button type="primary" bindtap="btntap">按钮</button>.js代码
Page({
// 触摸事件的处理函数
btntap(event){
console.log("hello world!");
console.log(event);
},
})测试截图
当点击按钮，则会触发按钮事件处理函数，接收到事件对象后，在调试器输出打印一个hello world!和事件源组件的属性集合··
（2）bindinput
- 在小程序中，通过input事件来响应文本框的输入事件
- 通过bindinput来为文本框绑定事件
.wxml
<input bindinput="handleInput"></input> .js
Page({
//文本框输入事件响应
handleInput(e){
//打印输出文本框内最新的值
console.log(e.detail.value)
},
})3.事件传参
（1）小程序中的事件传参比较特殊，即不能在绑定事件的同时进行参数的传递。
例如如下代码，本想在绑定事件将参数123传递过去，但是这样会被小程序编译器当做统一事件名称来处理，相当于调用一个名称为btntap(123)的事件处理函数，而不是传递参数123
错误代码
<button type="primary" bindtap="btntap(123)">事件传参</button>正确代码
<button type="primary" bindtap="btntap" data-info="{{123}}">事件传参</button>可以为组件提供data-*自定义属性传参，其中*表示在data结点中定义的参数变量名字
（2）获取参数值
通过调用event.target.dataset.*来获取，*为参数变量名称
.wxml
<button type="primary" bindtap="btntap" data-info="{{2}}">按钮</button>.js
// 触摸事件的处理函数
btntap(event){
console.log("hello world!");
//在原来值的基础上加上传递进来的参数值
count:this.data.count+event.target.dataset.info
})
console.log(event);
},
4.数据赋值与同步
（1）数据赋值
- 通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值
页面结构不变，.js文件中代码为
Page({
/**
* 页面的初始数据
*/
data: {
count:0
},
// 触摸事件的处理函数
btntap(event){
console.log("hello world!");
this.setData({
count:this.data.count+1
})
console.log(this.data.count);
},
})可以看到每点击一次按钮，count值加1
（2）文本框和data之间的数据同步
原理：先获取文本框内输入的最新值，再使用this.setData方法将数据重新赋值
.wxml
<input value="{{msg}}" bindinput="handleInput"></input> .js
Page({
data: {
msg:'你好'
},
//文本框输入事件响应
handleInput(e){
//更新数据，实现数与文本框内输入一致
this.setData({
msg:e.detail.value
})
//打印输出文本框内最新的值
console.log(this.data.msg)
},
}).wxss
input{
border: 1px solid #eee;
padding: 5px;
margin: 5px;
border-radius: 3px;
}测试
可见在文本框内每输入一个字符都将同步到data中的参数msg中，这样实现了数据的同步
三、条件渲染
（1）根据指定条件来选择性的渲染某个页面
例如下面的代码，type为js文件data节点下的变量值为2，根据type的值来选择在页面上渲染的内容
（条件判断是3个等于号===，这一点要注意）
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else="{{type===3}}">保密</view>另外，也可以使用hidden来实现相同的功能
<view hidden="{{type===1}}">男</view>
<view hidden="{{type===2}}">女</view>
<view hidden="{{type===3}}">保密</view>使用hidden与wx:if的区别：
- wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
- hidden以切换样式的方式（display:none/block;）来控制元素的显示与隐藏
- 当需要频繁切换时，建议使用hidden
- 当控制条件较多，建议使用wx:if
（2）根据指定条件控制多个组件的展示与隐藏
需要使用<bolck></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性
注意：<block>并不是组件，它只是一个包裹性质的容器，不会在页面中做任何的渲染
<block wx:if="{{type===2}}">
<view>view1</view>
<view>view2</view>
<button type="primary">点我</button>
</block>四、列表循环渲染
（1）wx:for循环渲染
数组内容
arr2:['华为','小米','苹果']渲染
<view wx:for="{{arr2}}">
下标：{{index}} ,名字：{{item}}
</view>index为数组默认的下标，item为数组默认的每一项，当数组不是一维数组时，item项指代里面的每一个对象，打印的话就要使用item.XX来进行打印输出，而只打印 item 会发现是个Object对象
数组内容
arr:[{id:0,name:'华为'},{id:1,name:'小米'},{id:2,name:'苹果'}]渲染
<view wx:for="{{arr}}">
下标：{{item.id}} ,名字：{{item.name}}
</view>（2）wx:key提高循环渲染效率
<view wx:for="{{arr}} wx:key="id">
下标：{{item.id}} ,名字：{{item.name}}
</view>不妨点个赞再走哦~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/93476.html
