高端网站设计桂林网站建
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。