WXML,WeiXin Markup Language是框架设计的一套标签语言,结合基础组件,事件系统,可以构建出页面的结构.
首先简单介绍两个基本的标签<text>,<view>,对应HTML就是<span>,<div>
编辑demo01/demo01.wxml代码如下
<!--pages/demo01/demo01.wxml-->
<text>pages/demo01/demo01.wxml</text>
<!--
text 相当于 span, 行内元素,不会换行
view 相当于 div, 块级元素,会换行
-->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>
显示效果如下:
数据绑定
普通写法
编辑demo01/demo01.wxml代码如下
<view> {{ message }} </view>
编辑demo01/demo01.js代码如下
Page({
data:{
message:"Hello World!"
}
})
显示效果如下
总结如下:
(1)在page.wxml中使用{{ 变量名 }}来进行变量的引用.
(2)在page.js中的data属性中进行变量值的定义.
常见的JavaScript变量类型都是支持的,下面进行一个演示
编辑demo01/demo01.js代码如下
Page({
/**
* 页面的初始数据
*/
data: {
message: "Hello World!",// 字符串类型
num: 1000, // 数字类型
ischecked: false, // 布尔类型
person:{ // 对象类型
age:74,
height:145,
weight:200,
name:"张三"
}
},
...
})
编辑demo01/demo01.wxml代码如下
<view>{{message}}</view>
<view>{{num}}</view>
<view>{{ischecked}}</view>
<view>{{person}}</view>
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
显示效果如下
组件属性
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
bool类型
不要直接写checked="false",其计算结果是一个字符串
<checkbox checked="{{false}}">篮球</checkbox>
注意:在属性中使用变量,双引号和大括号不能分开,要紧挨着
正确:
<checkbox checked="{{false}}">篮球</checkbox>
错误:
<checkbox checked=" {{false}}">篮球</checkbox>
完整的demo01.wxml代码如下
<!-- 数据绑定 -->
<view>{{message}}</view>
<view>{{num}}</view>
<view>{{ischecked}}</view>
<view>{{person}}</view>
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<view id="item-{{id}}"></view>
<checkbox checked="{{ischecked}}">帥哥</checkbox>
完整的demo01.js代码如下
Page({
/**
* 页面的初始数据
*/
data: {
message: "Hello World!",// 字符串类型
num: 1000, // 数字类型
ischecked: true, // 布尔类型
person:{ // 对象类型
age:74,
height:145,
weight:200,
name:"张三"
},
id:0
},
})
显示效果如下
运算
小程序中常见的运算有
(1) 三元运算
(2) 算术运算
(3) 逻辑判断
(4) 字符串相加
三元运算
编辑demo01/demo01.wxml代码如下
<view hidden="{{flag?true:false}}">Hidden</view>
<view>{{gender?"男":"女"}}</view>
编辑demo01/demo01.js代码如下
Page({
/**
* 页面的初始数据
*/
data: {
...
gender:false,
flag:true
},
...
)}
显示效果如下
算数运算
编辑demo01/demo01.wxml代码如下
<view>{{a+b}} + {{c}} + d</view>
编辑demo01/demo01.js代码如下
Page({
/**
* 页面的初始数据
*/
data: {
...
a:1,
b:2,
c:3
},
...
)}
显示效果如下:
逻辑判断
编辑demo01/demo01.wxml代码如下
<view wx:if="{{length > 5}}"></view>
字符串运算
编辑demo01/demo01.wxml代码如下
<view>{{"hello" + person.name}}</view>
显示效果如下:
列表渲染
wx:for
项的变量名默认为item,wx:for-item可以指定数组当前元素的变量名
下标变量名默认为index,wx:for-index可以指定数组当前下标的变量
wx:key用来提高数组的渲染性能.
关于wx:key绑定的值,有如下选择
(1) string类型,表示循环项中的唯一属性,一般使用id
list:[
{id:0,name:"张三"},
{id:1,name:"李四"},
]
wx:key="id"
(2) 保留字*this,它的意思是item本身,*this代表必须是唯一的字符串和数组.(就是普通的数组或者字符串数组)
[1,2,3,4]
["1","2","3","4"]
wx:key="*this"
如果没有指定wx:key会在控制台有警告信息出现
编辑demo01/demo01.js的如下
Page({
data: {
person:{ // 对象类型
age:74,
height:145,
weight:200,
name:"张三"
},
list:[
{
id:0,
name:"张三"
},
{
id:1,
name:"李四"
},
{
id:2,
name:"王五"
}
]
},
...
})
编辑demo01/demo01.wxml代码如下
<!-- wx:for -->
<!-- 1. 遍历数组 -->
<view wx:for="{{list}}" wx:key="id">
<view>index:{{index}} item:{{item.name}}</view>
</view>
<view >==========</view>
<!-- 2. 遍历对象 -->
<view wx:for="{{person}}">
<view>index:{{index}} item:{{item}}</view>
</view>
显示效果如下
block
渲染一个包含多节点的结构块block,最终不会变成真正的dom元素block就类似一个占位符,
<block wx:for="{{[1,2,3]}}" wx:key="*this">
{{item}}
<block>
条件渲染
wx:if
在框架中,使用wx:if="{{条件}}"来判断是否需要渲染该代码块.
<view wx:if="{{false}}">1</view>
<view wx:elif="{{false}}">2</view>
<view wx:else>3</view>
hidden
hidden="{{条件}}",这是通过样式来进行隐藏的.
wx:if 和 hidden 的差别?
wx:if如果为false,那么是直接就是剔除该标签,不会进行渲染.hidden只是通过修改样式来实现隐藏标签的目的.
编辑demo01/demo01.wxml代码如下
<!-- 条件渲染 -->
<view wx:if="{{false}}">1</view>
<view wx:elif="{{false}}">2</view>
<view wx:else>3</view>
<view hidden="{{false}}">hidden</view>
显示效果如下