模板语法
今天我们来介绍一下小程序中的模版语法！！！
1. 声明和绑定数据
小程序页面中使用的数据均需要在 Page() 方法的 data 对象中进行声明定义
在将数据声明好以后，需要在 WXML 中绑定数据，数据绑定最简单的方式是使用 Mustache 语法（双大括号）将变量包起来。
在 {{ }} 内部可以做一些简单的运算，支持如下几种方式：
-
算数运算
-
三元运算
-
逻辑判断
-
其他…
📌 注意事项：
在 {{ }} 语法中，只能写表达式，不能写语句，也不能调用 js 相关的方法
定义数据：
Page({
// 页面的初始数据
data: {
num: 1
}
// coding...
}
使用数据：
➡️ pages/index/index.wxml
<!-- 如果需要展示数据，在 wxml 中需要使用双大括号写法将变量进行包裹 -->
<!-- 展示内容 -->
<view>{{ school }}</view>
<view>{{ obj.name }}</view>
<!-- 绑定属性值，如果需要动态绑定一个变量，属性值也需要使用双大括号进行包裹 -->
<view id="{{ id }}">绑定属性值</view>
<!-- 如果属性值是布尔值，也需要使用双大括号进行包裹 -->
<checkbox checked="{{ isChecked }}" />
<!-- 算术运算 -->
<view>{{ id + 1 }}</view>
<view>{{ id - 1 }}</view>
<!-- 三元运算 -->
<view>{{ id === 1 ? '等于' : '不等于' }}</view>
<!-- 逻辑判断 -->
<view>{{ id === 1 }}</view>
<!-- 在双大括号写法内部，只能写表达式，不能写语句，也不能调用 js 的方法 -->
<!-- <view>{{ if (id === 1) {} }}</view> -->
<!-- <view>{{ for (const i = 0; i <= 10; i++) {} }}</view> -->
<view>{{ obj.name.toUpperCase() }}</view>
➡️ pages/index/index.js
// index.js
Page({
// 在小程序页面中所需要使用的数据均来自于 data 对象
data: {
id: 1,
isChecked: false,
school: '尚硅谷',
obj: {
name: 'tom'
}
}
})
2. 声明和修改数据
小程序中修改数据并不能直接进行赋值，而是要通过调用 this.setData 方法才能实现
将需要修改的数据以 key:value 的形式传给 this.setData 方法。
this.setData 方法有两个作用：
- 更新数据
- 驱动视图更新
Page({
// 页面的初始数据
data: {
num: 1
},
updateNum() {
this.setData({
// key 是需要修改的数据
// value 是最新值
num: this.data.num + 1
})
}
// coding...
}
3. setData-修改对象类型数据
在实际开发中，我们经常会在 data 中声明对象类型的数据，小程序中通过调用 setData 方法可以修改页面的数据，包括对象类型的数据。下面是修改对象类型数据的方法：
-
定义一个对象
Page({ // 定义页面中使用的数据 data: { userInfo: { name: 'Tom', age: 10, gender: '男' } } } -
修改对象中的单个属性：
this.setData({ 'userInfo.name': 'Jerry' }) -
修改对象中的多个属性
// 修改对象中的多个属性 this.setData({ 'userInfo.name': 'Jerry', 'userInfo.age': 100 }) -
使用 ES6 的展开运算符
在修改对象类型的数据时，可以使用 ES6 的展开运算符先复制对象，然后利用新值对旧值覆盖的方式修改
const userInfo = { ...this.data.userInfo, name: 'Jerry', age: 100 } // 修改对象中的多个属性 this.setData({ userInfo }) -
使用解构赋值修改对象属性
在修改对象类型的数据时，可以使用解构赋值来修改对象属性
// 将 userInfo 从 data 中进行解构 const { userInfo } = this.data // 产生一份新数据 const newUserInfo = { ...userInfo, name: 'Jerry', age: 100 } // 修改对象中的多个属性 this.setData({ userInfo: newUserInfo }) -
使用 Object.assign 方法合并对象
在修改对象类型的数据时，可以使用 Object.assign 方法将多个对象合并为一个对象
// 使用 Object.assign 方法将多个对象合并为一个对象 const userInfo = Object.assign( this.data.userInfo, { name: 'Jerry' }, { age: 100 } ) // 修改对象中的多个属性 this.setData({ userInfo }) -
删除对象中的属性
在删除对象中的属性时，不能使用
delete操作符，因为小程序的数据绑定机制不支持监听 delete 操作// 使用展开运算符拷贝一份数据，产生一个新对象 const newUser = { ...this.data.userInfo } // 使用 delete 删除新对象中的属性 delete newUser.age this.setData({ // 将新的对象进行赋值 userInfo: newUser })
📌 注意事项：
小程序的数据绑定机制只能监听到 setData 方法中修改的数据，无法监听到直接删除属性的操作，所以在删除对象属性时，需要先将对象复制一份再进行操作，然后再调用 setData 方法更新数据。
4. setData-修改数组类型数据
数组类型数据也是经常会使用的数据格式之一，下面是修改数组类型数据的方法：
-
定义一个数组
Page({ // 定义页面中使用的数据 data: { animalList: ['Tom', 'Jerry', 'Spyke'] } // coding... } -
使用数组的 concat 方法合并数组
在修改数组类型的数据时，可以使用数组的 concat 方法来合并数组
// 使用 concat 方法来合并数组 const newList = this.data.animalList.concat('Tyke') // 使用 setData 进行赋值 this.setData({ animalList: newList }) -
使用数组的 push 方法新增属性
在修改数组类型的数据时，可以使用数组的 push 方法来添加元素
// 使用数组的 push 方法来添加元素 this.data.animalList.push('Tyke') // 使用 setData 进行赋值 this.setData({ animalList: this.data.animalList }) -
使用 ES6 的展开运算符
在数组类型的数据时，可以使用 ES6 的展开运算符先复制数组，然后进行合并
// 使用 ES6 的展开运算符先复制数组，然后进行合并 const newList = [...this.data.animalList, 'Tyke'] // 使用 setData 进行赋值 this.setData({ animalList: newList }) -
修改数组中某个元素的值：
利用索引的方式进行修改，但必须使用 wx:for 来进行渲染数组，否则会出现错误
this.setData({ 'animalList[2]': 'Tyke' }) -
使用数组的 filter 方法删除元素
在修改数组类型的数据时，可以使用数组的 filter 方法来删除元素
// 使用数组的 filter 方法来删除元素 const newList = this.data.animalList.filter(item => item !== 'Tom') // 使用 setData 进行赋值 this.setData({ animalList: newList })
5. 数据绑定-简易双向绑定
在 WXML 中，普通属性的绑定是单向的，例如：
<input value="{{ num }}" />
如果使用 this.setData 来更新 num ，num 和输入框的中显示的值都会被更新为值。但如果用户修改了输入框里的值，却不会同时改变 data 中的 num 。
如果需要在用户输入的同时也将 data 中的数据修改 ，需要借助简易双向绑定机制。此时可以在对应项目之前加入 model: 前缀即可，例如：
<input model:value="{{ value }}" />
如果使用 this.setData 来更新 num ，num 和输入框的中显示的值都会被更新为值。
如果输入框的值被改变了， data 的数据也会随着改变。
同时， WXML 中所有绑定了数据的位置也会被一同更新
📌 注意事项：
简易双向绑定的属性值如下限制：
只能是一个单一字段的绑定，例如：错误用法：
尚不能写 data 路径，也就是不支持数组和对象，例如：错误用法：
落地代码：
<!-- 单向绑定：数据能够影响页面，但是页面更新不会影响到数据 -->
<!-- <input type="text" value="{{ value }}" /> -->
<!-- 双向绑定：数据能够影响页面，页面更新也能够影响数据 -->
<!-- 如果想实现简易双向绑定，需要再对应的属性之前添加 model: -->
<!-- <input type="text" model:value="{{ value }}" /> -->
<!-- 如果需要获取复选框的选中效果，需要给 checked 添加 model: -->
<checkbox model:checked="{{ isChecked }}" /> 是否同意该协议
<!-- 注意事项1：属性值只能是一个单一字段的绑定 -->
<!-- <input type="text" model:value="值为 {{ value }}" /> -->
<!-- 注意事项2：属性值不能写数据路径，也就是不支持对象和数组 -->
<!-- <input type="text" model:value="{{ obj.value }}" /> -->
6. 列表渲染-基本使用
基本使用
列表渲染：就是指通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上
只需要在组件上使用 wx:for 属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件
默认数组当前项的变量名默认为 item
默认数组的当前项的下标变量名默认为 index
在使用 wx:for 对数组进行遍历的时候，建议加上 wx:key 属性，如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，即以后数据不会改变，或者不必关注其顺序，可以选择忽略。
wx:key 的值以两种形式提供：
- 字符串：代表需要遍历的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变
- 保留关键字
*this代表在 for 循环中的 item 本身，当 item 本身是一个唯一的字符串或者数字时可以使用
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且 提高列表渲染时的效率 。
📌 注意事项：
在使用
wx:for对数组进行遍历的时候，建议加上wx:key属性，否则控制台会报警告
落地代码：
<!-- 如果需要进行列表渲染，需要使用 wx:for 属性 -->
<!-- 属性值需要使用双大括号进行包裹 -->
<!-- 每一项的变量名默认是 item -->
<!-- 每一项下标（索引）的变量名默认是 index -->
<!-- 如果渲染的是数组，item：数组的每一项，index：下标 -->
<!-- <view wx:for="{{ numList }}">{{ item }} - {{ index }}</view> -->
<!-- 如果渲染的是对象，item：对象属性的值，index：对象属性 -->
<!-- <view wx:for="{{ obj }}">{{ item }} - {{ index }}</view> -->
<!-- ------------------------ 关于 Key --------------------------------- -->
<!-- wx:key 提升性能 -->
<!-- wx:key 的属性值不需要使用双大括号进行包裹，直接写遍历的数组 中 item 的某个属性 -->
<!-- wx:key 属性值有两种添加形式 -->
<!-- 字符串，需要是遍历的数组 中 item 的某个属性，要求该属性是列表中唯一的字符串或者数字，不能进行动态改变 -->
<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>
<view wx:for="{{ fruitList }}" wx:key="index">{{ item.name }}</view>
<!-- 保留关键字 *this，*this 代表的是 item 本身，item 本身是唯一的字符串或者数字 -->
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
// profile.js
Page({
data: {
numList: [1, 2, 3],
fruitList: [
{ id: 1, name: '🍎', price: 66 },
{ id: 2, name: '🍋', price: 77 },
{ id: 3, name: '🍅', price: 88 }
],
obj: {
name: 'tom',
age: 10
}
}
})
7. 列表渲染-使用进阶
修改默认下标和变量名：
如果需要对默认的下标和变量名进行修改，可以使用 wx:for-item 和 wx:for-index
-
使用
wx:for-item可以指定数组当前元素的变量名 -
使用
wx:for-index可以指定数组当前下标的变量名
<view wx:for="{{ animal }}" wx:for-item="itemName" wx:for-index="i">
{{ itemName.name }} - {{ itemName.avatar }} - {{ i }}
</view>
渲染多节点结构块：
如果需要渲染一个包含多节点的结构块，可以使用一个 <block/> 标签将多个组件包装起来
<block wx:for="{{ animal }}">
<view>
<span>{{ item.name }}</span>
<span>{{ item.avatar }}</span>
</view>
</block>
注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
8. 条件渲染
知识点：
条件渲染主要用来控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式：
- 使用
wx:if、wx:elif、wx:else属性组 - 使用
hidden属性
<view wx:if="{{condition}}"> True </view>
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view
<view hidden="{{condition}}"> True </view>
wx:if 和 hidden 二者的区别：
wx:if：当条件为true时将内容渲染出来，否则元素不会进行渲染，通过移除/新增节点的方式来实现hidden：当条件为true时会将内容隐藏，否则元素会显示内容，通过display样式属性来实现的
落地代码：
<!-- 使用 wx:if、wx:elif、wx:else 属性组控制元素的隐藏和控制 -->
<view wx:if="{{ num === 1 }}">num 等于 {{ num }}</view>
<view wx:elif="{{ num === 2 }}">num 等于 {{ num }}</view>
<view wx:else>大于 2</view>
<view hidden="{{ num !== 1 && num !== 2 && num !== 3 && num < 3}}">
{{ num < 3 ? 'num 等于' + num : '大于 2' }}
</view>
<button type="primary" bindtap="updateNum">修改数据</button>
Page({
// 页面的初始数据
data: {
num: 1
},
// 更新数据
updateNum() {
this.setData({
num: this.data.num + 1
})
}
// coding...
}
以上资料均来自于网络，希望对大家有所帮助！！！
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
