微信小程序 WXML
WXML
WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
用以下一些简单的例子来看看WXML具有什么能力：、
数据绑定
<!--wxml-->
<view>{{message}}</view>
//page.js
page({
data:{
message:'Hello MINA!'
}
})
列表渲染
<view wx:for-items="{{array}}"></view>
//page.js
Page({
data: {
array: [1,2,3,4,5]
}
})
条件渲染
<view wx:if = "{{view=='WEBVIEW'}}">WEBVIEW </view>
<view wx:elif=“{{view == 'app'}}”>app</view>
<view wx:else = "{{mina}}">mina</view>
//page.js
page({
data:{
view:'mina'
}
})
模板
<template name =" staffName">
<view>
Firstname:{{firstname:'xiaoming'}},Lastname:{{lastname:'xiaohong'}}
</view>
</template>
直接引用：<template is="staffName" data = "{{...staffA}}"></template>
//page.js
page({
data:{
staffA:{firstname:'xiaowei',lastname:'xiaowang'},
staffB:{firstname:'xiaolu',lastname:'honhhuang'},
staffC:{firsrtname:'xiaohuang',lastname:'xiaoping'}
}
})
WXML 引用
import 可以在当前文件中使用目标文件定义的 template
在 item.wxml 中定义了一个 item 的 template
<!--item.wxml-->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用 item.wxml，就可以使用 item 的模板
<import src="item.wxml">
<template is="item" data="{{text："aa2"}}"><template>
