App开发Flutter支持Harmony OS Next方案

1. 背景

由于当前部门使用Flutter框架进行开发,支持生成AndroidiOS两端的App应用。现在鸿蒙系统计划完全去掉AOSP核心代码,将无法支持Android应用。因此,鸿蒙手机接下来只能安装鸿蒙App应用。鉴于此,从长远来看,部门App后续也需要支持鸿蒙系统。那么,如何从成本和可维护性方面考虑后续的开发模式?可以兼顾到AndroidiOS和鸿蒙系统,同时老项目又能支持在鸿蒙手机上运行?重新开发鸿蒙版本?显然不切实际。

2. 解决方案

2.1 方案一:Flutter for OpenHarmony

https://gitee.com/openharmony-sig/flutter_flutter

鸿蒙官方计划对Flutter进行反向适配,即基于Flutter SDK的稳定版本进行拓展,使其能够在鸿蒙DevEco Studio上构建和生成鸿蒙App应用。

2.1.1 优势

  1. 官方支持。
  2. Flutter源码直接可用,只需简单适配,成本低。

2.1.2 劣势

  1. 因使用 Flutter版本为 3.7,与当前最新 3.24版本相差过大,加上 Flutter迭代特别频繁,很多开发方式、组件都在不断变化,后续要使用新的 Flutter特性,可能不会那么容易。
  2. Flutter正在考虑使用自研的图形渲染引擎 Impeller替换掉 Skia,这无疑又加大了更多的变数。最后,可能会变成多个分支进行维护。
  3. 部门已有项目,使用的 Flutter版本都是最新的,可能是没办法兼容的。除非新项目统一使用这个 3.7版本的 Flutter SDK来开发。

2.2 方案二:ArkUI-X 跨平台框架

https://gitee.com/arkui-x

ArkUI-X扩展ArkUI开发框架到多个OS平台,让开发者基于一套主代码,就可以构建支持多平台的精美、高性能应用。目前支持OpenHarmonyHarmonyOSAndroidiOS,后续会逐步增加更多平台支持,可以简单理解为鸿蒙版的Flutter

2.2.1 优势

  1. 官方支持。
  2. 鸿蒙版的 Flutter

2.2.2 劣势

  1. 有学习成本,虽然鸿蒙和 Flutter是有一些共性的,学习成本相比之下不会太高,但是毕竟是新的开发模式,各种各样的知识和问题都是需要积累和时间的。
  2. 有开发成本,已有的 Flutter项目需要重新开发。
  3. 生态各方面还处于初期,还未成熟和完善,也不适合立马接入商业项目应用。

2.3 方案三:Flutter Web【推荐】

http://192.168.24.10/appweb/index.html

通过Flutter Web可以部署在网页上,然后在手机浏览器上使用,并设置为全屏,则可以达到和App一样的使用效果。

2.3.1 优势

  1. 无开发成本。
  2. 使用时无需安装。
  3. 与系统无关,只要有浏览器就可使用。

2.3.2 劣势

  1. 需要说服使用鸿蒙手机的客户接受这种使用方式。
  2. 各手机浏览器需要支持全屏功能,不过可以代码实现,检测到当前是手机访问,则自动全屏即可。
  3. 考虑到毕竟是在网页上使用,体验可能不如 App,但是现在手机性能、网络访问各方面发展都很不错,这方面应该不会特别明显。
  4. 不联网的项目怎么办?可以基于鸿蒙开发一个基于 WebView的简单手机浏览器,并加载本地 Flutter Web部署的包,打开这个应用就可访问。
  5. 额外多一些适配的工作,但不会很多, Flutter项目开发,需同时考虑兼容 Web端。

2.4 方案四:Flutter 官方支持 HarmonyOS

Flutter官方暂没有支持HarmonyOS的计划,但是这个问答 《HarmonyOS Support》 毕竟是几年前了,以后的发展并不好说,如果鸿蒙系统大规模发展起来,发展到可以倒逼Flutter官方支持也不是没有可能。

3. 结论

到底选哪个方案,不是绝对的,只能是阶段性的,因为很多方案都还存在变数。考虑到部门的App项目情况,推荐选择【方案三】,但是方案一、方案二可以在后续进行这方面的调研和准备工作,伺机而动。

本文由mdnice多平台发布

相关推荐
啪叽2 分钟前
JavaScript可选链操作符(?.)的实用指南
前端·javascript
Ian在掘金3 分钟前
bat+python实现easy connect自动连接
前端·python
代码搬运媛5 分钟前
【react实战】如何实现监听窗口大小变化
前端·javascript·react.js
小桥风满袖7 分钟前
Three.js-硬要自学系列30之专项学习环境光
前端·css·three.js
Luckyfif10 分钟前
🤯由 性能指标 散发开来的 Performance API 被问爆了呀
前端·面试·性能优化
咸虾米13 分钟前
在uniCloud云对象内使用unipay的微信退款出现错误“uniPayCo.refund Error: token校验未通过”的解决方案
前端·后端
前端Hardy20 分钟前
HTML&CSS:产品卡片动画效果
前端·javascript
货拉拉技术25 分钟前
货拉拉开源:鸿蒙路由 TheRouter
android·前端·harmonyos
中杯可乐多加冰27 分钟前
工业4.0数字孪生新引擎:星图云开发者平台全景评测
前端·低代码·掘金·金石计划
云边小卖铺.34 分钟前
运行vue项目报错 errors and 0 warnings potentially fixable with the `--fix` option.
前端·javascript·vue.js