微信小程序入门三：视图层

微信小程序框架的视图层主要内容：WXML，WXSS

WXML，WXSS可以看成是HTML，CSS对应的结构，其写法也大致相同。

一、WXML

WXML是小程序框架实现的标签语言，有点像React的组件标签。其结合基础组件、事件系统，可以构建出页面的结构。
常用的几个标签如下：

1.1 数据绑定

    <view> {{message}} view>

    // page.js
    Page({
      data: {
        message: 'Hello World!'
      }
    })

如上：
在Page()内传入对象，并初始化数据data，设置了一具名叫message的key，对应value值hello World。
在对面的wxml页面中，使用view标签结合{{}}表达式的形式进行数据的渲染。

1.2 列表渲染 wx:for

    
    <view wx:for="{{array}}"> {{item}} view>

    // page.js
    Page({
      data: {
        array: [1, 2, 3, 4, 5]
      }
    })

数据的初始化定义仍然在data中进行，页面中使用wx:for进行数据遍历，拿到每项item即为列表元素。这里的wx:for指令跟Vue的v-for指令相似

1.3 条件渲染 wx: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'
      }
    })

如上：
通过wx: 前缀结合js中类似的条件分支语句实现条件判断

1.4 模板 template

微信提供了template标签用于定义一个页面的部分组件模板，从而实现代码复用。
通过name属性来设置template名字，在template内写wxml代码 从而实现模板的定义

    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} text>
        <text> Time: {{time}} text>
      view>
    template>

通过is属性来引用对应name的模板，数据的传入则使用data属性，数据写法类似于react的属性延展式写法

    <template is="msgItem" data="{{...item}}"/>

注意：属性都是要加“双引号”的，即使是表达式
数据如下：

    Page({
      data: {
        item: {
          index: 0,
          msg: 'this is a template',
          time: '2016-09-15'
        }
      }
    })