微信小程序实现原理浅析
小程序
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验（官网解释）。
小程序是基于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视图层、App Service逻辑层，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和Render UI实现
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等，这些都是为了保证更好的体验。
