目录
模板与配置
模板语法-数据绑定
数据绑定的基本原则
①在data中定义数据
在页面对应的 .js 文件中，把数据定义到data对象中即可：
②在WXML中使用数据
<view>{{要绑定的数据名称}}</view>
Mustache语法的格式
把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：
<view>{{要绑定的数据名称}}</view>
主要应用场景如下：
绑定内容
绑定属性
运算（三元运算、算术运算等）
动态绑定内容
页面的数据如下：
page({
data:{
info:'init data'
}
})
页面的结构如下：
<view> {{ info }}</view>
动态绑定属性
页面数据如下：
page({
data:{
imgSrc:'http://www.itheima.com/images/logo.png'
}
})
页面的结构如下：
<image src="{{imgSrc}}" mode="widthFix"></image>
三元运算
页面数据如下：
page({
data:{
randomNum: Math.random()*10 //生成10 以内的随机数
}
})
页面的结构如下：
<view>{{ randomNumber >=5 ? '随机数字大于或等于5' : '随机数字小于5'}}</view>
算数运算
页面数据如下：
page({
data:{
randomNum: Math.random().toFixed(2) //生成一个带两位小数的随机数，例如 0.34
}
})
页面的结构如下：
<view>生成100以内的随机数{{ randomNumber * 100}}</view>
模板语法-事件绑定
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理
常用事件
| 类型 | 绑定方式 | 事件描述 |
|---|---|---|
| top | bindtop或bind:top | 手指触摸后马上离开，类似于HTML中的cllck事件 |
| input | bindinput或bind:input | 文本框的输入事件 |
| change | bindchange或bind:change | 状态改变时触发 |
事件对象的属性列表
当事件回调触发的时候，会收到一个事件对象event，他的详细属性如下表所示：
| 属性 | 类型 | 说明 |
|---|---|---|
| type | string | 事件类型 |
| timeStamp | integer | 页面打开到触发事件所经过的毫秒数 |
| target | Object | 触发事件的组件的一些属性值集合 |
| currentTarget | Object | 当前组件的一些属性值集合 |
| detail | Object | 额外的信息 |
| touches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组 |
| changedTouches | Array | 触摸事件，当前变化的触摸点信息的数组 |
target 和 currentTarget 的区别
target是触发该事件的源头组件，而currentTarget 则是当前事件所绑定的组件。举例如下：
<view class="outer-view" bindtap="outerHandler">
按钮
</view>
点击内部的按钮，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。
e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件
e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件
bindtap的语法格式
在小程序中，不存在HTML中的onclick 鼠标点击事件，而是通过top事件来响应tap事件来响应用户的触摸行为。
①通过bindtap，可以为组件绑定tap触摸事件，语法如下：
按钮
②在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写e）来接收：
page({
btnTapHandler(e){//按钮的tap事件处理函数
console.log(e)//事件参数对象e
}
})
在事件处理函数中为data中的数据赋值
通过调用 this.setData(dataObject) 方法，可以给页面data中的数据重新赋值，示例如下：
page({
data:{
count:0
},
// +1按钮的点击事件处理函数
CountChange(){
this.setData({
count:this.data.count + 1
})
},
})
事件传参
小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正确工作：
事件传参
因为小程序会把bindtap的属性值，统一当作事件名称来处理，相当于要调用一个名称为btnHandler(123) 的事件处理函数。
方式：
可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：
事件传参
最终：
info会被解析为参数的名字
数值2 会被解析为参数的值
在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下:
bindinput的语法格式
实现文本框和data之间的数据同步
定义数据：
渲染结构：
美化样式：
绑定input事件处理函数：
模板语法-条件渲染
wx:if
在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块：
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>
结合<block>使用wx:if
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
hidden
wx:if与hidden的对比
模板语法-列表渲染
wx:for
通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
手动指定索引和当前项的变量名*
wx:key的使用
扫一扫
75
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
