uni-app 开发微信小程序

uni-app 是一个跨平台开发框架，能够将一份代码同时编译成各个平台的应用，包括微信小程序等。下面详细介绍 uni-app 在开发微信小程序时的工作原理。

## uni-app 的架构

uni-app 框架基于 Vue.js 开发，它为开发团队提供了一站式的解决方案，包括了前端框架、开发工具和发布平台。uni-app 把小程序原生 API 封装成一套统一的 API，在开发时可以根据条件选择调用底层 API 还是微信小程序 API。

下面是 uni-app 的架构图：


uni-app 的架构可分为三层：

- 面向开发者的框架层：提供了丰富的组件和 API，以及开发工具集成成的开发环境；

- 面向平台的渲染层：uni-app 框架会将运行在特定平台上需要执行的代码编译成对应平台所能执行的代码，同时以统一的方式提供对应平台的原生能力；

- 原生平台 SDK 层：用于让 uni-app 能够在各个不同的平台上编译运行。

## 微信小程序开发的原理

从 uni-app 框架到微信小程序，涉及了两个平台：

1. uni-app 平台

2. 微信小程序平台

### uni-app 平台

uni-app 平台的架构图如下所示：


uni-app 开发者会使用到 IDE 开发工具或命令行工具进行编写程序，并在平台上运行同步开发的调试工具。运行时通过 Runtime 层将 vue 模板编译成对应平台的代码。

### 微信小程序平台

微信小程序的架构图如下所示：


Micro-parser 负责解析 JS、WXML 和 WXSS 文件，解析后得到相应的 AST。在运行时，会通过小程序的 API 将解析后的 AST 渲染到屏幕上，用户和开发者就可以看到渲染后的效果。

### 微信小程序与 uni-app 的对接

接下来，从 uni-app 平台出发，介绍微信小程序与 uni-app 是如何对接的。

#### 小程序的环境兼容处理

微信小程序官方原始的接口与 uni-app 平台赋予了很多基于 Web 标准的 API，同时貌似也对原生的接口做了一些封装。uni-app 的开发者在使用习惯和性能方面也与原始的小程序开发者的体验不相同。因此 uni-app 把原小程序接口进行了再封装，并提供了对应的框架接口。

比如 uni-app 将触摸事件封装成了 vue 的 DOM 事件，又将小程序的 wxss 编译成了 CSS 标准的语法，封装出了 Page、Component 和 App 等不同快照（snapshot）形式的组件。

#### 编译

uni-app 中的对应同名组件是在渲染树与WXML 渲染树匹配时使用的。在当前这个组件加载时，会在开发环境先去加载它们在 WXML 上的子树，之后认真看上去匹配它在注册中定义的 Component 部分。这里是 Vue.js 组件渲染分离的体现。

下面是 uni-app 编译流程：

- 通过 babel 将源码转化为标准的 ES5 代码

- 将 HTML、CSS、JS 同时编译成小程序可直接使用的代码

- 使用微信 IDE 相应的工具进行编译打包

#### 运行

运行时 uni-app 用代码根据小程序 Page、Component 和 App 注册项自动创建生成内部的 Vue 实例，完整地将当前页面、组件等进行封装。

总之，uni-app 知道如何编译一个小程序，将组件编译为如何从小程序实例上的属性或方法等相关的访问。这是一个函数，会将小程序的属性作为组件的属性传入 vue 实例，然后渲染组件中的子结构。

## 总结

综上所述，uni-app 使用一些框架技巧以及原生的小程序 API，在编写 App 和小程序时，采用了同一份代码，运行时自动适配平台。因此，uni-app 将小程序变得更加简单方便，这种技术架构对于使用 uni-app 开发微信小程序的开发者来说，意味着他们不再需要为每个平台编写单独的代码，节省了很多时间和精力。