5-微信小程序语法参考

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);}})