Frontier还记得小程序刚出来就爆火的场景。附上微信确实给我们带来了很大的方便。有了微信的流量，说完就走，不用下载，随时用。从17年到23年，小程序已经深入人心。你可以找到吃喝玩乐的小程序。疫情期间，各种代码场景也给小程序带来了巨大的流量。小程序，比如支付宝小程序、百度小程序、抖音小程序等等，这些APP纷纷跟风，实现了自己的小程序框架。经过五年多的发展，小程序的框架已经趋于稳定。对于前端开发，甚至还有一群专门从事小程序开发和使用的开发人员。相信大家在看文档的时候都有自己的理解，但是小程序的具体结构是怎样的呢？它的原理是什么？我们如何在自己的app上搭建一个小程序系统呢？当然微信webview的方式也可以实现小程序同样的功能，但是相比微信webview，小程序运行速度更快，因为小程序是双线程模型，逻辑和渲染是分离的，不会互相阻塞其他。程序原理在浏览器环境下，我们都知道js代码的执行会阻塞页面的渲染。渲染和脚本执行是相互排斥的，长时间的脚本运行会导致页面无响应。这也是为什么react需要对小程序进行切片操作的原因两个线程将两者分开，渲染和逻辑是独立的，互不影响。这就是为什么上面提到的小程序比普通的H5速度更快的原因。当然，用户必须感觉更快。最重要的是渲染目前比较通用的。四种渲染技术分别是webview渲染、原生渲染、混合渲染、Skyline渲染引擎（新增）。首先，如果使用webview渲染，我们也提到了同一个线程被阻塞导致性能问题。如果使用原生渲染，我们再改小程序代码，还需要用微信客户端发送包，这显然是不可能的。既然它们都不起作用，那么使用混合方法呢？把两者结合起来，比如reactnative就是采用这种方式，那什么是hybrid呢？说白了，一个应用既有原生内容，也有网络内容。原理就是里面有一个UIWebView，里面嵌入了一些网页。这些网页可以跨平台使用，比如ios和Android，作为一个通用的shell就可以了。您可以将微信比作混合应用程序。小程序是一些H5。界面渲染在web层面进行渲染，然后在端提供大量的接口，提供客户端丰富的原生能力，保证web端的体验。一些原生能力可以上网使用，更新比较快。最近微信加了一张效果图染色引擎，为什么要加？主要原因是web发展了这么久。虽然渲染已经做得很好，但是由于历史原因和复杂的渲染过程，其在app中的表现还是存在一些差异。毕竟js总是会阻塞Page渲染，所以skyline是一个新的渲染引擎。skyline创建一个渲染线程负责布局、合成和渲染任务，并在端绘制一个独立的context来运行之前webview承担的js任务，Dom树创建等逻辑。让js不再阻塞页面的渲染，很好的保证了兼容性。但是有些特性不是原生的，有些能力需要在端开发和兼容，比如CSS的calc功能和picker-View组件等需要适配，成本比较高，但这确实是小程序未来的发展方向，可以更好的提升小程序的性能。目前如果没有特别指定，小程序还是采用混合的方式，除了渲染之外，是安全的。快点。对于小程序来说，最重要的就是安全。对于web来说，我可以跳转到任何我想要的页面，比如从我自己的页面跳转到baidu，跳转到juejin，都是很随机的，没有控制，但是对于小程序是做不到的。如果没有对要跳转的内容进行限制，体验会变得非常糟糕。用户信息泄露，事情就变得不可能了。所以，基于这些情况，微信内部屏蔽了一些对dom、跳转、动态脚本执行接口的操作。它只提供一些js脚本执行器，所以小程序提供了一个沙箱。环境，这个环境不能有浏览器相关的操作，而对于客户端，微信小程序本身有内置的js解释引擎，iOS有内置的JavaScriptCore框架，Android使用腾讯x5内核提供的JsCore环境。创建一个独立的线程来执行js代码。所有相关的业务逻辑代码都在这个线程中执行。逻辑相关的内容在这里处理，渲染相关的内容在webview中处理。渲染层是通过逻辑层来控制的。显示，这是小程序双线程模型的表现。既然是双线程，问题就是线程之间的通信有延迟，导致线程之间的通信实际上是异步的。交互也是异步的，所以小程序的API使用了大量的回调方法，比如选择图片wx.chooseImage({count:1,sizeType:['original','compressed'],sourceTtype:['album','camera'],success(res){//tempFilePath可以作为img标签的src属性显示图片consttempFilePaths=res.tempFilePaths}})由于渲染是使用webview完成的，是对的吗？我们直接用html标签就可以了，当然不行，不然我们可以用a标签自己跳转？因此，小程序开发了自己的组件系统，叫做Exparser，本质上是模仿html的集合，只是相对增加了一些自己的能力，比如按钮，使用一些额外的参数来获取用户信息。,map可以直接使用地图的能力，ad的广告能力，通信小程序和app通信原理本质上类似于web和app通信的原理，只是渲染层和逻辑之间有通信layer，因为是双线程架构模式，相比AndroidSimple，无论是逻辑层还是渲染层，都在window对象中注入了一些方法，ios在渲染层使用了messageHandlers特性，而逻辑层将全局原生方法注入到JavaScriptCore框架中，以总结整套原则。根据这些原理和内容基本上可以自己实现一个小程序系统，但是工作量无疑是巨大的。既然这已经是一个成熟的解决方案，那么如何在自己的应用程序中构建一个小程序呢？程序环境如何？市场上已经有很多开源解决方案。毕竟各大厂商都已经有了自己的小程序，容器技术也很成熟，比如常见的FinClip、OpenApp、mPaaS、Donut等。我们以FinClip为例。毕竟FinClip可以运行微信的小程序，可以保证用户体验，拥有大量客户，是国内比较领先的小程序容器化公司。熟悉建行app、工行app等，有一套完整的小程序。管理平台，侧边小程序sdk，自带开发者工具，方便运营、开发、数据分析。像我们上面提到的沙箱环境，双线程的逻辑层和视图层都已经做成了一个通用的方案。所以如果想搭建自己的小程序系统，使用已有的方案，安全省心，希望能给有需要的同学一些参考
