微信小程序的代码架构组织（4）- 视图层

视图层由 WXML 与 WXSS 编写，由组件进行展示。

• WXML（Markup language）：描述页面的结构；
• WXSS（Style Sheet）：描述页面的样式；
• 组件（Component）：视图的基本组成单元。

此外，还有 WXS 辅助 WXML 构建页面的结构。

• WXS（Script）：小程序的一套脚本语言。

WXML

即框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
配合相应的.js文件，其主要能力有：

• 数据绑定

<!--wxml-->
<view> {{message}} </view>

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

• 列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

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

• 条件渲染

<!--wxml-->
<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'
  }
})

• 模板

<!--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'}
  }
})

具体的能力以及使用方式在以下章节查看：

数据绑定、列表渲染、条件渲染、模板、引用

WXSS

即一套样式语言，决定 WXML 编写的组件应该怎么显示。定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
当前WXSS支持的选择器包括：.class，#id，element，element, element，::after，::before。
与 CSS 相比，WXSS 扩展的特性有二：

1. 尺寸单位：rpx（responsive pixel）
   该单位可以根据屏幕宽度进行自适应，即不同屏幕分辨率的设备上1rpx可换算的像素值是不同的，但规定屏幕宽为750rpx。在iPhone6上，1rpx = 0.5px。建议开发可以用 iPhone6 作为视觉稿的标准。
2. 样式导入：@import
   可以导入外联样式表，使用相对路径表示，并用;结束语句。

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

此外，在组件上支持使用 style、class 属性来控制组件的内联样式。

• style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

• class 指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上 . ，样式类名之间用空格分隔。

<view class="normal_view" />

WXS

即小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

• WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行，所以不能调用小程序提供的API且 WXS 函数不能作为组件的事件回调。
• WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。所以 WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，。
• 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

完整了解 WXS 语法，请参考WXS 语法参考。