作为程序员必须要(xia)精(zhe)进(teng),就单纯有一天突然奇想,能否做到像微信一样在桌面应用也跑上自己的小程序呢?
但这也是一种天马行空的想法,调研了一番,路径一:自己造轮子,这是不可能的,没有这个精力和时间。路径二:寻找目前能够以最低成本实现的方式,直接集成已有的小程序运行时 SDK ,但实话实说,在网上找一了一圈资料并无太多的收获,这样的技术项目并不多。
直到偶然间看到阮一峰大佬的博客介绍到 FinClip 可以支持在移动端和桌面端(Windows、Linux和 macOS)运行小程序,那就随便上手试试。
说干就干!
先一窥这个“小程序容器技术”的原理,顾名思义其实是一种将开发的小程序进行容器化的手段。小程序可以类比为单个服务功能,通过容器化相当于给套上一个壳子, 小程序容器可以当做给“小程序套上一个壳子”。
看官方的介绍 SDK 主要包括应用交互层、安全防护、网络通信控制和安全运行容器四个组件。
细细想下,这样标准容器化的好处,可以保证在开发语言环境存在差异下,“套壳子的小程序”能独立运行的同时,也可以与“其他套壳子的小程序”联动使用。
而至于为什么“套壳子”就能实现,可以简单想象不同开发语言环境下,不同小程序相当于两个说不同语种的人进行协同工作,原本因为语言不通可能会搞砸一些事情。现在“套个壳子”相当于给他们发了翻译机(也就是编译的过程),这下沟通方便了,也不影响自己用本语言工作。
这样来讲,通过在桌面应用集成 SDK ,其实也算是实现了 Windows、macOS 等桌面平台的跨端。
整个桌面端 SDK 的结构如下:
Finclip.zip
│ FinclipWrapper.(dll | so | dylib) # 动态链接库
│ finclip_api.h # 公共接口头文件
│ finclip_const.h
└───finclip/ # 主程序
target_include_directories(TARGET PRIVATE ${FinClip_DIR})
target_link_libraries(TARGET PRIVATE FinClipSDKWrapper)
在配置 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
void 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:
Macos:
运行小程序的整体效果其实和微信打开小程序的效果是差不多的,这个还是比较满意。以下是我桌面端实际运行小程序的结果。
如果做一定适配优化,小程序的展示尺寸还可以适配打开窗口大小,效果也不错。
个人认为一些企业做OA模块化开发还挺适合在桌面端用小程序的,毕竟小程序能够实现动态化的更新,不必硬要通过迭代更新实现。
好了以上就是我瞎折腾的全过程,欢迎各位大佬拍砖。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。