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