微信小程序-4-模板语言

WXML是框架设计的一套标签语言,结合基础组件,事件系统,可以构建出页面的结构

首先我们要先打开一个.wxml文件

先介绍几个标签:

• text相当于以前web中的span标签,属于行内元素,不会换行

  

• view相当于以前web中的div标签属于块级元素,会换行

  

• checkbox复选框

  

打开该文件夹下的js文件,可以看到里面预设了一些内容,现在将其全部删掉

删掉之后,在里面重新写入以下内容

Page({
	data: {}
})

这样做的目的是能够清楚地学习到每个部分所能实现的功能,而data就是关于数据的.

数据绑定

基本写法

先在data中放一个字符串hello world!

Page({
	data: {
		msg:"hello world"
	}
})

之后将这个数据展示在页面上

<text>{{msg}}</text>

除了字符串,还支持以下数据类型:

自定义属性

将数据作为属性的值赋予标签

<view data-num="{{num}}">自定义属性</view>

在页面上没有看到,但是却将100这个值赋给了data-num

使用bool类型充当属性

当我把这个属性定义为true的时候,可以看到这个复选框被选择了,而当这里是false的时候就是未选中的状态如果在"和{之间,多打了一个空格,判断就会失败!

数据运算

数字的加减乘除

<view>{{2+1}}</view>
<view>{{2-1}}</view>
<view>{{2*1}}</view>
<view>{{2/1}}</view>

字符串拼接

<view>{{'a'+'1'}}</view>

三元表达式

<view>{{10%2===0?'偶数':'奇数'}}</view>
<view>{{11%2===0?'偶数':'奇数'}}</view>

这句话的意思是:10除以2,余数是0吗?如果是就打印偶数,否则就打印奇数

列表渲染

列表渲染首先要先创建一个列表

list: [{
				name: "赵",
				age: 10
			},
			{
				name: "钱",
				age: 15
			},
			{
				name: "孙",
				age: 20
			},
			{
				name: "李",
				age: 25
			}
		]

wx:for

不光可以循环列表 ,还可以循环对象,其中:

• wx:for-item="循环项的名称"
• wx:for-index="循环项的索引"

<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
	<view>索引:{{index}}</view>
	<view>姓名:{{item.name}}</view>
	<view>年龄:{{item.age}}</view>
</view>

wx:key

能够加快列表渲染的性能,这就要求wx:key绑定的是唯一的值,如:

• 绑定一个普通的字符串的时候,这个字符串名称肯定是循环数组中的对象的唯一属性
• wx:key="*this" 代表着循环的知识一个普通的数组[1,2,3,4]这种的

事实上,如果不写wx:for-item="item" wx:for-index="index"小程序也会把循环项的名称和索引的名称用相应的item和index来代替,也就意味着,如果只有一层循环,这行代码可以省略

对象渲染

<view wx:for="{{person}}">
	{{index}}:{{item}}
</view>

条件渲染

wx:if

wx:if="{{true/false}}"为true就显示,否则就移除该标签

<view>
	<view wx:if="{{true}}">显示</view>
	<view wx:if="{{false}}">隐藏</view>
</view>

当然也有类似于其它语言的if-else

<view>
	<view wx:if="{{false}}">1</view>
	<view wx:elif="{{false}}">2</view>
	<view wx:else>3</view>
</view>

hidden

加入标签中,就可以让其直接隐藏

<view>
	<view hidden>显示</view>
	
	<view hidden="{{true}}">隐藏</view>
	<view hidden="{{false}}">隐藏</view>
</view>

怎么用?

• 当标签不是频繁的切换显示的时候,优先使用wx:if
• 当标签频繁的切换显示的时候优先使用hidden