主题
微信小程序
样式
尺寸单位
rpx 是小程序新增的自适应单位，小程序规定，任何型号的手机的屏幕宽度都为 750rpx。
background-image
小程序中的 background-image 不支持本地路径！需要使用网络图片，或者 base64，或者 <image> 组件。
事件绑定
bind:事件名bind事件名
数据绑定
声明和绑定数据
html
<button type="primary" bind:tap="handleTap">{{ num }}</button>js
Page({
data: {
num: 0, // 定义属性
},
handleTap() {
// 更新属性值
this.setData({ num: this.data.num + 1 })
},
})双向绑定
普通属性的绑定是单项的，若需要双向绑定，需要在属性前面加上 model:：
html
<input model:value="{{ value }}" />
<checkbox model:checked="{{ checked }}" />注意
- 属性值只能是一个单一字段的绑定；
- 属性值不能写“属性路径”，也就是说不支持对象和数组；
列表渲染
wx:key是必须的，且需要保持唯一。- 给
wx:key赋值时，不需要使用双括号进行包裹。 wx:key有两种添加形式：- 字符串：直接为 item 中的某个属性；
- 保留关键字
*this：代表的是item本身。
数组
- 每一项的变量名默认为
item。 - 每一项下标的变量名默认是
index。
html
<view wx:for="numList" wx:key="index">{{ item }} - {{ index }}</view>对象
- 对象属性的值为
item。 - 对象属性为
index。
html
<view wx:for="obj" wx:key="index">{{ item }} - {{ index }}</view>修改默认变量名和下标
- 修改默认变量名：
wx:for="numList" wx:for-item="num"。 - 修改默认下标：
wx:for="numList" wx:for-index="index"。
条件渲染
条件渲染有两种方式：
wx:if、wx:elif、wx:else：通过 移除/新增节点 来实现；hide：通过 display 样式属性 来实现。