本文为菜鸟窝编辑吴佳林的连载。
无论是APP还是前端，页面的重要性都是不言而喻，微信小程序也是如此。下次本章内容就主要介绍一下微信小程序的页面，也叫视图层。微信小程序的视图层由 WXML 与 WXSS 编写，由组件来进行展示。本章主要讲WXML
视图层
WXML，全称是 WeiXin Markup language ，用于描述页面的结构，跟 HTML 作用是一样的，但是比 HTML 强大一点，WXML 具有模板特性。WXML 的能力主要有有数据绑定，条件渲染，列表渲染，模板，事件，引用。
数据绑定
WXML 中的动态数据均来自对应 Page 的 data (关于 Page 函数可以参考之前一篇文章 模块化与page函数)。WXML 对数据绑定主要用 {{}} 将变量包起来，作用范围有：内容，组件属性，控制属性，关键字，运算，组合，看起来好像蛮多的，其实都是一通则百通，只要了解一个就可以扩展其它了。
-
内容
在 js 文件的 page 函数的 data 对象里面定义相关属性，然后再 WXML 的内容里面使用
{{}}引用皆可到它的内容。<view> {{ name }} </view>Page({ data: { name: 'wujialin' } }) -
组件属性
在 WXML 里面如果组件的属性，比如id (组件的唯一标示) ,hidden (组件是否显示) ,class (组件的样式类)......需要使用到 data 里面的数据，使用
{{}}就可以直接使用。<view hidden="{{isShowName}}"> {{name}} </view>Page({ data: { name:'wujialin', isShowName:false } }) -
控制属性
不仅作用于组件属性，同样作用于控制属性，比如
wx:if,wx:elif（这个控制属性属于条件渲染里面，下面会讲到这个点。）<view wx:if="{{isShowName}}">{{name}}</view> <view wx:elif="{{isShowSex}}">{{sex}}</view> <view wx:else>没有用户信息</view>Page({ data: { name:'wujialin', sex:'男', isShowName:false, isShowSex:true } }) -
关键字
在 WXML 里面如果要使用关键字，比如 true，false，需要使用
{{}}将关键字进行包含使用hidden="{{true}}"不能在属性里面直接使用这个关键字hidden="true"否则只会被当作字符串。 -
运算
可以在
{{}}内进行简单的运算,支持的运算有三元运算，算数运算，逻辑判断，字符串运算，数据路径运算- 三元运算
<view hidden="{{isShowName?true:false}}">{{name}}</view>- 算数运算
<view> {{a + b}} + {{c}} + d </view>Page({ data: { a: 1, b: 2, c: 3 } })- 逻辑运算
<view wx:if=="{{age>18}}">成年了</view>Page({ data: { age:19 } })- 字符串运算
<view>{{"name" + sex}}</view>- 数据路径运算
<view>{{object.key}} {{array[0]}}</view>Page({ data: { object: { key: 'Hello ' }, array: ['MINA'] } }) 组合
也可以在{{}}内直接进行组合，构成新的对象或者数组。-
数组
可以在数组中直接引用 data 里面数据，只需要使用
{{}}将数组进行包含即可。<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>Page({ data: { zero: 0 } }) -
对象
在模板里面可以使用
{{}}来构建一个对象。在下面举个简单的例子，具体关于模板的使用会在之后的文章会详细阐述。
<template name="userInfo" >
<view>性别：{{sex}}</view>
<view>姓名：{{name}}</view>
</template>
<template is="userInfo" data="{{...item}}"></template>
条件渲染
条件渲染，也就是根据 if...elif...else 表达式的判断条件相关的组件是否需要渲染。你可以单独使用 wx:if="{{condition}}"，也可以配合 wx:elif 和 wx:else 进行使用。
<view wx:if="{{age > 25}}"> 中年人 </view>
<view wx:elif="{{age > 18}}"> 青少年 </view>
<view wx:else> 儿童 </view>
Page({
data: {
age: 19
}
})
当然这个条件渲染作用于 block 效果也是一样的,block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
140套Android优秀开源项目源码，领取地址：http://mp.weixin.qq.com/s/afPGHqfdiApALZqHsXbw-A
