微信——WXML

来源：互联网发布：u盘数据丢失怎么恢复编辑：程序博客网时间：2024/06/15 21:55

WXML

WXML(WeiXin Markup Language)是MINA设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
用以下一些简单的例子来看看WXML具有什么能力：

数据绑定

?
1
2
3
4
5
6
7
8
<!--wxml-->
<text> {{message}} </view>
// page.js
Page({
 data: {
 message:'Hello MINA!'
 }
})

列表渲染

?
1
2
3
4
5
6
7
8
<!--wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>
// page.js
Page({
 data: {
 array: [1, 2, 3, 4, 5]
 }
})

条件渲染

?
1
2
3
4
5
6
7
8
9
10
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA IS NOT APP </view>
// page.js
Page({
 data: {
 view:'MINA'
 }
})

模板

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--wxml-->
<template name="staffName">
 <view>
 FirstName: {{firstName}}, LastName: {{lastName}}
 </view>
</template>
 
<template is="staffName"data="...staffA"></template>
<template is="staffName"data="...staffB"></template>
<template is="staffName"data="...staffC"></template>
// page.js
Page({
 data: {
 staffA: {firstName: 'Hulk', lastName: 'Hu'},
 staffB: {firstName: 'Shang', lastName: 'You'},
 staffC: {firstName: 'Gideon', lastName: 'Lin'}
 }
})

事件

?
1
2
3
4
5
6
7
8
9
10
11
<view bindtap="add"> {{count}} </view>
Page({
 data: {
 count: 1
 },
 add:function(e) {
 this.setData({
  data:this.data.count + 1
 })
 }
})

0 0