微信小程序采用wxml
、wxss
、javascript
进行开发,本质是一个单页应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口。微信的架构,是数据驱动视图的MVVM
模式,其视图UI
和数据是分离的,所有的页面更新,都需要通过对数据的变更来实现。小程序分为两个部分Webview
和AppService
,Webview
主要用来展现渲染界面,AppService
用来处理业务逻辑、数据及接口调用,通过系统层JSBridge
实现通信,实现UI
的渲染与事件的处理。
微信小程序的框架包含两部分View
视图层与AppService
逻辑层,View
层用来渲染页面结构,AppService
层用来逻辑处理、数据请求、接口调用,它们在两个进程里运行,具体实现是在两个Webview
中运行。
视图层和逻辑层通过系统层的JSBridge
进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。
微信将所有的视图都将加载到一个Webview
中,称之为View
层。将所有进行逻辑处理的JS
代码全部加载到另一个WebView
中,称之为AppService
层,每个小程序只有一个并且整个生命周期常驻内存。在JSBridge
中封装了消息通信以及通过App
访问OS
能力的实现,对于消息通信通过在不同平台调用相应的方法进行通信,开发环境为window.postMessage
, IOS
下为WKWebview
的window.webkit.messageHandlers.invokeHandler.postMessage
,Android
下为WeixinJSCore.invokeHandler
。在Js
引擎方面,Android
中使用X5
内核,IOS
中使用JavaScriptCore
引擎,开发工具中使用nwjs Chrome
内核。
通过使用View
视图层与AppService
逻辑层就实现了双线程的小程序运行方案,通过两个线程,可以做到将代码放入沙箱执行,从而做到对于代码执行的安全与管控,当然对于双线程只是一个小程序的解决方案,倘若要在一个App
上运行多个小程序,就应该采用多线程方案去执行,不仅是对于性能方面的考虑,也是为了防止小程序之间相互影响。
微信小程序开发工具中拥有一些编译支持模板以及小程序底层支持文件。
transWxmlToJs
: wxml
转js
transWxssToCss
: wxss
转css
transConfigToPf
: 模板页配置transWxmlToHtml
: wxml
转html
transManager
: 管理器WAConsole.js
: 框架JS
库,控制台能力WAWebview.js
: 框架JS
库,提供视图层基础的API
能力,主要功能有将消息通信封装为JSBridge
消息,日志组件Reporter
封装,wx
对象下部分渲染视图方面的Api
,小程序组件实现和注册,VirtualDOM
与diff
和Render UI
的实现,页面事件触发处理WAService.js
: 框架JS
库,提供逻辑层基础的API
能力,主要功能有消息通信封装为JSBridge
消息,日志组件Reporter
封装,wx
对象下面的大部分Api
方法,App()
小程序入口,Page()
页面的入口,getApp
等全局方法,数据绑定,事件分发,生命周期管理,路由管理,模块化能力等