2.1 wxml语法

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
要完整了解 WXML 语法,请参考WXML 语法参考。
用以下一些简单的例子来看看 WXML 具有什么能力:
数据绑定
<view>
    {{message}}
</view>
/*
page.js
 */
Page({
    data:{
        message:'Hello MINA!'
    }
})
列表渲染
循环,wx:for是一个数组,item变量是一个临时变量,每次循环取得的值都将赋给item。这个变量通常也无法在js文件里找到。下面的例子页面将显示12345
<view wx:for="{{array}}">
    {{item}}
</view>
Page({
    data:{
        array:[1,2,3,4,5]
    }
})
条件渲染
按照条件显示,如果条件成立,那么渲染此控件。有三种 其中elif相当与else if:
<view wx:if="{{view == 'WEBVIEW'}}">
    WEBVIEW
</view>
<view wx:elif="{{view == 'APP'}}">
    APP
</view>
<view wx:else="{{view == 'MINA'}}">
    MINA
</view>
//page.js
Page({
    data:{
        view:'MINA'
    }
})
模板:自定义控件
<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({
    data:{
        staffA:{
            firstName:'Hulk',
            lastName:'Hu'
        },
        staffB:{
            firstName:'Shang',
            lastName:'You'
        },
        staffC:{
            firstName:'Gideon',
            lastName:'Lin'
        }
    }
})
具体的能力以及使用方式在以下章节查看:
数据绑定、列表渲染、条件渲染、模板、引用