浅析微信小程序的底层架构原理

一、小程序基础知识

　　小程序是基于WEB规范，采用HTML、CSS和JS等搭建的一套框架，微信官方给它们取的名字：WXML、WXSS，但本质上还是在整个WEB体系之下构建的。WXML说到底就是xml的一个子集。WXML采用微信自定义的少量标签WXSS，大家可以理解为就是自定义的CSS。实现逻辑部分的JS还是通用的ES规范，并且runtime还是Webview（IOS WKWEBVIEW、ANDROID X5）

1、小程序的组成结构

　　一个完整的小程序主要由以下几部分组成：

　　一个入口文件：app.js

　　一个全局样式：app.wxss

　　一个全局配置：app.json

　　页面：pages下，每个页面再按文件夹划分，每个页面4个文件

（1）视图层：wxml，wxss

（2）逻辑层：js，json（页面配置，不是必须）

　　注：pages里面还可以再根据模块划分子目录，孙子目录，只需要在app.json里注册时填写路径就行。

2、小程序项目打包：

　　编辑器它本身也是基于WEB技术体系实现的，nwjs+react，nwjs简单是说就是node+webkit，node提供给我们本地api能力，而webkit提供给我们web能力，两者结合就能让我们使用JS+HTML实现本地应用程序。既然有nodejs，那上面的打包选项里的功能就好实现了。

（1）ES6转ES5：引入babel-core的node包

（2）CSS补全：引入postcss和autoprefixer的node包（postcss和autoprefixer的原理看这里）

（3）代码压缩：引入uglifyjs的node包

　　打包后目录结构：

　　所有的小程序基本都最后都被打成上面的结构：

（1）WAService.js 框架JS库，提供逻辑层基础的API能力

（2）WAWebview.js 框架JS库，提供视图层基础的API能力

（3）WAConsole.js 框架JS库，控制台

（4）app-config.js 小程序完整的配置，包含我们通过app.json里的所有配置，综合了默认配置型

（5）app-service.js 我们自己的JS代码，全部打包到这个文件

（6）page-frame.html 小程序视图的模板文件，所有的页面都使用此加载渲染，且所有的WXML都拆解为JS实现打包到这里

（7）pages 所有的页面，这个不是我们之前的wxml文件了，主要是处理WXSS转换，使用js插入到header区域。

3、与H5页面的区别

　　小程序和普通的 h5 页面到底有什么区别呢？

（1）运行环境：小程序基于浏览器内核重构的内置解析器，而 h5 的宿主环境是浏览器。所以小程序中没有 DOM 和 BOM 的相关 API ， jQuery 和一些 NPM 包都不能在小程序中使用；

　　普通网页开发可以使用各种浏览器提供的 DOM API，进行 DOM 操作，而小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。

（2）系统权限：小程序能获得更多的系统权限，如网络通信状态、数据缓存能力等；

（3）渲染机制：小程序的逻辑层和