一、数据绑定
基本原则：在data中定义数据，在wxml中使用数据
1、在data中定义页面的数据
在页面对应的.js文件中，把数据定义到data对象中即可：
/*** 页面的初始数据*/data: {info: 'hello world'},输出结果：
2、Mustache语法/插值表达式的格式
把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可，语法格式为：<view>{{要绑定的数据名称}}</view>
<view>{{info}}</view>
3、Mustache语法的应用场景
动态绑定内容（案例如2）、动态绑定属性、运算（三元运算、算术运算等）
（1）动态绑定属性
/**js文件*/
/*** 页面的初始数据*/data: {imgSrc: '/pages/image/1.jpg'，//本地图片// imgSrc: 'http://www.itheima.com/images/logo.png' //外部链接图片
},
<!--wxml文件-->
<image src="{{imgSrc}}"></image> 输出结果：
（2）三元运算
/**js文件*//*** 页面的初始数据*/data: {// 10以内的随机数字RandomNum1: Math.random() * 10 },
<!--wxml文件-->
<view>{{RandomNum1 >=5?'数字大于或等于5':'数字小于5'}}</view>输出结果：
调试器查看输出结果：
找到调试器-AppData，点击“编译”，
（3）算术运算
总结：
以上演示的所有代码
/**js文件中的代码*/
Page({/*** 页面的初始数据*/data: {
//动态绑定内容
info: 'hello world',
//动态绑定属性imgSrc: '/pages/image/1.jpg',// 10以内的随机数字RandomNum1: Math.random() * 10,//算术运算：生成一个带两位小数的随机数RandomNum: Math.random().toFixed(2)},
})
<!--wxml文件-->
<!—动态绑定内容 --><view>{{info}}</view>
<!—动态绑定属性--><image src="{{imgSrc}}"></image>
<!—三元运算--><view>{{RandomNum1 >= 5 ? '数字大于或等于5' : '数字小于5'}}</view>
<!—算术运算 -->
<view>生成100以内的随机数：{{RandomNum * 100}}</view>
注：编写边看实现效果，全部代码写完可能只能显示最后两条，清除缓存重新编译即可。
二、事件绑定
什么是事件？事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
有关渲染层和逻辑层的详细文档参考：https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html
1、小程序中常用的事件
2、事件对象的属性列表：
当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下：
3、target和currentTarget区别
target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。
简单来说，点击“按钮”，如果使用e.target，点击“按钮”才会起作用；如果使用e.currentTarget，点击“view”也会起作用。
4、bindtap的语法格式：
在小程序里面，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。
通过bindtap,可以为组件绑定tap触摸事件，语法如下：
<!--wxml文件-->
<!--事件绑定-->
<button type="primary" bind:tap="btnTapHandler">按钮</button>
//在页面的.js文件中定义对应的事件处理函数，时间参数通过形参event（一般简写成e）来接收：
//js文件中：
//定义按钮的事件处理函数btnTapHandler(e){console.log(e)},测试效果：
三、事件传参与数据同步
在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：
wxml文件：
<button type="primary" bind:tap="CountChange">+1</button>
/**js文件：*//*** 页面的初始数据*/data: {
count: 0
},//+1 点击事件的处理函数CountChange(){this.setData({count: this.data.count + 1})},
1、事件传参：
小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。
小程序会把bindtap的属性值，统一当作事件名称来处理。
e.g 该代码不会工作
<button type=”primary” bindtap=’btnHandler(123)’>事件传参</button>这相当于要调用一个名为btnHandler(123)的事件处理函数。
正确的做法是 ：
可以为组件提供data-*自定义属性传参，其中*代表参数名称，示例代码如下：
<!—wxml页面--><!--事件传参--><!--显示数值--><button type="primary" bind:tap="btnTap2" data-info="{{2}}">+2</button><!--显示字符串--><button type="primary" bind:tap="btnTap3" data-info="2">+2</button>
在事件处理函数中，通过event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下:
//事件绑定的处理函数 this.data.count表示原来的值 e.target.dataset.info表示点击按钮的值btnTap2(e){this.setData({count: this.data.count + e.target.dataset.info})},
2、bindinput的语法格式
在小程序里面，通过input事件来响应文本框的输入事件，语法格式如下：
通过bindinput，可以为文本框绑定输入事件
<!—wxml页面—><!--bindinput--><input bindinput="inputHandler"></input>
//在页面.js文件中定义事件处理函数：//bindinput值的获取inputHandler(e){console.log(e.detail.value)},
3、实现文本框和data之间的数据同步
步骤：
（1）定义数据
/** js*/data: {msg: ‘你好’},（2）渲染结构
<!—wxml--><input value="{{msg}}" bindinput="inputHandler"></input>（3）美化样式
/*wxss页面*/input {border:1px solid purple;margin: 5px;padding: 5px;border-radius: 3px;}（4）绑定input事件处理函数
(在页面上输入值，同步到原来的值)
/** js页面*/inputHandler(e){this.setData({msg: e.detail.value})},在文本框中输入值，会返回
四、条件渲染：
1、wx:if
在小程序中，使用wx:if=”{{condition}}”来判断是否需要渲染该代码块：
也可以用wx:elif 和wx:else来添加else判断：
/**js*/data: {type: 1},<!—wxml- -><!--条件渲染--><view wx:if="{{type === 1}}">男</view><view wx:elif="{{type === 2}}">女</view><view wx:else>保密</view>测试结果：
2、结合<block>使用wx:if
如果一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性，示例如下：
<!—wxml页面--><!--wx:if后就只有true和false两种值，true就显示，false就隐藏--><block wx:if="{{false}}"><view>男</view><view>女</view><view>保密</view></block>注：<block>并不适用一个组件，它只是一个包裹性质的容器，不回在页面中做任何渲染。如果使用<view>，就会渲染出一个组件，就像是两个div外面还有一个div。
3、hidden
在小程序中，直接使用hidden-“{{condition}}”也能控制元素的显示与隐藏：
js文件：
data: {flag: true},wxml文件：
<!--hidden--><view hidden="{{flag}}">如果条件为true就隐藏，为false就显示：</view>4、wx:if和hidden的区别
（1）运行方式不同
wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏；
hidden以切换样式的方式（display:none/block;），控制元素的显示与隐藏
<!—wxml页面 --><!--hidden与wx:if的对比--><view hidden="{{!flag}}">如果条件为true就隐藏，为false就显示：</view><view wx:if="{{flag}}">这是使用wx:if展示的元素</view>如果flag为true,
若flag为false,
简单来说，当条件不符合时，wx:if判断的值是不存在的。而hidden隐藏的是真实存在的。
使用建议：
频繁切换时，建议使用hidden
控制条件复杂时，使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换
五、列表渲染
1、wx:for
通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
js文件中定义数组：
data: {arry: ['OPPO','MI','vivo']},wxml文件中渲染列表：
<!--列表渲染--><view wx:for="{{arry}}">索引是：{{index}},item项是{{item}}</view>
默认情况下，当前循环的索引用index表示；当前循环项用item表示。
手动指定索引和当前项的变量名（不常用）
使用wx:for-index可以指定当前循环项的索引变量名
使用wx:for-item可以指定当前项的变量名
示例代码如下：
<!--指定索引项和变量名--><view wx:for="{{arry}}" wx:for-index="dex" wx:for-item="items">索引是：{{dex}},item项是{{items}}</view>输出结果同上。
2、wx:key的使用
类似于Vue列表渲染中的 :key,小程序在实现列表渲染是，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：
/**js文件中定义对象*/data: {/**名字一定要用’’包裹，否则无法显示*/List: [{id: 1,name:'小芳' },{id: 2,name: '小明'},{id: 3,name: '小王'}]},<!—wxml页面中--><!—id不能使用{{}}包裹，如果数组中没有定义id，也可以写成index - ->
<view wx:for="{{List}}" wx:key="id">{{item.name}}</view>
3、wxss样式美化页面结构
（1）wxss与css的关系
什么是wxss？
WXSS（WeiXin Style Sheets）是一套样式语言，用于美化WXML的组件样式。
WXSS和CSS的关系
WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应小程序>微信小程序的开发。
与CSS相比，WXSS扩展的特性有：
rpx尺寸单位
@import样式导入
（2）rpx单位
什么是rpx尺寸单位？
rpx(responsive pixel)是小程序>微信小程序独有的，用来解决屏适配的尺寸单位。
rpx的实现原理
鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）
在较小的设备上，1rpx代表的宽度较小；
在较大的设备上，1rpx代表的宽度较大。
小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
4、rpx与px之间的单位换算（了解）
