作為程式設計師必須要（xia）精（zhe）進（teng），就單純有一天突然奇想，能否做到像微信一樣在桌面應用也跑上自己的小程式呢？

但這也是一種天馬行空的想法，調研了一番，路徑一：自己造輪子，這是不可能的，沒有這個精力和時間。路徑二：尋找目前能夠以最低成本實現的方式，直接整合已有的小程式執行時 SDK ，但實話實說，在網上找一了一圈資料並無太多的收穫，這樣的技術專案並不多。

直到偶然間看到一位開發大佬的公眾號講到 
FinClip
  可以支援在移動端和桌面端（Windows、Linux和 macOS）執行小程式，那就隨便上手試試。

桌面端執行小程式的簡易實操

說幹就幹！

技術的原理

先一窺這個“小程式容器技術”的原理，顧名思義其實是一種將開發的小程式進行容器化的手段。小程式可以類比為單個服務功能，透過容器化相當於給套上一個殼子， 小程式容器可以當做給“小程式套上一個殼子”。
看官方的介紹 SDK 主要包括應用互動層、安全防護、網路通訊控制和安全執行容器四個元件。

應用互動層：應用互動層是為了實現業務應用開啟，完成和監管部門指定機構運營平臺的資料互動、感知上報
安全防護：安全防護元件提供安全保護，檢測執行時環境是否安全，如檢測到被動態除錯則退出業務，防止資料或業務邏輯被惡意破解。
網路通訊控制：網路通訊控制元件控制小程式的網路訪問，該元件支援黑白名單等功能，可對非白名單訪問請求進行阻斷。
安全執行容器：安全容器元件提供小程式的執行環境，該元件採用原生 Web 渲染核心進行渲染，以確保該模組的業務處理邏輯和宿主完全隔離。

桌面端執行小程式的簡易實操

細細想下，這樣標準容器化的好處，可以保證在開發語言環境存在差異下，“套殼子的小程式”能獨立執行的同時，也可以與“其他套殼子的小程式”聯動使用。

而至於為什麼“套殼子”就能實現，可以簡單想象不同開發語言環境下，不同小程式相當於兩個說不同語種的人進行協同工作，原本因為語言不通可能會搞砸一些事情。現在“套個殼子”相當於給他們發了翻譯機（也就是編譯的過程），這下溝通方便了，也不影響自己用本語言工作。

這樣來講，透過在桌面應用整合 SDK ，其實也算是實現了 Windows、macOS 等桌面平臺的跨端。

上手開搞

整個桌面端 SDK 的結構如下：

Finclip.zip│ FinclipWrapper.(dll | so | dylib) # 動態連結庫│ finclip_api.h # 公共介面標頭檔案│ finclip_const.h └───finclip/ # 主程式

引入 SDK

target_include_directories(TARGET PRIVATE ${FinClip_DIR}) target_link_libraries(TARGET PRIVATE FinClipSDKWrapper)

配置 SDK

在配置 SDK 前還需要在 FinClip 的後臺上架小程式，我上架了官方的示例小程式程式碼包，也嘗試了直接把微信小程式的程式碼包上傳到 IDE 中的，發現也能相容。
在後臺獲取對應的 SDK KEY 與 SDK SECRET。

auto *factory = finclip_get_packer_factory();auto *packer = finclip_packer_factory_get_config_packer(factory);finclip_initialize(packer);FinclipParams *config = finclip_create_params();finclip_params_set(config, FINCLIP_CONFIG_APPSTORE, app_store);finclip_params_set(config, FINCLIP_CONFIG_APPKEY, appkey.c_str());finclip_params_set(config, FINCLIP_CONFIG_SECRET, secret.c_str());finclip_params_set(config, FINCLIP_CONFIG_DOMAIN, domain.c_str());finclip_params_set(config, FINCLIP_CONFIG_EXE_PATH, exe_path.c_str());

其實就這兩步就已經完成了SDK的整合工作，還是非常簡單方便的。接下來對其使用示例進行完善。

啟動小程式

finclip_start_applet(app_store, appid.c_str());

嵌入小程式

finclip_start_applet_embed(app_store, appid.c_str(), hwnd);

註冊自定義API

// 定義自定義APIvoid WebApiExample(const char *event, const char *param, void *input, void *res) { auto *self = static_cast<MainWindow *>(input); finclip_params_set(res, "hello", "web api");}void AppApiExample(const char *event, const char *param, void *input, void *res) { auto *self = static_cast<MainWindow *>(input); finclip_params_set(res, "hello", "app api");} // 註冊自定義API fin_register_api(packer, kWebView, "test", WebApiExample, this); fin_register_api(packer, kApplet, "test", AppApiExample, this);

大功基本告成，整體感受還是比較簡單的，並無過多複雜的操作，看得出官方還是做了很好的最佳化。不過需要注意的點：

FinClip 的 桌面端 SDK 基於qt 5.15 和 Chromium Embedded Framework 開發，現在支援了以下 Windows 和macOS 系統

Windows:

Windows 10
Windows 8.1
Windows 7

Macos:

Macos 10.13

看看效果

執行小程式的整體效果其實和微信開啟小程式的效果是差不多的，這個還是比較滿意。以下是我桌面端實際執行小程式的結果。

桌面端執行小程式的簡易實操

如果做一定適配最佳化，小程式的展示尺寸還可以適配開啟視窗大小，效果也不錯。

桌面端執行小程式的簡易實操

個人認為一些企業做OA模組化開發還挺適合在桌面端用小程式的，畢竟小程式能夠實現動態化的更新，不必硬要透過迭代更新實現。

好了以上就是我瞎折騰的全過程，歡迎各位大佬拍磚。

桌面端執行小程式的簡易實操

技術的原理

上手開搞

引入 SDK

配置 SDK

啟動小程式

嵌入小程式

註冊自定義API

看看效果

相關文章