小程序开发原理是什么( 二 ) _小程序

1、日志组件Reporter封装
2、wx对象下面的api方法
3、全局的App,Page,getApp,getCurrentPages等全局方法
4、还有就是对AMD模块规范的实现
然后整个页面就是载入一堆JS文件，包括小程序配置config，上面的WAService.js（调试模式下有asdebug.js）。剩下就是我们自己写的全部的js文件，一次性都载入。
在开发环境下
1、页面模板：app.nw/app/dist/weapp/tpl/appserviceTpl.js
2、配置信息，是直接写入一个js变量。__wxConfig 。
3，其它配置

文章插图

线上环境
而在上线后是应用部分会打包为2个文件，名称app-config.json和app-service.js，然后微信会打开webview去载入。线上部分应该是微信自身提供了对应的模板文件，在压缩包里没有找到。
1、WAService.js（底层支持）
2、app-config.json（应用配置）
3、app-service.js（应用逻辑）
然后执行在JAVAScriptCore引擎里面。
AppView
这里能够理解为h5的页面。提供UI渲染，底层提供一个WAWebview.js来提供底层的功能,详细例如以下：
1、消息通信封装为WeixinJSBridge（开发环境为window.postMessage, IOS下为WKWebview的window.webkit.messageHandlers.invokeHandler.postMessage 。android下用WeixinJSCore.invokeHandler）
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对象。而不同的环境封装的接口不一样。详细实现的技术例如以下：
windows环境
通过window.postMessage实现（使用chrome扩展的接口注入一个contentScript.js 。它封装了postMessage方法，实现webview之间的通信。而且也它通过chrome.runtime.connect方式，也提供了直接操作chrome native原生方法的接口）
发送消息：window.postMessage(data, ‘*’); 。// data里指定 webviewID
接收消息：window.addEventListener(‘message’, messageHandler); // 消息处理并分发，相同支持调用nwjs的原生能力。
在contentScript里面看到一句话。证实了appservice也是通过一个webview实现的，实现原理上跟view一样，仅仅是处理的业务逻辑不一样。
'webframe' === b ? postMessageToWebPage(a) : 'appservice' === b && postMessageToWebPage(a)
IOS
通过 WKWebview的window.webkit.messageHandlers.NAME.postMessage实现微信navite代码里实现了两个handler消息处理器：
invokeHandler: 调用原生能力
publishHandler: 消息分发

文章插图

Android
通过WeixinJSCore.invokeHanlder实现，这个WeixinJSCore是微信提供给JS调用的接口（native实现）
invokeHandler: 调用原生能力
publishHandler: 消息分发
微信组件
在WAWebview.js里有个对象叫exparser 。它完整的实现小程序里的组件，看详细的实现方式，思路上跟w3c的web components规范神似，可是详细实现上是不一样的，我们使用的全部组件，都会被提前注冊好，在Webview里渲染的时候进行替换组装。
exparser有个核心方法：
regiisterBehavior: 注冊组件的一些基础行为，供组件继承
registerElement：注冊组件，跟我们交互接口主要是属性和事件

文章插图

组件触发事件（带上webviewID），调用WeixinJSBridge的接口，publish到native 。然后native再分发到AppService层指定webviewID的Page注冊事件处理方法。
总结
小程序底层还是基于Webview来实现的。并没有发明创造新技术，整个框架体系。比較清晰和简单，基于Web规范，保证现有技能价值的最大化，仅仅需了解框架规范即可使用已有Web技术进行开发。易于理解和开发。
MSSM：对逻辑和UI进行了全然隔离，这个跟当前流行的react，agular，vue有本质的差别，小程序逻辑和UI全然执行在2个独立的Webview里面，而后面这几个框架还是执行在一个webview里面的，假设你想。还是能够直接操作dom对象，进行ui渲染的。