首页 > 编程语言 >技术干货分享:实现app中跑自己小程序的最低可实现方式

技术干货分享:实现app中跑自己小程序的最低可实现方式

时间:2023-10-24 15:25:26浏览次数:43  
标签:set app 程序 干货 中跑 finclip params config SDK

微信作为超级APP,除了庞大的用户群体外,更让人一直模仿便是:在桌面应用上如何跑自己的小程序?那么作为一名程序员,自从有了这个想法以后,就想着如何把他变成现实。但是,目前调研了一圈后发现,基本没有可能自己完成,所以基本只能依靠其他工具包来完成。直到偶然间看到一位开发大佬的公众号讲到 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

// 定义自定义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模块化开发还挺适合在桌面端用小程序的,毕竟小程序能够实现动态化的更新,不必硬要通过迭代更新实现。

好了以上就是我瞎折腾的全过程,欢迎各位大佬拍砖。

标签:set,app,程序,干货,中跑,finclip,params,config,SDK
From: https://www.cnblogs.com/Xxx1m/p/17784864.html

相关文章

  • 反向兼容问题:多平台小程序如何集成到自自有app
    说到小程序,大部分的读者第一反应,可能是微信小程序、支付宝小程序。确实,以前小程序这种生态只有巨头才玩的起。但现在,任何企业,甚至是个人,都能低成本地在自己的App添加运行小程序的能力,可以自主建设小程序生态、发布管理小程序内容。小程序类技术的企业商用,意味着:企业拥有了和互......
  • uniapp h5低版本Android显示空白
    前言:uniapp写的H5访问一直空白,打包app就可以正常显示,排查说是箭头函数低版本不支持,一顿操作npm,还是一样空白。最后:需要发行打包h5才能正常访问,服了也没告诉我啊。注:打包出来访问报错UncaughtSyntaxError:Unexpectedtoken'<',访问空白问题,在manifest.json文件中添加如图所示......
  • LambdaUpdateWrapper 自定义修改
    当我们想要在原有的数据上添加新的数据的时候,我们需要一个更新操作,但是<Iservice>接口一般是根据ID进行修改当我们需要根据指定的条件设置值时,就需要自己写SQL但是这个办法会出现SQL错误并且很麻烦所以我们可以自定义一个wrapper来进行修改。 这是全部的代码 这是我们要......
  • java动态创建es 及mapping
    publicCreateIndexResponsecreateIndexWithMapping(Stringindex,Map<String,String>mapping){CreateIndexResponseresponse=null;try{CreateIndexRequestrequest=newCreateIndexRequest(index);request.settings(Settings.b......
  • Apple开发_打印一个实例对象中的属性与值,包括在父类中的
    #import<objc/runtime.h>//打印一个实例对象中的属性与值,包括在父类中的-(void)print_Self_Properties{//DEBUG模式下打印日志,当前行#ifdefDEBUGunsignedintcount=0;Classgc_class=[selfclass];GCLog(@"统计开始⌛️")NSMutabl......
  • 直播带货APP开发指南:从创意到实现
    在数字时代,直播带货成为了一个热门的商业模式,吸引了数百万消费者和企业。随着社交媒体和电子商务的快速发展,许多企业和个体创业者都开始探索直播带货APP的开发。本文将引导您完成直播带货APP的开发,从创意阶段到实际实现。一、理解直播带货的概念在着手开发之前,您需要深入了解什么是......
  • uniapp引入H5调试vConsole
    在真机环境下调试移动端H5的时候,无法像浏览器一样打开控制台进行console调试,那么我们可以在前端项目中引入vconsole,便于我们在真机环境下调试移动端H5项目vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。详细文档可查看:https://gitee.com/mirrors/vConsole/功......
  • hc32f4a0 bootloader跳转app后中断异常
    起因从HC32F460上移植bootloader到HC32F4A0上后,应用程序无法正常使用。主要代码如下:voidexecute_user_code(uint32_tappxaddr){uint32_tJumpAddress;sram_size=(*(uint32_t*)appxaddr)-0x1FFF8000;//differentsramadresswithotherMCUif(sram_size<=0x......
  • uniapp项目引入uView-ui
    通过npm下载//如果您的根目录没有package.json文件的话,请先执行如下命令://npminit-ynpminstalluview-ui//更新//npmupdateuview-ui配置步骤1.引入uView主JS库在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在importVue之后。//main.j......
  • [924] ArcGIS Pro Mapping Module - arcpy.mp
    ref:Introductiontoarcpy.mpref:Gettingstartedwitharcpy.mptutorialref:Guidelinesforarcpy.mpref:Alphabeticallistofarcpy.mpfunctionsref:Alphabeticallistofarcpy.mpclassesref:SQLreferenceforqueryexpressionsusedinArcGISThefol......