实践分享:30 分钟在电脑端运行小程序
预计实现效果:在电脑桌面端实现小程序运行
技术实现:小程序容器技术实现(案例使用 FinClip SDK)
技术的原理:
该 SDK 主要包括应用交互层、安全防护、网络通信控制和安全运行容器四个组件。
应用交互层:应用交互层是为了实现业务应用打开,完成和监管部门指定机构运营平台的数据交互、感知上报。
安全防护:安全防护组件提供安全保护,检测运行时环境是否安全,如检测到被动态调试则退出业务,防止数据或业务逻辑被恶意破解。
网络通信控制:网络通信控制组件控制小程序的网络访问,该组件支持黑白名单等功能,可对非白名单访问请求进行阻断。
安全运行容器:安全容器组件提供小程序的运行环境,该组件采用原生 Web 渲染内核进行渲染,以确保该模块的业务处理逻辑和宿主完全隔离。
具体操作:
整个桌面端 SDK 的结构如下:
引入 SDK
配置 SDK
在配置 SDK 前还需要在 FinClip 的后台上架小程序,我上架了官方的示例小程序代码包,也尝试了直接把微信小程序的代码包上传到 IDE 中的,发现也能兼容。
在后台获取对应的 SDK KEY 与 SDK SECRET。
其实就这两步就已经完成了 SDK 的集成工作,还是非常简单方便的。接下来对其使用示例进行完善。
启动小程序
finclip_start_applet(app_store, appid.c_str());
嵌入小程序
finclip_start_applet_embed(app_store, appid.c_str(), hwnd);
注册自定义 AP
// 定义自定义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:
Windows 10
Windows 8.1
Windows 7
Macos:
Macos 10.13
看看效果
运行小程序的整体效果其实和微信打开小程序的效果是差不多的,这个还是比较满意。以下是我桌面端实际运行小程序的结果。
如果做一定适配优化,小程序的展示尺寸还可以适配打开窗口大小,效果也不错。
个人认为一些企业做 OA 模块化开发还挺适合在桌面端用小程序的,毕竟小程序能够实现动态化的更新,不必硬要通过迭代更新实现。
评论