1.WXML 模板语法
1.1.数据绑定
小程序中, 数据绑定分为2个步骤: ① 在 data 中定义数据
② 在 WXML 中使用数据
- 在 data 中定义页面的数据
在页面对应的 .js 文件中，把数据定义到 data 对象中即可 - 在 WXML 中使用数据
把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可。
1.12运算（三元运算、算术运算等）
数据如下:
<view>{{randomNum >= 2? '数字大于5':'不大于5'}}</view>
js
data(){
randomNum:Math.random() * 10
}
1.2.事件绑定
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理
1.2.2. js 中访问 data 中的数据
在 js 代码中, 如果想要访问 data中 的数据, 是通过 this.data.xxx 的方式进行访问
1.2.3. js 中修改 data 中的数据
通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：
小程序不是双向数据绑定的框架,数据变了,以后视图不会同步更新
如果想要数据改变,让视图也同步更新,那么需要调用this.setDate
fn(e){
this.setData({
count:this.data.count+1
})
},
1.2.4.事件传参
小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。
例如，下面的代码将不能正常工作：
1.2.5. bindinput 的使用
在小程序中，通过 input 事件来响应文本框的输入事件，具体的使用步骤如下：
① 通过 bindinput ，可以为文本框绑定输入事件：
1.2.6.实现小程序中的双向数据绑定
实现步骤：
① 定义数据
② 渲染结构, 绑定 data 中的数据
③ 美化样式
④ 监听 input 事件
1.3.条件渲染
在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块
也可以配合 wx:elif 和 wx:else 来添加 else 判断：
<view wx:if="{{type=== 1}}">1</view>
<view wx:elif="{{type===2}}">2</view>
<view wx:else>xxx</view>
1.3.3. wx:if 与 hidden 的对比
① 运行方式不同
- wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
- hidden 以切换样式的方式（ display: none/block; ），控制元素的显示与隐藏
② 使用建议 - 频繁切换时，建议使用 hidden
- 控制条件复杂时，建议使用 wx:if 搭配 wx:elif 、 wx:else 进行展示与隐藏的切换
1.4.列表渲染
默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。
我们也可以手动指定索引和当前项的变量名
- 使用
wx:for-index可以指定当前循环项的索引的变量名 - 使用
wx:for-item可以指定当前项的变量名
2.WXSS 模板样式
WXSS ( WeiXin Style Sheets )是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的
CSS 。 WXSS 具有 CSS 大部分特性，同时， WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。与 CSS 相比， WXSS 扩展的特性有：rpx 尺寸单位@import 样式导入
2.1. rpx
- 什么是 rpx 尺寸单位
rpx （ responsive pixel ）是微信小程序独有的，用来解决屏适配的尺寸单位。 - rpx 的实现原理
rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配， rpx 把所有设
备的屏幕，
在宽度上等分为 750 份, 1份就是1 rpx , 所以:
在较小的设备上，1 rpx 所代表的宽度较小
在较大的设备上，1 rpx 所代表的宽度较大
