小程序底层架构剖析
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/T81bAV0NNNicpQllBvS8rNLk7oRGB2z1ibAn551h5zzga1kmooEzibict3XNMftAqGQuhDW8QReibfbtwKMpZclk6fg/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当<span style="color: black;">咱们</span>前端切图崽网上冲浪的时候，会<span style="color: black;">发掘</span>有<span style="color: black;">非常多</span>技术<span style="color: black;">文案</span>都在分析vue框架，react框架，显少有分析小程序框架的。那今天就<span style="color: black;">经过</span>这篇短小精悍的<span style="color: black;">文案</span>带<span style="color: black;">大众</span><span style="color: black;">认识</span>一下<span style="color: black;">微X</span>小程序的底层架构。（如无特殊说明，下文中<span style="color: black;">说到</span>的小程序都是<span style="color: black;">微X</span>小程序）</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">小程序的由来</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>先抛出一个问题，<strong style="color: blue;">在<span style="color: black;">无</span>小程序的时候，企业们都在<span style="color: black;">微X</span>里怎么运营？</strong> 答案<span style="color: black;">便是</span>小程序的“前身”-公众号，企业们<span style="color: black;">广泛</span>会把H5网站放在公众号<span style="color: black;">做为</span>流量转换的入口。<span style="color: black;">然则</span>h5确实让公众号遇到了<span style="color: black;">有些</span>问题。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span><span style="color: black;">便是</span><strong style="color: blue;">白屏过程</strong>，<span style="color: black;">针对</span><span style="color: black;">有些</span><span style="color: black;">繁杂</span>页面，受限于设备性能和网络速度，白屏会更加<span style="color: black;">显著</span>；再<span style="color: black;">便是</span><strong style="color: blue;">缺少操作反馈</strong>，<span style="color: black;">例如</span>页面切换生硬以及点击所带来的迟滞感等等；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">微X</span>团队内部<span style="color: black;">经过</span>JS-SDK以及后来的<span style="color: black;">加强</span>JS-SDK<span style="color: black;">已然</span>能够<span style="color: black;">处理</span><span style="color: black;">有些</span>问题，<span style="color: black;">然则</span><span style="color: black;">针对</span><span style="color: black;">以上</span>问题是JS-SDK所处理不了的，急需一个全新的系统来完成，它需要具备以下能力：</p>快速加载更强大的能力原生的体验易用且安全的<span style="color: black;">微X</span>数据开放<span style="color: black;">有效</span>，简单的<span style="color: black;">研发</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">于是，小程序诞生了。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">双线程架构</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">此处点题一下，本文<span style="color: black;">咱们</span>讨论的是小程序的底层架构，其实，双线程架构<span style="color: black;">便是</span>小程序的核心。<img src="https://mmbiz.qpic.cn/mmbiz_png/T81bAV0NNNicwLl39gugT8JsZfJGQgVzL6ATDqaHm0p4lepHTTTx9gDiaBIMc9gTEMFUiaREK6T9Xa42SA1Els5yA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">那<span style="color: black;">为何</span>要设计成双线程架构呢？<span style="color: black;">首要</span><span style="color: black;">咱们</span>来回顾一下浏览器的线程模型，浏览器是一个单线程架构，<span style="color: black;">重点</span><span style="color: black;">原由</span>是js<span style="color: black;">准许</span><span style="color: black;">拜访</span>操作DOM，<span style="color: black;">因此呢</span>js线程和渲染线程只能互斥运行。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">那小程序又是<span style="color: black;">怎样</span>做到双线程的呢，<span style="color: black;">基本</span><span style="color: black;">原由</span><span style="color: black;">便是</span><span style="color: black;">微X</span>小程序禁止js操作DOM。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>双线程架构的<span style="color: black;">优良</span>一目了然：</p><span style="color: black;">加强</span>用户体验（ui和<span style="color: black;">规律</span>分离，避免页面<span style="color: black;">长期</span>阻塞和卡顿）优化应用性能（运行在<span style="color: black;">区别</span>的线程中，<span style="color: black;">能够</span><span style="color: black;">同期</span>渲染<span style="color: black;">或</span>计算）<span style="color: black;">研发</span>效率更高（解耦和松散耦合）<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接下来就带<span style="color: black;">大众</span><span style="color: black;">认识</span>一下渲染层以及<span style="color: black;">规律</span>层的设计思路。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">设计思路-渲染层</span></h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">标签实现</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">小程序<span style="color: black;">运用</span>的是Exparser组件模型，Exparser组件模型与Web Components中的shadow DOM高度<span style="color: black;">类似</span>，<span style="color: black;">微X</span><span style="color: black;">为何</span><span style="color: black;">运用</span>自定义组件框架，而不<span style="color: black;">运用</span>Web Components呢？<span style="color: black;">重点</span>还是<strong style="color: blue;">出于安全<span style="color: black;">思虑</span>，并且方便管控。</strong>既然Exparser组件框架与shadow DOM高度<span style="color: black;">类似</span>，<span style="color: black;">那样</span><span style="color: black;">咱们</span><span style="color: black;">首要</span>来<span style="color: black;">认识</span>一下shadow DOM。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">shadow DOM</strong>: Web Components的一个重要属性是封装-<span style="color: black;">能够</span>将标记结构、样式和<span style="color: black;">行径</span><span style="color: black;">隐匿</span>起来，并与页面上的其他代码相隔离，<span style="color: black;">保准</span><span style="color: black;">区别</span>的部分不会混在<span style="color: black;">一块</span>，可使代码更加干净、整洁。其中，shadow DOM接口是关键所在，它<span style="color: black;">能够</span>将一个<span style="color: black;">隐匿</span>的，独立的DOM附加到一个元素上。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/T81bAV0NNNicwLl39gugT8JsZfJGQgVzLTljIZ4fmiaJwV1P22j7bTjPowG82yNQF6KvJ0vjPALiaBE4cI9SYlDxg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">shadow DOM<span style="color: black;">准许</span>将<span style="color: black;">隐匿</span>的DOM树附加到常规的DOM树中-它以shadow root节点为<span style="color: black;">初始</span>根节点，在根节点的下方，<span style="color: black;">能够</span>是任意元素，和普通的DOM<span style="color: black;">同样</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以上解释<span style="color: black;">源自</span>于MDN，其实shadow DOM并不<span style="color: black;">奥秘</span>，像<span style="color: black;">咱们</span>非常<span style="color: black;">熟练</span>的video标签本质上<span style="color: black;">便是</span>用shadow DOM实现的。<span style="color: black;">咱们</span>先打开chrome浏览器设置中的“打开用户代理shadow DOM”，<span style="color: black;">而后</span>再点击video标签就能看到。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/T81bAV0NNNicwLl39gugT8JsZfJGQgVzLSazMuLklqpWXs8jW9gyDsnTNXwYQu2nOcEZhao6ibA50sHNLUqthtEw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">创建shadow DOM<span style="color: black;">亦</span>非常简单，直接<span style="color: black;">运用</span>attachShadow<span style="color: black;">办法</span>就<span style="color: black;">能够</span>创建。</p>var shadow = Element.attachShadow({ mode: <span style="color: black;">closed</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">})</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Exparser组件模型</strong>：Exparser组件模型参考了shadow DOM并进行了<span style="color: black;">有些</span>修改，像事件系统就是完全复刻的，slot插槽，属性传递等都基本一致。但<span style="color: black;">同期</span>它又<span style="color: black;">拥有</span><span style="color: black;">有些</span>特点：</p>基于shadow DOM模型：模型上与Web Components的shadow DOM高度<span style="color: black;">类似</span>，但不依赖浏览器的原生支持，<span style="color: black;">亦</span><span style="color: black;">无</span>其他依赖库；实现时，还针对性地<span style="color: black;">增多</span>了其他API以支持小程序组件编程；可在纯JS环境中运行：这<span style="color: black;">寓意</span>着<span style="color: black;">规律</span>层<span style="color: black;">亦</span><span style="color: black;">拥有</span><span style="color: black;">必定</span>的组件树组织能力；<span style="color: black;">有效</span>轻量：性能表现好，在组件实例极多的环境下表现尤其优异，<span style="color: black;">同期</span>代码尺寸<span style="color: black;">亦</span>较小；<h3 style="color: black; text-align: left; margin-bottom: 10px;">WXML编译</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">认识</span>了小程序的组件系统之后，接下来<span style="color: black;">瞧瞧</span>WXML的编译过程。小程序中的DOM编译流程与vue类似，<span style="color: black;">亦</span>会先将代码字符串编译为虚拟DOM，小程序中的虚拟DOM结构如下：WXML<span style="color: black;">最后</span>会被编译为JS文件，<span style="color: black;">而后</span><span style="color: black;">插进</span>到渲染层的script标签中。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/T81bAV0NNNicwLl39gugT8JsZfJGQgVzLIicxXq7iauFR3MWYo4ZDjUVyCpyxFr5fm8Flff9kPibQlD4wjd5owstDw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/T81bAV0NNNicwLl39gugT8JsZfJGQgVzLqEdsJcCiczg6RS2pB7ibP7yuviaOPk5VV18FMcKkibDXvnbDuiaicqhlxRdA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">WXSS动态适配</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">WXSS是小程序中<span style="color: black;">运用</span>的样式语言，WXSS<span style="color: black;">拥有</span>CSS的大部分特性，<span style="color: black;">同期</span>它对CSS进行了扩充以及修改。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">小程序中<span style="color: black;">运用</span>的尺寸单位为rpx（Responsive px），<span style="color: black;">区别</span>于h5中<span style="color: black;">针对</span>px的处理，需要<span style="color: black;">运用</span>postcss进行统一的转换，小程序底层<span style="color: black;">已然</span>为<span style="color: black;">研发</span>者做好了这层转换，那<span style="color: black;">详细</span>它是怎么做到的呢？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/T81bAV0NNNicwLl39gugT8JsZfJGQgVzLhkXXwsVG43w2pqrZU81UbdMErbbAibYP2KdD9n0ibHt5dFxMGfkfycyg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">咱们</span>看它的这段源码，其实它与阿里的flexible.js<span style="color: black;">方法</span>是类似的，<span style="color: black;">区别</span>的是它做了一个精度收拢的优化，<span style="color: black;">重点</span>是为<span style="color: black;">认识</span>决1px的问题。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">WXSS<span style="color: black;">一样</span>会经过编译，<span style="color: black;">最后</span>的编译产物为wxss.js，<span style="color: black;">区别</span>于WXML<span style="color: black;">经过</span>script标签的形式<span style="color: black;">插进</span>到渲染层，wxss.js则是<span style="color: black;">经过</span>eval的方式注入到渲染层代码中。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">渲染层webview</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">全局变量</strong>: 渲染线程中存在着以下全局变量。</p>webviewId：webview的<span style="color: black;">独一</span>标识，当用户打开一个小程序页面的时候，相当于打开了一个webview，<span style="color: black;">区别</span>的webview用webviewid来区分;wxAppCode：<span style="color: black;">全部</span>页面的json wxss wxml编译之后都存储在<span style="color: black;">这儿</span>;Vd_version_info：版本信息;./dev/wxconfig.js：小程序默认总配置项，<span style="color: black;">包含</span>用户自定义与系统默认的整合结果。在<span style="color: black;">掌控</span>台输入__wxConfig<span style="color: black;">能够</span>看出打印结果;./dev/devtoolsconfig.js：小程序<span style="color: black;">研发</span>者配置，<span style="color: black;">包含</span>navigationBarHeight,标题栏的高度，状态栏高度，等等，<span style="color: black;">掌控</span>台输入__devtoolsConfig<span style="color: black;">能够</span>看到其对应的信息;./dev/deviceinfo.js：设备信息，<span style="color: black;">包括</span>尺寸/像素点pixelRatio;./dev/jsdebug.js：debug工具;./dev/WAWebview.js：渲染层底层<span style="color: black;">基本</span>库;./dev/hls.js：优秀的视频流处理工具;./dev/WARemoteDebug.js：底层<span style="color: black;">基本</span>库调试工具;<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">那小程序是<span style="color: black;">怎样</span>快速<span style="color: black;">起步</span>一个webview的呢？</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>在打开pages/index/index视图页面时，<span style="color: black;">发掘</span>DOM中多加载了一个__pageframe__/pageframe.html的视图层。这个视图层的<span style="color: black;">功效</span>正是小程序提前为一个新的页面层准备的。小程序<span style="color: black;">每一个</span>视图层页面内容都是<span style="color: black;">经过</span>pageframe.html模板来生成的，<span style="color: black;">包含</span>小程序<span style="color: black;">起步</span>的首页。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下面来<span style="color: black;">瞧瞧</span>小程序为快速打开小程序页面做的技术优化：</p>首页<span style="color: black;">起步</span>时，即<span style="color: black;">第1</span>次<span style="color: black;">经过</span>pageframe.html生成内容后，后台服务会缓存pageframe.html模板首次生成的html内容;非首次新打开页面时，页面请求的pageframe.html内容直接走后台缓存;非首次新打开页面时，pageframe.html页面引入的外链js资源走本地缓存; <span style="color: black;">这般</span>在后续新打开页面时，都会走缓存的pageframe的内容，避免重复生成，快速打开一个新页面。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">视图层打开新页面的流程</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在创建<span style="color: black;">每一个</span>视图层页面的webview时，都会为其绑定了onLoadCommit事件(它会在页面加载完成后触发，<span style="color: black;">包括</span>当前文档的导航和副框架的文档加载)。初始时webview的src会被指定为空页面<span style="color: black;">位置</span>http://127.0.0.1:${global.proxyPort}/aboutblank?${c}，其中c为对应webview的id。webview从空页面到<span style="color: black;">详细</span>页面视图的过程如下：</p>空页面<span style="color: black;">位置</span>webview加载完毕后执行事件中的reload<span style="color: black;">办法</span>，即设置webview的src为pageframe<span style="color: black;">位置</span>;加载完成后，设置其src为pageframe.html, 新的src内容加载完成后再次触发onLoadCommit事件但<span style="color: black;">按照</span><span style="color: black;">要求</span>不会执行reload<span style="color: black;">办法</span>;pageframe.html页面在dom ready之后触发注入并执行<span style="color: black;">详细</span>页面<span style="color: black;">关联</span>的代码，此时<span style="color: black;">经过</span>history.pushState<span style="color: black;">办法</span>修改webview的src<span style="color: black;">然则</span>webview并不会发送页面请求;<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">设计思路-<span style="color: black;">规律</span>层</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接下来<span style="color: black;">咱们</span><span style="color: black;">瞧瞧</span>小程序在<span style="color: black;">规律</span>层都做了<span style="color: black;">那些</span>事情。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">规律</span>层与视图层通信</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在小程序中，<span style="color: black;">规律</span>层<span style="color: black;">仅有</span>一个，<span style="color: black;">然则</span>渲染层有多个，渲染层和<span style="color: black;">规律</span>层之间是<span style="color: black;">经过</span><span style="color: black;">微X</span>客户端进行桥接通信的。那<span style="color: black;">详细</span>是怎么实现的呢？其实它<span style="color: black;">运用</span>的<span style="color: black;">便是</span><strong style="color: blue;">WeixinJSBridge</strong>通信机制。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在小程序执行的过程中，<span style="color: black;">微X</span>客户端分别向渲染层和<span style="color: black;">规律</span>层注入WeixinJSBridge,WeixinJSBridge<span style="color: black;">重点</span><span style="color: black;">供给</span>了以下几个<span style="color: black;">办法</span>：</p>invoke：调用native API;invokeCallbackHandler：Native 传递 invoke <span style="color: black;">办法</span>回调结果;publish：渲染层用来向<span style="color: black;">规律</span>业务层发送<span style="color: black;">信息</span>，<span style="color: black;">亦</span><span style="color: black;">便是</span>说要调用<span style="color: black;">规律</span>层的事件<span style="color: black;">办法</span>;subscribe：订阅<span style="color: black;">规律</span>层<span style="color: black;">信息</span>;subscribeHandler：视图层和<span style="color: black;">规律</span>层<span style="color: black;">信息</span>订阅转发;setCustomPublishHandler：自定义<span style="color: black;">信息</span>转发;<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">渲染层<span style="color: black;">怎样</span>向<span style="color: black;">规律</span>层通信？</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/T81bAV0NNNicwLl39gugT8JsZfJGQgVzLbwFehpgTtiaaekfy7piaWNY0vEWk1Z9ZMw5Xjl6fETAtlB3diajicibly4A/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_jpg/T81bAV0NNNicwLl39gugT8JsZfJGQgVzLJzJn8AOT90FBX73AZia6TuCB1YDTzaVpb44rUC7zksm8wpaszdZRKHQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>渲染层向<span style="color: black;">规律</span>层通信的方式<span style="color: black;">便是</span>采用事件系统，以上<span style="color: black;">便是</span>完整的事件系统流程。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">研发</span>者在DOM上<span style="color: black;">经过</span>@click绑定事件，WXML文件被编译的时候，会<span style="color: black;">经过</span>$gwx函数生成虚拟DOM，<span style="color: black;">而后</span>小程序执行的时候渲染层底层<span style="color: black;">基本</span>库会对虚拟DOM进行解析，事件绑定<span style="color: black;">最后</span>会以attr属性的形式生成到虚拟DOM中，<span style="color: black;">因此</span>底层<span style="color: black;">基本</span>库<span style="color: black;">经过</span>applyPropeties解析事件并<span style="color: black;">经过</span>addEventListener绑定到相应DOM并声明回调。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用户点击相应DOM时，Exparser组件系统接收到这个事件，<span style="color: black;">而后</span><span style="color: black;">起始</span>执行回调。回调函数在<span style="color: black;">规律</span>层，事件的触发在渲染层，此时，小程序会<span style="color: black;">经过</span>setData发送数据到<span style="color: black;">规律</span>层，这个时候WeixinJSBridge就派上用场了，渲染层调用publish<span style="color: black;">办法</span>发送数据，<span style="color: black;">规律</span>层<span style="color: black;">经过</span>registercallback进行监听，并执行相应的回调。此时，渲染层到<span style="color: black;">规律</span>层的通信流程结束。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">那<strong style="color: blue;"><span style="color: black;">规律</span>层又是<span style="color: black;">怎样</span>将改变后的数据回传给渲染层的呢</strong>？<span style="color: black;">规律</span>层改变数据之后，<span style="color: black;">一样</span>是触发setData<span style="color: black;">办法</span>，<span style="color: black;">而后</span>渲染层<span style="color: black;">经过</span>subscribe进行监听，从eventname和触发事件时候记录的回调函数来判断是哪个事件被触发了，从而获取动态数据。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">第三方小程序框架</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">WXML，WXSS都是小程序的原生<span style="color: black;">研发</span>语言，<span style="color: black;">运用</span>原生语言<span style="color: black;">研发</span>还是存在<span style="color: black;">许多</span>限制，尤其是17年小程序刚推出那会。<span style="color: black;">因此呢</span>，第三方小程序框架应运而生。第三方框架<span style="color: black;">能够</span>分为三大类。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第1</span>类是<strong style="color: blue;">预编译框架</strong>，预编译框架<span style="color: black;">便是</span>在执行前就进行编译。像我司在17年<span style="color: black;">研发</span>“转转二手交易网”的时候<span style="color: black;">运用</span>的wepy框架就属于预编译框架。预编译框架<span style="color: black;">亦</span>有<span style="color: black;">有些</span>显而易见的缺点，这类预编译框架要么是类vue，要么是类React，<span style="color: black;">倘若</span>后期vue<span style="color: black;">或</span>React再出<span style="color: black;">有些</span>新特性的话，预编译框架就要进行扩展编写；还有<span style="color: black;">有些</span>兼容问题，<span style="color: black;">针对</span>小程序本身不支持的<span style="color: black;">有些</span>属性，预编译框架需要进行兼容；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第二类是<strong style="color: blue;">半编译半运行框架</strong>，像美团的mpvue<span style="color: black;">便是</span>此类框架，半编译指的是vue的template需要单独编译为wxml，半运行讲的是vue整体的特性都会在<span style="color: black;">规律</span>层中运行。为了符合小程序的渲染框架，修改了vue的框架；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第三类是<strong style="color: blue;">运行时框架</strong>，像Remax<span style="color: black;">便是</span>运行时框架，它<span style="color: black;">能够</span>使<span style="color: black;">研发</span>者<span style="color: black;">运用</span>完整的React语法来<span style="color: black;">研发</span>小程序。<span style="color: black;">由于</span>小程序框架本身是不支持js直接操作DOM的，那Remax框架是<span style="color: black;">怎样</span><span style="color: black;">处理</span>这个问题的呢？其实它自己复刻了一套操作DOM的API，例如appendChild，innterHtml等，<span style="color: black;">然则</span>它真正操作的并不是dom，而是data中的数据结构。从而达到了操作DOM的目的。使得自己真正<span style="color: black;">成为了</span>一个运行时框架；</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">结语</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">介绍到<span style="color: black;">这儿</span>，小程序的底层框架原理基本<span style="color: black;">已然</span>介绍完了，想跟<span style="color: black;">大众</span>分享的是，小程序确实和h5非常类似，其实它相当于一个借助了native强大功能的加强版h5，小程序并不<span style="color: black;">奥秘</span>，除了<span style="color: black;">微X</span>小程序之外，<span style="color: black;">此刻</span>各大超级APP都<span style="color: black;">已然</span>推出了自己的小程序，原理应该都大差不差。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本篇<span style="color: black;">文案</span>其实相当于一个学习笔记，作者本身非常想搞清楚<span style="color: black;">微X</span>小程序的架构，<span style="color: black;">然则</span><span style="color: black;">微X</span>小程序并<span style="color: black;">无</span>开源，某次偶然的机会逛掘金的时候看到这篇小册，就<span style="color: black;">全部</span>学习了一下，<span style="color: black;">这里</span>感谢原作者！</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">参考</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">https://juejin.cn/book/6982013809212784676</p>
“板凳”（第三个回帖的人） 太棒了、厉害、为你打call、点赞、非常精彩等。
页:
[1]