1. 数据绑定
官网传送门
WXML 中的动态数据均来自对应 Page 的 data。
数据绑定使用 Mustache 语法（双大括号）将变量包起来
ts
Page({data: {info: 'hello wechart!',msgList: [{ msg: 'hello' }, { msg: 'wechart' }]},
})
WXML
<view class="view-container"><view><text>{{info}}</text></view>
</view>
Mustache语法应用场景
- 绑定内容
- 绑定属性
- 运算（三元运算、算术运算）
- 逻辑判断
- 字符串运算
- 数据路径运算
注：微信小程序数据绑定与vue2的语法相同
2. 事件绑定
官网传送门
常用事件
| 类型 | 绑定方式 | 事件描述 |
|---|---|---|
| tap | bindtap或bind:tap | 触摸之后马上离开，类似html中click事件 |
| input | bindinput或bind:input | 文本框输入事件 |
| change | bindchange或bind:change | 状态改变时触发事件 |
事件回调对象event属性列表
| 属性 | 类型 | 说明 |
|---|---|---|
| type | String | 事件类型 |
| timeStamp | integer | 页面打开到触发事件经过的毫秒数 |
| target | Object | 触发事件的组件的属性值集合 |
| currentTarget | Object | 当前组件的属性值集合 |
| detail | Object | 额外的信息 |
| toches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组 |
| changedToches | Array | 触摸事件，当前变化的触摸点信息的数组 |
bindtap使用
WXML
<view><button bind:tap="btnTapHandler">Click</button></view>
ts
Page({btnTapHandler(event: WechatMiniprogram.BaseEvent){console.log(event)}
})
事件传参&数据同步
数据同步
例：点击add，count自增1
WXML
<view><text>{{count}}</text></view><view><button bind:tap="addCount">Add</button></view>
ts
Page({data: {count: 0},addCount() {this.setData({count: this.data.count + 1})},
})
事件传参
通过属性data-info给函数传递参数， e.target.dataset.info获取参数
例：点击add+2，count自增2
WXML
<view><text>{{count}}</text></view><view><button bind:tap="addDoubleCount" data-info="{{2}}">Add+2</button></view>
ts
Page({data: {count: 0},addDoubleCount(e: WechatMiniprogram.BaseEvent) {this.setData({count: this.data.count + e.target.dataset.info})},
})
bindInput
我们来做一个输入框，输入的时候改变info的内容
WXML
<view><text>{{info}}</text></view><view><input bindinput="inputHandler" /></view>
ts
Page({data: {info: 'hello wechart!'},inputHandler(e: WechatMiniprogram.CustomEvent) {this.setData({info: e.detail.value})},
})
3. 条件渲染
官网入口
点击开关block或者unblock
WXML
<view><switch checked="{{checked}}" bindchange="switchChange"/></view><view wx:if="{{checked}}">Block</view><view wx:else>UnBlock</view>
ts
Page({data: {checked: true,},switchChange(e: WechatMiniprogram.CustomEvent) {this.setData({checked: e.detail.value})},
})
4. 列表渲染
官网传送门
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<view wx:for="{{msgList}}">{{index}}: {{item.msg}}</view>
Page({data: {msgList: [{ msg: 'hello' }, { msg: 'wechart' }]}
})
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{msgList}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}
</view>
5. 数据请求
在小程序官网 开发管理 ->开发配置 ->服务器域名配置合法域名
可以在开发工具详情查看配置的域名
get
wx.request({url: 'https://www.***.cn/api/get',method: 'GET',data: {name: 'zs',},success: (res) => {console.log(res);}})
post
wx.request({url: 'https://www.***.cn/api/post',method: 'POST',data: {name: 'zs',age: 22},success: (res) => {console.log(res);}})
