背景

最近我所在的團隊有想在一個 APP 上運行微信小程序，目前這個 APP 是采用 Native+H5 的形式，主要存在以下問題：

• H5不支持本地緩存
• H5無法獲取APP原生的一些系統(tǒng)權(quán)限(類似訪問通訊錄、調(diào)用硬件、訪問藍牙)
• 一個APP往往由 IOS 和 Android 兩個團隊維護，不僅浪費人力，還經(jīng)常因為應(yīng)用商店審核導(dǎo)致發(fā)版不一致

因此，如果我們在 APP 上運行小程序，那就是 Native+小程序 的架構(gòu)，一套代碼跨平臺運行，還可以很方便地使用小程序自身的能力，而且還不會影響 APP 安裝包體積，簡直是普大喜奔！

讓 APP 運行小程序的原理

小程序在 App 上運行的實現(xiàn)原理簡單理解就是通過將小程序文件加載到一個 Web View 中，然后使用小程序引擎解析和執(zhí)行小程序的邏輯。通過通信機制，實現(xiàn)小程序引擎和 Web View 之間的交互，從而讓小程序在 App 中展示和運行。

其中，至少會涉及以下幾個關(guān)鍵步驟：

1. 小程序打包：使用小程序開發(fā)工具將小程序的代碼、資源文件等進行打包，生成一個小程序的包文件。這個包文件包含了小程序的邏輯代碼、頁面結(jié)構(gòu)、樣式表、圖片等資源。
2. 創(chuàng)建 Web View：在 App 中，創(chuàng)建一個 Web View 組件，用于加載和顯示小程序的內(nèi)容。Web View 是一個嵌入式的瀏覽器視圖，可以加載和渲染網(wǎng)頁內(nèi)容。
3. 加載小程序包：將小程序的包文件加載到 Web View 中。這可以通過將小程序包文件的路徑或 URL 設(shè)置為 Web View 的 src 屬性來實現(xiàn)。
4. 小程序引擎解析：小程序引擎會解析小程序的包文件，包括解析小程序的邏輯代碼、頁面結(jié)構(gòu)和樣式表等。它會構(gòu)建小程序的頁面樹，并進行頁面渲染。
5. 通信機制：小程序引擎和 Web View 之間通過一種通信機制進行交互。這種通信機制可以是基于消息傳遞的方式，通過事件、消息或函數(shù)調(diào)用來傳遞數(shù)據(jù)和觸發(fā)操作。
6. 事件處理：小程序引擎會監(jiān)聽用戶的交互事件，例如點擊、滑動等，然后觸發(fā)相應(yīng)的事件處理函數(shù)。這些事件處理函數(shù)可以包含小程序的業(yè)務(wù)邏輯，例如頁面跳轉(zhuǎn)、數(shù)據(jù)更新等。
7. 數(shù)據(jù)綁定：小程序引擎會根據(jù)數(shù)據(jù)綁定的定義，將數(shù)據(jù)和頁面元素進行綁定。當(dāng)數(shù)據(jù)發(fā)生變化時，引擎會自動更新頁面上對應(yīng)的元素。
8. 適配和兼容：由于小程序在 App 中運行，可能會有一些樣式和交互上的差異。因此，需要進行適配和兼容處理，確保小程序在 App 中正常展示和運行。

總的來說，就是需要一個 sdk 來提供小程序的運行環(huán)境，而實現(xiàn)這個 sdk 并沒有那么容易。然后我們調(diào)研了一下，了解到有一個最近在Github上很熱門的前端小程序容器技術(shù) —— Finclip(https://www.finclip.com/)。

它的核心功能就是能夠讓任何APP擁有小程序的運行能力，只需要在你的 App 里面集成它的 SDK，就能加載運行小程序了。除了SDK，同時它還提供一個后臺管理系統(tǒng)，統(tǒng)一管理小程序的上架和下架，以及收集和分析小程序數(shù)據(jù)，對開發(fā)來說，可謂是極其便捷。

FinClip 介紹

FinClip 是一個低成本用于將小程序轉(zhuǎn)換為在自身App運行的優(yōu)秀容器框架之一，其具備以下特性：

• 輕量的小程序SDK；
• 完善的開發(fā)者工具；
• 面向業(yè)務(wù)的全生命周期管理；
• 支持一鍵將小程序轉(zhuǎn)為原生App*；
• 兼容微信小程序語法與登錄體系；
• 支持在 Android 、ios、鴻蒙、Flutter、windows、車機 等系統(tǒng)中集成；

同時，F(xiàn)inClip 也是一個生態(tài)性的協(xié)作平臺，用戶可以與企業(yè)、SDK插件提供商、小程序開發(fā)運營商、云平臺SaaS服務(wù)商協(xié)作，研發(fā)個性化的超級App，其具體的平臺組成圖如下：

云側(cè)代表FinClip 小程序管理后臺，可管理小程序的開發(fā)、上架等全生命周期進行；

端側(cè)代表FinClip 小程序 SDK，代表集成了 FinClip 小程序 SDK 的移動 App 或各類智能設(shè)備，用于向其提供能夠運行小程序的能力；

開發(fā)者工具則主要用于編寫，調(diào)試，上傳，預(yù)覽小程序代碼。

官網(wǎng)的使用文檔也很詳細：https://www.finclip.com/mop/document/runtime-sdk/ios/ios-intro.html?

集成步驟

登錄后臺

首先在管理后臺，創(chuàng)建小程序，生成appID。

在開發(fā)者工具登錄賬號后，選擇之前創(chuàng)建的APPid

然后我導(dǎo)入了之前開發(fā)的微信小程序項目到開發(fā)者工具中：

首次運行的體驗還是很不錯的，從導(dǎo)入項目，到編譯成功速度非?？欤脮r10秒左右。簡單體驗了一下FinClip編輯器，和微信小程序開發(fā)者工具在日常使用上并沒有差異，并未新增學(xué)習(xí)成本。

要在手機預(yù)覽小程序效果，需要使用FinClip APP掃碼

真機體驗了一下，發(fā)現(xiàn)只有獲取用戶登錄狀態(tài)失敗。（畢竟不是在微信上登錄），其他功能體驗起來還是非常流暢的：

真機測試后，發(fā)布到FinClip平臺，看看效果，發(fā)現(xiàn)灰度發(fā)布的功能比較贊：

總結(jié)

當(dāng)前技術(shù)環(huán)境，相對于原生應(yīng)用而言，小程序具有輕量化、無需安裝、開發(fā)門檻低、跨平臺、生態(tài)豐富等優(yōu)勢，對于一些簡單的應(yīng)用場景和快速開發(fā)，小程序是一種不錯的選擇。從各平臺App去看，無論是支付寶、抖音、微信，也都選擇小程序作為動態(tài)化的關(guān)鍵容器。因此，F(xiàn)inClip 確實是一個性價比最高的選擇。