applet实现原理分析(applet结构详解及实例)

摘要

作为一名前端开发人员，如果您仍然处于应用程序开发级别，那么您就出局了。来和我一起探讨一下小程序框架本身底层实现的一些技术细节，让我们从小程序的运行机制上有一个深入的了解。小程序是一套基于WEB规范的框架，使用HTML、CSS和JS等。微信官方给了它们一个非常牛逼的名字:WXML、WXSS，但本质上它们是在整个WEB系统下构建的。WXml，我猜是微信的Xml取了这个名字。归根结底，它是XML的一个子集。WXML使用了微信定制的少量标签WXSS，可以理解为定制的CSS。实现逻辑部分的JS是通用的ES规范，运行时是WebView（IOSW WK WebView，Android X5）。

（学习推荐:小程序开发教程）

小程序；迷你程序

Applet目录结构

一个完整的小程序主要由以下几个部分组成:一个入口文件:app.js，一个全局样式:app.wxss，一个全局配置:app.json页面:pages，每个页面都分为文件夹，并且每个页面都有四个文件视图:wxml，wxss逻辑:js，json（页面配置，不是必须的）。

注意:页面也可以按照模块分为子目录和孙子目录，在app.json注册时填写路径即可。

小程序包装

开发完成后，我们可以点击此处的可视化按钮，直接打包、上传和发布，审批通过后用户即可搜索。

那么包装是如何实现的呢？这就涉及到这个编辑器的实现原理和方法，它也是基于WEB技术体系的。什么是nwjs+react，nwjs？简单来说就是node+webkit，node为我们提供本地api能力，webkit为我们提供web能力。两者的结合可以使我们使用JS+HTML实现本地应用程序。现在nodejs已经可用，可以轻松实现上述打包选项中的功能。ES6到ES5:用babel-core完成节点包CSS:用postcss和autoprefixer完成节点包（postcss和autoprefixer的原理见这里）代码压缩:用uglifyjs完成节点包。

注意:android上使用的x5内核不能很好地支持ES6。如果兼容，要么使用ES5的语法，要么引入babel-polyfill兼容库。

打包目录结构

打包的小应用程序具有以下结构:

所有小程序基本都输入到上面的结构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的所有页面和这里的页面。这不是我们以前的WXML文件，而是主要处理WXSS转换。

小程序架构

微信小程序的框架由视图层和App服务逻辑层两部分组成。视图层用于呈现页面结构，应用服务层用于逻辑处理、数据请求和接口调用。它们在两个进程中运行（两个Webview）。视图层和逻辑层通过系统层的桥梁进行通信。逻辑层将数据变化通知视图层，触发视图层的页面更新，视图层将触发的事件通知逻辑层进行业务处理。

小程序架构图:

小程序启动时，会从CDN下载小程序的完整包，CDN一般以数字命名，如_ -2082693788 _ 4.wxapkg。

小程序技术实现

小程序的UI视图和逻辑处理由多个WebView实现，所有用于逻辑处理的JS代码都加载到一个WebView中，称为AppService。只有一个applet，整个生命周期都驻留在内存中，所有视图（wxml和wxss）都由单独的WebViews承载，这称为AppView。因此，当小程序打开时，至少会有两个webview进程。官方表示，由于每个视图都是一个独立的webview进程，考虑到性能消耗，小程序不允许打开超过五级的页面，这也是为了更好的体验。

应用服务

可以理解为AppService是一个简单的页面，其主要功能是负责逻辑处理部分的执行。底层提供一个WAService.js的文件来提供各种api接口，主要包括以下几个部分:消息通信封装为WeixinJSBridge（开发环境为IOS下的window.postMessage、windows . WebKit . message handlers . invoke handler . postmessage for wk webview，android下的WeixinJSCore.invokeHandler）。

1.日志组件Reporter 2的封装。wx对象3下的api方法。全局方法，如app、page、getapp、getcurrentpages 4。AMD模块规范的实现。

然后整个页面就是加载一堆js文件，包括小程序配置config，上面有WAService.js（调试模式下有asdebug.js），剩下的都是我们自己写的js文件，都是一次性加载的。

