微信小程序实现原理
微信小程序采用wxml@H_502_4@、wxss@H_502_4@、javascript@H_502_4@进行开发，本质是一个单页应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口。微信的架构，是数据驱动视图的MVVM@H_502_4@模式，其视图UI@H_502_4@和数据是分离的，所有的页面更新，都需要通过对数据的变更来实现。小程序分为两个部分Webview@H_502_4@和AppService@H_502_4@，Webview@H_502_4@主要用来展现渲染界面，AppService@H_502_4@用来处理业务逻辑、数据及接口调用，通过系统层JSBridge@H_502_4@实现通信，实现UI@H_502_4@的渲染与事件的处理。
目录结构
打包前
Project
├── pages
│ ├── index
│ │ ├── index.js // index 逻辑
│ │ ├── index.json // index 配置
│ │ ├── index.wxml // index 结构
│ │ └── index.wxss // index 样式表
│ └── logs
│ ├── logs.js // logs 逻辑
│ ├── logs.json // logs 配置
│ ├── logs.wxml // logs 结构
│ └── logs.wxss // logs 样式表
├── app.js // 逻辑
├── app.json // 公共配置
├── app.wxss // 公共样式表
├── project.config.json // 项目配置
└── sitemap.json // 页面收录配置
@H_502_4@打包后
Project
├── app-config.json // 小程序工程全部json配置信息
├── app-service.js // JS业务逻辑打包到此处
├── page-frame.html // 视图的模板文件
└── pages
├── index.html // index 页面
└── logs.html // logs 页面
@H_502_4@架构方案
微信小程序的框架包含两部分View@H_502_4@视图层与AppService@H_502_4@逻辑层，View@H_502_4@层用来渲染页面结构，AppService@H_502_4@层用来逻辑处理、数据请求、接口调用，它们在两个进程里运行，具体实现是在两个Webview@H_502_4@中运行。
视图层和逻辑层通过系统层的JSBridge@H_502_4@进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。
----------------------- -----------------------
| View | | AppService |
| | | |
| Page1 Page2 Page3 | | Manager Api |
----------------------- -----------------------
| ↑ | ↑
| Event | Data | Data | Event
↓ | ↓ |
-------------------------------------------------------------------------
| JSBridge |
| |
| Native Storage Network ... |
-------------------------------------------------------------------------
@H_502_4@微信将所有的视图都将加载到一个Webview@H_502_4@中，称之为View@H_502_4@层。将所有进行逻辑处理的JS@H_502_4@代码全部加载到另一个WebView@H_502_4@中，称之为AppService@H_502_4@层，每个小程序只有一个并且整个生命周期常驻内存。在JSBridge@H_502_4@中封装了消息通信以及通过App@H_502_4@访问OS@H_502_4@能力的实现，对于消息通信通过在不同平台调用相应的方法进行通信，开发环境为window.postMessage@H_502_4@,IOS@H_502_4@下为WKWebview@H_502_4@的window.webkit.messageHandlers.invokeHandler.postMessage@H_502_4@，Android@H_502_4@下为WeixinJscore.invokeHandler@H_502_4@。在Js@H_502_4@引擎方面，Android@H_502_4@中使用X5@H_502_4@内核，IOS@H_502_4@中使用JavaScriptCore@H_502_4@引擎，开发工具中使用nwjs Chrome@H_502_4@内核。
通过使用View@H_502_4@视图层与AppService@H_502_4@逻辑层就实现了双线程的小程序运行方案，通过两个线程，可以做到将代码放入沙箱执行，从而做到对于代码执行的安全与管控，当然对于双线程只是一个小程序的解决方案，倘若要在一个App@H_502_4@上运行多个小程序，就应该采用多线程方案去执行，不仅是对于性能方面的考虑，也是为了防止小程序之间相互影响。
底层支持
微信小程序开发工具中拥有一些编译支持模板以及小程序底层支持文件。
-
transWxmlToJs@H_502_4@:wxml@H_502_4@转js@H_502_4@ -
transWxssToCss@H_502_4@:wxss@H_502_4@转css@H_502_4@ -
transConfigToPf@H_502_4@: 模板页配置 -
transWxmlToHtml@H_502_4@:wxml@H_502_4@转html@H_502_4@ -
transManager@H_502_4@: 管理器 -
WAConsole.js@H_502_4@: 框架JS@H_502_4@库，控制台能力 -
WAWebview.js@H_502_4@: 框架JS@H_502_4@库，提供视图层基础的API@H_502_4@能力，主要功能有将消息通信封装为JSBridge@H_502_4@消息，日志组件Reporter@H_502_4@封装，wx@H_502_4@对象下部分渲染视图方面的Api@H_502_4@,小程序组件实现和注册，VirtualDOM@H_502_4@与diff@H_502_4@和Render UI@H_502_4@的实现，页面事件触发处理 -
WAService.js@H_502_4@: 框架JS@H_502_4@库，提供逻辑层基础的API@H_502_4@能力，主要功能有消息通信封装为JSBridge@H_502_4@消息，日志组件Reporter@H_502_4@封装，wx@H_502_4@对象下面的大部分Api@H_502_4@方法，App()@H_502_4@小程序入口，Page()@H_502_4@页面的入口，getApp@H_502_4@等全局方法，数据绑定，事件分发，生命周期管理，路由管理，模块化能力等
每日一题
https://github.com/WindrunnerMax/EveryDay
@H_502_4@参考
https://www.zhihu.com/question/50920642
https://kangzubin.com/wxapp-decompile-1/
https://github.com/berwin/Blog/issues/49
https://segmentfault.com/a/1190000018631528
http://eux.baidu.com/blog/fe/微信小程序架构原理
https://juejin.im/post/5da444ab6fb9a04e054d93d8
https://cloud.tencent.com/developer/article/1029663
@H_502_4@