微信小程序MINA框架之模板语法(一)

微信模板语法和vue有点相似,但是也有所不同,在vue中涉及到运算或者数据绑定,都是采用v-bind来实现,但是在微信中,不使用也是完全可以的,比较的灵活。之前如果有vue学习经验的,上手会很快。

数据绑定

数据绑定普通写法如下:

  • 首先需要在页面对应的json文件中定义初始化数据
1
2
3
4
5
6
7
8
9
10
11
Page({
data: {
name:"itcrud",
id:1,
isChecked:false,
isGirl:false,
a:1,
b:2,
c:3
}
})
  • wxml文件中写html代码,做数据绑定操作,使用双花括号,里面写上对应的变量名称即可
1
<view>{{num}}</view>
  • 如果是标签的属性赋值,可以采用下面的方式,第一种直接用变量,第二种也可以做字符串的拼接
1
2
<view id="{{id}}"></view>
<view id="item-{{id}}"></view>
  • 上面两种可以是数值,也可以是字符串,当然布尔类型也是同样支持
1
<checkbox checked={{isChecked}}></checkbox>
  • 上面都是普通的写法,直接获取值即可,其实其中还可以做相应的运算,如下:
1
2
3
4
5
6
7
8
9
<!-- 三元表达式 -->
<view>性别是:{{isGirl?"女":"男"}}</view>
<!-- 算数运算,结果是:33 -->
<view>{{a+b}}+c</view>
<!-- 逻辑判断,同样逻辑判断和算数运算也是可以想结合的 -->
<view>{{a>0}}</view>
<view>{{(a+b)>0 ? "大于0":"小于等于0"}}</view>
<!-- 上面都是数值运算,对于字符串的拼接也是同样的支持 -->
<view>{{{"hello "+name}}</view>

注意:在属性写法的时候花括号和双引号之间不能出现空格,否则会被认为是字符串,错误演示如下:

1
2
<!-- 在第一个花括号和双引号间有一个空格,这个时候,false就会被认为是字符串,不会最为布尔值生效 -->
<checkbox checked=" {{false}}"></checkbox>

列表渲染

这个很重要,使用很广,最常用的就是列表数据渲染。使用如下:

  • 定义列表数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Page({
data:{
list:[
{
id:1,
name:"张三",
age:24,
height:175
},{
id:2,
name:"李四",
age:26,
height:174
},{
id:3,
name:"王五",
age:30,
height:179
}
]
}
})
  • 页面使用列表渲染的代码
1
2
3
4
5
6
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
用户ID:{{item.id}}-
用户名:{{item.name}}-
用户年龄:{{item.age}}-
用户身高:{{item.height}}
</view>
  • 循环的结果如下:
1
2
3
用户ID:1-用户名:张三-用户年龄:24-用户身高:175
用户ID:2-用户名:李四-用户年龄:26-用户身高:174
用户ID:3-用户名:王五-用户年龄:30-用户身高:179

说明:

  1. wx:for-item的默认值就是item,这里可以省略wx:for-item="item"不写,同时wx:for-index="index"也可以不写,默认值是index,但是出现多层嵌套,需要做上标识,便于区分。
  2. 对于wx:key是可以不加的,框架推荐加上,可以提高性能。如果使用过vue的会知道,其中也是有一个:key,其目的都是相同的。
  3. 如果循环的list是一个数组,里面都是单值元素,非对象且唯一,如[1,2,3,4],元素不重复,则wx:key的值就使用*this,完整写法就是wx:key="*this",表示是当前元素

条件渲染

条件渲染有两种,一种是直接用if、elif、else的方式,一种是通过标签本身所带的hidden属性。

if、elif、else方式

1
2
3
4
<view wx:if="{{x>100}}">大于100</view>
<view wx:elif="{{x>50}}">大于50</view>
<view wx:elif="{{x>30}}">大于30</view>
<view wx:else>小于等于30</view>

如果x是大于100的,在页面上最终渲染的标签就一个,其他三个标签会被剔除。假设这里的x值是频繁的变化,那么就可能会导致标签的频繁被删除和添加。

hidden方式

1
2
3
<view hidden="{{x>100}}">大于100</view>
<view hidden="{{x>50}}">大于50</view>
<view hidden="{{x>30}}">大于30</view>

不管x的值为多少,页面最终渲染三个标签都会存在,只是其中两个被隐藏,如果x值频繁的变化,本身标签不会发生删除和添加,只是标签的属性发生了变化。

综合说明:如果x的值不频繁变化,使用if、elif、else更好,减少页面的大小,提高传输效率;反之,就选择hidden属性方式,减少性能的消耗

微信公众号


本文作者:IT-CRUD
原文地址:http://blog.itcrud.com/blogs/2020/08/weixin-mina-mould-grammer-01
版权归作者所有,转载请注明出处

支付宝 微信

如果文章对你有帮助,欢迎点击上方按钮打赏作者