在开发环境中

1.页面模板:app.nw/app/dist/weapp/tpl/appserviceTpl.js新协议。配置信息直接写入js变量__wxConfig。3.其他配置

在线环境

上线后应用部分会打包成两个文件，分别命名为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，Windows。IOS下WKWebview的WebKit . message handlers . invoke handler . postmessage，android下的weixinjcore . invoke handler）2。日志组件报告器封装3。wx对象下的api，这里的api和WAService中的不太一样。其中一些具有类似的功能，但大多数都与UI显示有关。4.applet组件的实现和注册。5.VirtualDOM、Diff和Render UI的实现。6.页面事件触发。

在此基础上，AppView有一个html模板文件，并通过此模板文件加载特定页面。这个模板主要有一个方法$gwx，主要返回指定页面的VirtualDOM。打包时，所有页面的WXML都将预先转换为ViirtualDOM并放入模板文件中。微信自己写了两个工具wcc（将WXML转换为VirtualDOM）和wcsc（将WXSS转换为JS字符串，并通过style标签将其追加到标头中）。

服务和视图通信

使用消息发布和订阅机制实现两个Webview之间的通信。实现的方法是统一封装一个WeixinJSBridge对象，但不同环境中封装的接口是不同的。具体实现技术如下:

Windows环境

通过window.postMessage发送消息（在chrome的扩展接口中注入一个contentScript.js，其中封装了postMessage方法以实现webview之间的通信，并且它还提供了一个通过chrome.runtime.connect的方式直接操作Chrome原生方法的接口）:window . postMessage（data，‘*‘）；// data中指定的webviewID接收消息:window . addevent listener（‘message’，消息处理程序）；//消息处理和分发，也支持原生调用nwjs的能力。我在contentScript中看到一句话，证实了appservice也是通过一个webview实现的。实现原理与view相同，但业务逻辑不同。

web frame‘= = = b？postMessageToWebPage（a）:“appservice“= = = b & amp；& amp邮件页面

通过WKWebview的窗口。WebKit . Message handlers . name . postmessage，在微信导航代码中实现了两个handler消息处理程序:invokeHandler:调用本机能力publishHandler:消息分发

Android是通过WeixinJSCore.invokeHanlder实现的，这是微信为JS调用提供的接口（原生实现）:InvokeHandler:调用原生能力publishHandler:消息分发。

微信组件

在WAWebview.js中，有一个名为exparser的对象，它完全实现了小程序中的组件。根据具体的实现方法，其思想类似于w3c web components规范，但具体实现有所不同。我们使用的所有组件都将提前注册，并在Webview中渲染时进行替换和组装。Exparser有一个核心方法:regiisterBehavior:注册组件的一些基本行为以便组件继承registerElement:注册组件，与我们的接口主要是属性和事件。

该组件触发一个事件（使用webviewID），调用WeixinJSBridge的接口，将其发布到native，然后native将其分发到指定webviewID的AppService层的页面注册事件处理方法。

摘要

小程序的底层仍然基于Webview，并没有发明新技术。整个框架体系相对清晰简单。基于Web规范，它确保了现有技能的最大价值，您只需了解框架规范即可使用现有的Web技术进行开发。易于理解和开发。

MSSM:逻辑和用户界面是完全隔离的，这与流行的react、agular和vue有本质区别。小程序逻辑和UI完全在两个独立的webview中运行，而后面的框架仍然在一个webview中运行。如果您愿意，您仍然可以直接操作dom对象并呈现UI。

组件机制:引入了组件机制，但并不完全基于组件开发。像vue一样，大多数ui仍然呈现为模板。引入组件机制可以更好地规范开发模式，方便升级和维护。

各种限制:不能同时打开5个以上的窗口，包文件不能大于1M，dom对象不能大于16，000，这些都是为了确保更好的体验。

这几篇文章你可能也喜欢：

• 分析小程序的实现原理(小程序的工作原理)

本文由主机参考刊发，转载请注明：applet实现原理分析(applet结构详解及实例) https://zhujicankao.com/114429.html