本文为菜鸟窝编辑吴佳林的连载。

无论是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