# 小程序的架构方案  微信小程序的框架包含两部分：View 视图层、App Service 逻辑层。 - View 层用来渲染页面结构 - AppService 层用来逻辑处理、数据请求、接口调用 - 视图层和逻辑层通过系统层的 JSBridge 进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。 视图层使用 WebView 渲染，iOS 中使用自带 WKWebView，在 Android 使用腾讯的 x5 内核（基于 Blink）运行。 逻辑层运行在独立的 JS 引擎中（iOS：`JavaScriptCore`, android：`X5`JS解析器；统称`JSCore`； **开发工具使用 nw.js 同时提供了视图层和逻辑层的运行环境。** 整个小程序由两个`webview`组成，代码分为`UI`层和逻辑层。`UI`层运行在第一个`WebView`当中，执行`DOM`操作和交互事件的响应，里面是`WAWebview.js`代码及编译后的内容。逻辑层执行在（第二个`webview`中）独立的`JS`引擎中（iOS：`JavaScriptCore`, android：`X5`JS解析器；统称`JSCore`； 当我们对`view`层进行事件操作后，会通过`WeixinJSBridge`将数据传递到`Native`系统层。`Native`系统层决定是否要用`native`处理，然后丢给逻辑层进行用户的逻辑代码处理。逻辑层处理完毕后会将数据通过`WeixinJSBridge`返给`View`层。`View`渲染更新视图。 # 参考链接 [微信小程序架构原理](http://eux.baidu.com/blog/fe/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%9E%B6%E6%9E%84%E5%8E%9F%E7%90%86) [segmentfault-浅谈小程序的运行机制](https://segmentfault.com/a/1190000019131399) [掘金-小程序攻略](https://juejin.im/post/5b8fd1416fb9a05cf3710690#heading-24) [小程序资源汇总](https://github.com/justjavac/awesome-wechat-weapp)