架构篇-WXML标签语言设计思路|小程序原理专题

# WXML语法结构

打开开发者工具后，首先新建一个项目，选择左侧菜单中小程序按钮，点击右侧加号进行创建。

创建的时候需要填写一些信息，比如路径、APPID等。待创建完成后，你会看到和下方一样的官方界面。我们通过官方给的这个基础项目来慢慢的深入了解。

我们可以直接在微信开发者工具中查看到渲染出来的页面、项目目录结构、控制台等。此处的控制台操作与平常开发中使用的浏览器的控制台十分相似。

在项目目录结构中可以看到/pages中分为两个页面结构。index、logs。index则为上面看到的入口页面，点击头像会跳转至logs操作日志页面。

这里顺便提一下其中的app.js文件，打开根目录的小程序实例注册文件app.js。文件中App实例方法有绑定生命周期回调函数、错误监听和页面不存在监听函数、全局参数等等。结构如下：

可以看到除了生命周期之类的回调函数，调用了很多wx.xx的方法，开发过公众号h5点同学应该很熟悉，微信SDK API。微信集成了很多方法以SDK的方式开放给开发者来使用，正是以wx. 的方式调用。小程序中也是一样的，但是api多了很多，放这里一个传送门。

在大概了解了基础目录结构之后，我们具体看一下WXML文件。

网页编程一般采用的是HTML + CSS + JS的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml目录后，你会看到如下的内容:

一眼看上去之后，是不是有种感觉，文件结构与HTML类似，与VUE更像，一些语法类似wx:if 这样的写法也有很多，都是这样写在模版文件中的。

但是还有很多不一样的地方，可以很明显的看到的是<View />标签。我们没有在别的文件中见过这样的标签，再看看其他微信小程序自带的一些组件写法<block />、<text />等等。那么这些是什么呢。

这是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。 WXML 文件后缀名是 .wxml ，简单的 WXML语句在语法上同 HTML 非常相似。WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。属性也是大小写敏感的，也就是说class和 Class 在 WXML 中是不同的属性。

WXML肯定是有自己独特的“个性”的，先看一下wxml具体的使用方式，通过具体的使用方式来对比一下和Web中html的区别。

# 行内属性

所有的标签都有一些相同的行内属性

id
style
class
data-*
hidden
bind*/catch*

# 数据绑定

在 Web 开发中，开发者使用 JavaScript 通过 Dom 接口来完成界面的实时更新。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的javaScript文件中的data对象属性。

# 逻辑语法

通过{ 变量名 } 语法可以使得 WXML 拥有动态渲染的能力，除此外还可以在 "{}" 内进行简单的逻辑运算。

三元运算
算数运算
字符串的拼接
放置常量（数字、字符串或者是数组）

# 条件逻辑

WXML 中，使用if-else来判断是否需要渲染该代码块：

# 列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为 item。

# 模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在<template />内定义代码片段。

# 引用

WXML 提供两种文件引用方式import和include。

import可以在该文件中使用目标文件定义的 <template />，需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。 include 可以将目标文件中除了<template />、<wxs />外的整个代码引入，相当于是拷贝到include位置

看到这里是不是有点疑惑，有点三不像的感觉。像html又不像html，像vue又不像vue。哈哈，不过别急。看一下这个wxml模板语法。

我们知道如何实现自定义标签，通过WebComponents。但这个也不是WebComponents啊，是的，WebComponents的规范中，自定义元素的名称中必须包含连接词。况且里面有数据绑定逻辑。这里就是我们后面章节要讲到的Exparser框架。

Exparser框架会将上述结构转换为下面这个样子。

这样看的话是不是和WebComponents一样了。但是小程序并没有直接使用WebComponents，而是自行搭建了组件框架Exparser。

Exparser是微信小程序的组件组织框架，内置在小程序基础库中，为小程序的各种组件提供基础的支持。小程序内的所有组件，包括内置组件和自定义组件，都由Exparser组织管理。

Exparser的组件模型与WebComponents标准中的Shadow DOM高度相似。Exparser会维护整个页面的节点树相关信息，包括节点的属性、事件绑定等，相当于一个简化版的Shadow DOM实现。组件框架后面会有单独章节讲解，这里就不过多赘述。

到这里我们知道了WXML模版语法经过转换之后，会已自定义元素的形式来渲染。这里会有个疑问🤔️，为什么不用HTML语法和WebComponents来实现渲染，而是选择自定义？

管控与安全：web技术可以通过脚本获取修改页面敏感内容或者随意跳转其它页面
能力有限：会限制小程序的表现形式
标签众多：增加理解成本

其实从第一条的角度出发，理由就足够充分，现在信息安全就是每家互联网公司不得触碰的红线。前端安全问题需要特别重视，何况用户群体巨大的小程序呢。

所以，小程序不能直接使用html标签渲染页面，其提供了10多个内置组件来收敛web标签，并且提供一个JavaScript沙箱环境来避免js访问任何浏览器api。沙箱模块后面也有章节独立讲解。

我们回到WXML模板语法，从上方的WXML具体使用规则上来看，在模版语法设计中有没有什么讲究呢？

从模版语法上来看的话，只是很像vue而已，相似的地方为一些模版语法上的行内语法逻辑。但是小程序如果自己嵌入vue的话肯定是不靠谱的，因为小程序本身追求轻量，渲染性能高。在这种前提下，自我封装一套模板语法才是非常正确的选择，像一些行内逻辑类似 if. For 等模版逻辑之类的，现在前端开发看的多了，也就见怪不怪了。

就我个人来看，还记得刚接触vue的时候，vue那种的模板语法真的是既熟悉又陌生，让我想起了php。那个时候jquery还很锋利（这个梗能懂的都是老前端了）的年代，前端大多数还是切图仔，php语法在前端页面还原之后的HTML模板中进行语法嵌套。if、for 之类的写法简直像的不能再像了。当然当然，我现在及之前所说的所有“像”并不是一种贬义词，恰恰相反。比如iphone手机侧面静音按钮一万年没变过一样。就是为了保持用户操作的习惯性，上手难度大大降低、给予用户一种亲切感，我在这里就可以像高中时期做语文卷子时候一样，做一些作者的阅读理解：也许可能vue作者和小程序团队借鉴了前端开发的“老习惯”。写着写着手感就来了，止都止不住。

配合wxml模板结构的还有wxss文件，就像html + css，顺便看一下wxss文件结构。

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。先看一下代码中的wxss文件结构及语法。