微信小程序【WXML】

wxml

wei xin markup language 类似于html

文档

数据绑定

小程序中使用{{}} 来进行数据绑定到模板中，如:
wxml中的动态数据全部来自js中的data

简单绑定

//wxml
<view> {{text }}</view>

// index.js
Page({data: {text: 'hello world'},
})

属性绑定(id、class、checked)

<view id="item-{{id}}"> {{text}}</view>
<view wx:if="{{condition}}"> </view>
<checkbox checked="{{false}}"> </checkbox>

属性绑定需要在变量外添加{{}}

运算

<!--字符串运算-->
<view>{{"hello" + name}}</view>

Page({data:{name: 'MINA'}
})
<view hidden="{{flag ? true : false}}"> 三元运算 </view>

条件判断

• wx:if 判断是否渲染该代码块
• wx:elif 判断是否渲染该代码块
• wx:else 判断是否渲染该代码块

wx:if VS hidden

wx:if 类似于vue中的v-if，hidden 类似于vue中的v-show
在频繁切换的场景下 推荐使用hidden，如果在运行时改变可能不大时使用wx:if

模板

WXML 提供模板（template）,可以在模板定义代码片段，然后在不同的地方引用。

定义模板

<template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view>
</template>

使用模板

<template is="msgItem" data="{{...item}}"/>

可以使用is属性来动态决定渲染哪个模板

引入

使用import 可以引入其他wxml文件中的模板、也可以使用include(include 引入的模板只能是静态的)

 <import src="./item"></import>

 <template data="{{text: '测试'}}" is="item"></template>

import作用域

引入的模板不支持递归
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。