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

FinFish發表於2022-11-14
作為程式設計師必須要(xia)精(zhe)進(teng),就單純有一天突然奇想,能否做到像微信一樣在桌面應用也跑上自己的小程式呢?
但這也是一種天馬行空的想法,調研了一番,路徑一:自己造輪子,這是不可能的,沒有這個精力和時間。路徑二:尋找目前能夠以最低成本實現的方式,直接整合已有的小程式執行時 SDK ,但實話實說,在網上找一了一圈資料並無太多的收穫,這樣的技術專案並不多。
直到偶然間看到一位開發大佬的公眾號講到 FinClip 可以支援在移動端和桌面端(Windows、Linux和 macOS)執行小程式,那就隨便上手試試。


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

說幹就幹!

技術的原理

先一窺這個“小程式容器技術”的原理,顧名思義其實是一種將開發的小程式進行容器化的手段。小程式可以類比為單個服務功能,透過容器化相當於給套上一個殼子, 小程式容器可以當做給“小程式套上一個殼子”。 看官方的介紹 SDK 主要包括應用互動層、安全防護、網路通訊控制和安全執行容器四個元件。
  1. 應用互動層:應用互動層是為了實現業務應用開啟,完成和監管部門指定機構運營平臺的資料互動、感知上報
  2. 安全防護:安全防護元件提供安全保護,檢測執行時環境是否安全,如檢測到被動態除錯則退出業務,防止資料或業務邏輯被惡意破解。
  3. 網路通訊控制:網路通訊控制元件控制小程式的網路訪問,該元件支援黑白名單等功能,可對非白名單訪問請求進行阻斷。
  4. 安全執行容器:安全容器元件提供小程式的執行環境,該元件採用原生 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模組化開發還挺適合在桌面端用小程式的,畢竟小程式能夠實現動態化的更新,不必硬要透過迭代更新實現。
好了以上就是我瞎折騰的全過程,歡迎各位大佬拍磚。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70021577/viewspace-2923270/,如需轉載,請註明出處,否則將追究法律責任。

相關文章