微信小程序实现原理浅析

小程序

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验（官网解释）。

小程序是基于WEB规范，采用HTML、CSS和JS等搭建的一套框架，本质就是富单页面web应用。

优点：

1、方便快捷，即用即走

不需要再下载APP

2、速度快、不占内存

小程序前端代码存在微信服务器上，在腾讯云端存放，所以无需加载，速度比较快，不占用手机内存

3、安全稳定、保密性强

小程序需要审核才能发布，通信采用https访问，SSL加密通信，小程序样式代码都封装在微信小程序里面，安全性更高，更稳定

4、功能丰富，场景丰富

可以调用比H5更多的手机系统功能来进行开发，例如GPS定位、录音、拍视频、重力感应等，能开发更丰富的使用场景

5、开发成本低、维护简便

同样的功能，做一个APP估计需要十几万甚至几十万，而开发一个小程序，一般几千元就搞定了，维护起来也比较简单方便

6、附近定位、入口众多

开放的入口比较多，除了通过扫码，发送朋友，搜索，附近等常用入口外，还能与公众号关联，群发文章嵌入，公众号菜单链接等

页面渲染方式

页面渲染的方式主要有三种：

1、web渲染

2、Native原生渲染

3、web与Native两者掺杂，即Hybrid渲染

小程序的呈现形式为第三种。

WebView

WebView即网络视图，能加载显示网页，是浏览器内核基础上进行封装后的一个控件，我们可以简单的看作一个可以嵌套到界面上的一个浏览器控件！

JsBridge

顾名思义就是js和Native之前的桥梁，是js和Native之间的一种通信方式。简单的说，JSBridge就是定义Native和JS的通信，Native只通过一个固定的桥对象调用JS，JS也只通过固定的桥对象调用Native。

小程序目录结构

.json后缀的JSON配置文件.wxml后缀的WXML模板文件.wxss后缀的WXSS样式文件4、.js后缀的JS脚本逻辑文件

一个小程序主体部分由三个文件组成，必须放在项目的根目录

一个小程序页面由四个文件组成

打包后的目录结构

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

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区域。

小程序架构

微信小程序的框架包含两部分：View视图层、AppService逻辑层，View层用来渲染页面结构，AppService层用来逻辑处理、数据请求、接口调用，它们在两个进程（两个Webview）里运行。

视图层和逻辑层通过系统层的JSBridge进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。

小程序技术实现

小程序的UI视图和逻辑处理是用多个webview实现的，逻辑处理的JS代码全部加载到一个Webview里面，称之为AppService，整个小程序只有一个，并且整个生命周期常驻内存，而所有的视图（wxml和wxss）都是单独的Webview来承载，称之为AppView。所以一个小程序打开至少就会有2个webview进程，正是因为每个视图都是一个独立的webview进程，考虑到性能消耗，小程序不允许打开超过5个层级的页面，当然同是也是为了体验更好。

AppService

可以理解AppService即一个简单的页面，主要功能是负责逻辑处理部分的执行，底层提供一个WAService.js的文件来提供各种api接口，主要是以下几个部分：

1、消息通信封装为WeixinJSBridge

2、日志组件Reporter封装

3、wx对象下面的api方法

4、全局的App,Page,getApp,getCurrentPages等全局方法

5、还有就是对AMD模块规范的实现

然后整个页面就是加载一堆JS文件，包括小程序配置config，上面的WAService.js（调试模式下有asdebug.js），剩下就是我们自己写的全部的js文件，一次性都加载。

AppView

这里可以理解为h5的页面，提供UI渲染，底层提供一个WAWebview.js来提供底层的功能，具体如下：

1、消息通信封装为WeixinJSBridge

2、日志组件Reporter封装

3、wx对象下的api，这里的api跟WAService里的还不太一样，有几个跟那边功能差不多，但是大部分都是处理UI显示相关的方法

4、小程序组件实现和注册

5、VirtualDOM，Diff和RenderUI实现

6、页面事件触发

在此基础上，AppView有一个html模板文件，通过这个模板文件加载具体的页面，这个模板主要就一个方法，$gwx，主要是返回指定page的VirtualDOM，而在打包的时候，会事先把所有页面的WXML转换为ViirtualDOM放到模板文件里，而微信自己写了2个工具wcc（把WXML转换为VirtualDOM）和wcsc（把WXSS转换为一个JS字符串的形式通过style标签append到header里）。

Service和View通信

使用消息publish和subscribe机制实现两个Webview之间的通信，实现方式就是统一封装一个WeixinJSBridge对象，而不同的环境封装的接口不一样

总结

小程序底层还是基于Webview来实现的，并没有发明创造新技术，整个框架体系，比较清晰和简单，基于Web规范，保证现有技能价值的最大化，只需了解框架规范即可使用已有Web技术进行开发，易于理解和开发。

MSSM：对逻辑和UI进行了完全隔离，这个跟当前流行的react，agular，vue有本质的区别，小程序逻辑和UI完全运行在2个独立的Webview里面，而后面这几个框架还是运行在一个webview里面的。

组件机制：引入组件化机制，但是不完全基于组件开发，跟vue一样大部分UI还是模板化渲染，引入组件机制能更好的规范开发模式，也更方便升级和维护。

多种节制：不能同时打开超过5个窗口，打包文件不能大于2M等，这些都是为了保证更好的体验。