前沿

还记得当初小程序刚进去爆火的场景，依附于微信的确是给咱们带来了极大的便当，有着微信的流量，用完即走，无需下载，随时应用，从17年到23年，小程序曾经深入人心，吃喝玩乐你都能够找到小程序的身影，疫情期间各种码的场景也给小程序带来了微小的流量

当然不只是微信小程序，各大平台都推出了本人的小程序，像支付宝小程序、百度小程序、抖音小程序等等，这些app都紧跟潮流，实现了本人的小程序框架，通过了五年多工夫的倒退，小程序的框架曾经趋于稳定，对于前端开发来说，甚至呈现了一批专门做小程序的开发者

在开发应用上，置信大家在看文档的同时，曾经有了本人的意识，然而小程序具体的架构是怎么的？它的原理是什么？咱们如何在本人的app上搭建一套小程序体系？

当然微信的webview的形式也能实现小程序同样的性能，然而和微信的webview相比，小程序运行速度更快，因为小程序是双线程模型，逻辑和渲染是离开的，不会互相阻塞

小程序原理

在浏览器环境中，咱们都晓得，js代码的执行会阻塞页面渲染，渲染和脚本执行是互斥的，长时间的脚本经营导致页面无响应，这也是为什么react要进行切片操作

小程序采纳双线程将两者离开，渲染和逻辑独立，互不影响，这就是为什么下面提到的小程序要比失常的H5要快，当然要让用户感触到快，首要的就是渲染

目前比拟通用的四种渲染技术别离是

  1. webview渲染
  2. native渲染
  3. Hybrid渲染
  4. Skyline渲染引擎（新增）

首先如果采纳webview的渲染咱们也提到了，同一个线程阻塞导致性能问题，采纳native的形式做渲染的话咱们改变小程序代码还须要同微信客户端一起发包，显然是不可能的，既然两个都不行，那采纳hybrid的形式呢？将两者联合，比方react native就采纳了这种形式

那什么是hybrid呢？说白了就是一个app中既有native的内容，又有web的内容，原理是其中有一个UIWebView，外面嵌入了一些web页面，这些web页面能够跨平台应用，比方ios和安卓，做个通用的壳就能够了，你能够把微信类比成hybrid app，小程序就是一些H5，界面渲染走的是web层面的渲染，而后由端上提供大量的接口提供丰盛的客户端原生能力，保障在web的体验上可能应用一些原生的能力，并且更新比拟迅速

近期微信新增了一种渲染引擎，为什么要新增呢？次要起因是因为web倒退了这么久，尽管渲染方面曾经做的很好的，然而还是因为历史起因以及简单的渲染流程，让它在app中的体现还是有肯定的差别，毕竟js总是会阻塞页面渲染，所以skyline是一种新的渲染引擎，skyline创立了一条渲染线程来负责layout, composite 和渲染等工作，并在在端上划出一个独立的上下文，来运行之前webview承当的js工作、dom树创立等逻辑。使得js不在阻塞页面的渲染，并且很好的保障了兼容性

然而其中的一些个性并不是原生就有，还是须要端上做一些能力的开发和兼容，比方CSS的calc 函数，小程序的picker-view组件等等都须要去做适配，老本较高，然而这的确是当前的小程序倒退方向，可能较好的晋升小程序性能

目前如果没有非凡指定，小程序采纳的还是hybrid形式

平安

除了渲染要快，对于小程序来说，最重要的一点是平安，对于web来说，我能够跳转任意想要的页面，比方从本人的页面跳转到baidu，跳转到juejin，都是很随便的，没有任何的管控，然而对于小程序来说不能这样，如果没有束缚要跳转的内容，体验会变得很蹩脚

另一方面，如果通过js代码获取一些用户的敏感数据通过dom操作，那用户信息透露会将事件变的无奈进行

所以基于这些状况，微信外部阻止了一些操作dom，跳转，动静脚本执行的接口，只提供了一些js的脚本执行器，所以小程序提供了一个沙箱环境，这个环境不能有浏览器相干操作，而对于客户端来说，自身微信app就有内置的js解释引擎，iOS下是内置的JavaScriptCore框架，在安卓则是用腾讯x5内核提供的JsCore环境，创立了独立的线程去执行js代码，这个线程中执行的都是相干的业务逻辑的代码，逻辑相干的内容都在这里解决，渲染相干的都在webview中解决，通过逻辑层去管制渲染层的展现，这就是小程序的双线程模型

性能

既然是双线程，那问题来了，线程之间的通信是有提早的，就导致线程之间的通信实际上是异步的，对于和客户端原生的交互也是异步的，所以小程序的api大量采纳了回调的形式，比方抉择图片

wx.chooseImage({  count: 1,  sizeType: ['original', 'compressed'],  sourceType: ['album', 'camera'],  success (res) {    // tempFilePath能够作为 img 标签的 src 属性显示图片    const tempFilePaths = res.tempFilePaths  }})

组件

既然渲染是用webview来的，那是不是咱们间接应用html标签就能够了，当然不行，不然利用a标签那不是也能够本人跳转了么？所以小程序搞了本人的一套组件零碎，名为Exparser，实质还是模拟了html的那一套，然而绝对的也减少了本人的一些能力，比方button，应用一些额定的参数用来获取用户信息，map能够间接应用地图的能力，ad的广告能力

通信

小程序和app通信原理其本质和web同app通信的原理相似，只不过有渲染层和逻辑层的通信，因为双线程架构模式，安卓比较简单，不论是逻辑层还是渲染层，都是在window对象中注入一些办法，ios在渲染层采纳messageHandlers个性，逻辑层则是在JavaScripCore框架注入一个全局的原生办法

总结

整套的原理有了，依据这些原理和内容，实质上是能够可能本人实现一套小程序的体系的，然而这个工作量无疑是微小的，既然这曾经是一套成熟的计划，那如何在本人的app外面搭件一套小程序环境呢？

市面上曾经存在很多开源的计划，毕竟个大厂商都曾经有本人的小程序，容器技术曾经成熟，比方常见的FinClip，OpenApp，mPaas，Donut等

咱们以FinClip为例，毕竟FinClip可能运行微信中的小程序，并且可能保障用户体验，客户量较大，国内较为当先的小程序容器化公司，咱们相熟的像建设银行app，工商银行app等都有它的身影，有整个一套残缺的小程序管理平台，端侧小程序sdk，以及本身的开发者工具，不便经营开发以及数据分析

像咱们下面提到的沙箱环境，双线程的逻辑层和视图层都做成了一套通用计划

所以如果想搭件本人的一套小程序体系，应用现有的计划，平安省心，心愿能给须要的同学肯定的参考