视图层由 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 扩展的特性有二：
- 尺寸单位：
rpx（responsive pixel）
该单位可以根据屏幕宽度进行自适应，即不同屏幕分辨率的设备上1rpx可换算的像素值是不同的，但规定屏幕宽为750rpx。在iPhone6上，1rpx = 0.5px。建议开发可以用 iPhone6 作为视觉稿的标准。 - 样式导入：
@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 语法参考。
