学习文档
阿里云盘: https://www.aliyundrive.com/s/ydLBHgcCXXE 提取码: z7c4
WXML模板语法-数据绑定
数据绑定基本原则
① 在 data 中定义数据
② 在 WXML 中使用数据
在data中定义页面数据
在页面对应的.js文件中,把数据定义到data对象中即可：
Mustache语法的格式
把data中的数据绑定到页面中渲染，使用
Mustache语法（双大括号）将变量包括起来即可，语法格式为:
<view>{{ 将要绑定的数据名称 }}</view>
动态绑定属性
页面的数据如下:
Page({ data : { imgSrc : 'http://xxxxxxxx' } })
页面的结构如下:
<image src="{{imgSrc}}"></image>
三元运算
页面的数据如下:
Page({ data : { randomNum : Math.random() * 10 } })
页面的结构如下:
<view>{{randomNum >= 5 ? '随机数大于或等于5' : '随机数字小于5'}}</view>
算数运算
页面的数据如下:
Page({ data : { randomNum : Math.random().toFixed(2) //生成一个两位小数的随机数 } })
页面的结构如下:
<view>生成100以内的随机数 : {{randomNum * 100}}</view>
WXML模板语法-事件绑定
什么是事件
事件是
渲染层到逻辑层的通讯方式.通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理
小程序中常用的事件
事件对象的属性列表
当事件回调触发的时候,会收到一个对象event,它的详细属性如下表所示:
target和currentTarget 的区别
target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件,举例如下：
点击内部的按钮时，点击事件以冒泡的形式向外扩散，也会触发外层view的tap事件处理函数.
此时，对于外层的view来说：
- e.target 指向的是触发事件的源头组件，因此，e.target是内部的按钮组件
- e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件
bindTap的语法格式
在小程序中不存在HTML中的 onclick 鼠标点击事件 ，而是通过
tap事件来响应用户的触摸行为。
通过bindTap,可以为组件绑定tap事件来响应，语法如下：
<button type="primary" bindTap="btnTapHandler">按钮</button>
在页面的.js文件中定义对应事件处理函数，事件参数通过形参event(一般简写成e)来接收：
Page({ btnTapHandler(e) { //按钮的tap事件处理函数 console.log(e) //事件参数对象e } })
在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法，可以给页面data中的数据重新进行赋值，示例如下：
Page({ data : { count : 0 }, //修改count的值 changeCount() { this.setdata({ count : this.data.count + 1 }) } })
事件传参
小程序中的事件传参比较特殊，
不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码不能正常工作：
<button type="primary" bindtap="btnHandler(123)">事件传参</button>
因为小程序会把bintap的属性值，统一当作事件名名称来处理，相当于要调用一个名称为btnHandler(123)的事件处理函数。
可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，示例代码如下：
<button bindtap="btnHandler" data-info="{{1}}">事件传参</button>
最终：
- info会被解析为参数的名字
- 数值1会被解析为参数的值
在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值,示例代码如下:
btnHandler(e) { //dataset是一个对象，包含了所有通过 data-* 传递过来的参数项 console.log(e.target.dataset) //通过dataset 可以访问到具体的值 console.log(e.target.dataset.info) }
bindinput的语法格式
在小程序中，通过input事件来响应文本框的输入事件，语法格式为：
通过bindinput，可以为文本框绑定输入事件:
<input bindinput="inputHandler"></input>
在页面的.js文件中定义的事件处理函数：
inputHandler(e) { //e.detail.value 是变化过后，文本框最新的值 console.log(e.detail.value) }
实现文本框和data之间数据同步
实现步骤：
- 定义数据
- 渲染结构
- 美化样式
- 绑定input事件处理函数
//文本框内容改变的事件 iptHandler(e){ this.setData({ //通过e.detail.value获取到文本框最新的值 msg : e.detail.value }) }
