关于前端:从微信小程序原理来看app如何搭建自己的小程序环境

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

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

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

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

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

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

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

webview 渲染
native 渲染
Hybrid 渲染
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，以及本身的开发者工具，不便经营开发以及数据分析

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

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

关于前端:从微信小程序原理来看app如何搭建自己的小程序环境

前沿

小程序原理

平安

性能

组件

通信

总结