【微信小程序】开发实战 之 「视图层」WXML & WXSS 全解析

在《微信小程序开发实战 之 「配置项」与「逻辑层」》中我们详细阐述了小程序开发的程序和页面各配置项与逻辑层的基础知识。下面我们继续解析小程序开发框架中的「视图层」部分。学习完这两篇文章的基础知识，动手开发一个简单的小程序应用已经不成问题了。

视图层

框架中视图层以给定的样式展现数据并反馈事件给逻辑层。

视图层由WXML（WeiXin Markup language）与WXSS（WeiXin Style Sheet）编写，由组件来进行展示，组件是视图层的基本组成单元。

微信小程序提供了视图窗口、基础内容、表单组件、导航、媒体、地图、画布、开放能力等十余类数十个组件。关于组件的种类和用法，我们可以参考小程序开发者文档中的组件部分。后续我们一起在一些开发实例中对组件用法进行解析。欢迎关注。

于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合。

• .wxml文件用于组织页面的结构；
• .wxss文件用于编写页面的样式；

---

WXML详解

WXML是MINA框架设计的一套类似于HTML的标签语言，与基础组件、事件系统一起构建页面的结构，保存在.wxml文件中。

WXML目前具有数据绑定、列表渲染、条件渲染、模板、引用及事件绑定的能力。下面我们通过一些简单的例子具体学习感受一下WXML的这些能力。

数据绑定

在.wxml文件中动态显示的数据均来自对应页面的.js文件中的Page方法的data对象。数据绑定使用Mustache（中文翻译作“胡子”）语法（即“双大括号{ {}}”）将变量包括起来。

数据绑定有多种用法，可以简单的用于表现数据，也可以用在组件属性、控制属性中，还可以进行运算、组合构成新的数据。

• 表现数据

直接用来呈现动态数据：

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

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

• 组件属性

用在标签自身的属性值中，需要加双引号：

<!--wxml-->
<view id="res-{
    {id}}"> {
   {content}} </view>

//page.js
Page({
    data:{
        content: 'Hello MINA !',
        id: 0
    }
})

• 控制属性

用于控制语句的条件判断中，也需要加双引号：

<!--wxml-->
<view wx:if="{
    {condition}}">  </view>

//page.js
Page({
    data:{
        condition: false 
    }
})

• 简单运算

可以在{ {}}内进行简单的运算，包括三元运算、算数运算、逻辑判断、数据路径运算等。

三元运算：

<!--wxml-->
<view hidden="{
    {flag ? true : false}}">Hidden</view>

算术运算：

<!--wxml-->
<view>{
    {a+b}}+{
    {c}}+d</view>
//page.js
Page({
    data:{
        a:1,
        b:2,
        c:3
    }
})
//结果：view中的内容为3+3+d

逻辑判断：

<view wx:if="{
    {count > 1}}"></view>

字符串运算：

<!--wxml-->
<view>{
    {"Hello" + name}}</view>
//page.js
Page({
    data:{
        name: "World !"
    }
})

路径运算：

<!--wxml-->
<view>{
    {obj.key}}  {
    {array[0]}}</view>
//page.js
Page({
    data:{
        obj:{
            key: 'Hello'
        },
        array:['World']
    }
})

• 组合绑定

在Mustache内直接进行组合，构成新的对象或数组。

数组：

<!--wxml-->
<view wx:for="{
    {[0,1,2,3,four]}}">{
   {item}}</view>
//page.js
Page({
    data:{
        four: 4
    }
})

//最终组合成数组[0,1,2,3,4]

对象：

<!--wxml-->
<template is="objCombine" data="{
   {for:a , bar:b}}"></template>
//page.js
Page({
    data:{
        a: 1,
        b: 2
    }
})

//最终组合成的对象是{for:1 , bar:2}

也可以用「扩展运算符」“...”来展开对象：

<!--wxml-->
<template is="objCombine" data="{
    {...obj1 , ...obj2 , e: 5}}"></template>
//page.js
Page({
    data:{
        obj1: {
            a: 1,
            b: 2
        },
        obj2: {
            c: 3