打赏

第二步:已有Flutter项目如何支持鸿蒙系统(记录笔记 抄)

配置Flutter环境

下载OpenHarmony 组织提供的Flutter仓库

 
bash
代码解读
复制代码
git clone https://gitee.com/openharmony-sig/flutter_flutter.git

clone下载完成之后,可以切换到master或者dev分支, dev更新会及时些,现阶段可以作为学习分支。

然后配置环境变量

 
bash
代码解读
复制代码
export PATH="$PATH":"/pathtoflutter/bin"

在终端输入命令行 flutter doctor -v, 如果检查成功则代表针对鸿蒙系统的Flutter环境配置没问题。

下载鸿蒙开发工具DevEco Studio, 这个之前的文章提过了,不再多说。

环境搭建好,话不多说,开始写代码

开始实操

  1. 在github随便找了一个项目为例, 还行先把项目clone下来

 
bash
代码解读
复制代码
git clone https://github.com/jayden320/flutter_shuqi
cd flutter_shuqi

clone成功之后,使用Android Studio打开项目。

  1. 在一个空白目录执行以下命令,创建一个同名的项目

 
lua
代码解读
复制代码
flutter create --platforms ohos,ios,android flutter_shuqi
cd flutter_shuqi

进入新项目的目录,发现多了一个鸿蒙系统代码的文件夹,然后把这个ohos复制到第一步clone下来的目录

  1. 再回到第一步使用Android Studio打开的项目,可以发现多了一个ohos文件夹。

  1. 链接鸿蒙系统真机或者模拟器,执行flutter run

可能有些伙伴会有疑问,为什么把文件夹复制过来就可以正常运行了,那是因为我们目前使用的是鸿蒙提供了Flutter, 他们对Flutter Tools进行了修改,当使用flutter pub getflutter run等命令。这些命令行的内部已经帮我们做了这些事情,他会去自动查找ohos目录,并生成相应的代码和.har包,从而确保可以支持鸿蒙系统。

这个时候,正常会报签名错误。看下面的截图可以发现,修复方式,就是使用DevDco Studio打开flutter_shuqi/ohos项目就行自动化签名即可。

  1. 开始自动签名

进入下面的操作面板,使用自己华为开发者账号登录之后勾选自动生成签名即可。

  1. 再次flutter run

签名成功之后在回到Android Stuido,再链接鸿蒙系统真机flutter run。这就说明已经成功跑起来了。

正常情况下会遇到一些问题,导致项目可以在鸿蒙系统上跑起来,但是显示空白。

解决页面空白

  1. 修改environment中的sdk版本

因为OpenHarmony SIG是基于Flutter 3.7.12版本修改的,如果有些项目中使用了更高的版本,需要修改pubspec.yaml文件,把sdk环境最低版本降到2.19.6以下就行。

 
vbnet
代码解读
复制代码
environment:
  sdk: '>=2.17.0 <3.0.0'

2. ### 如何判断是鸿蒙系统

 
dart
代码解读
复制代码
import 'dart:io';

static bool get isOHOS => Platform.operatingSystem == "ohos" 

3. ### 第三方库没有支持鸿蒙系统,怎么办?

比如常见的shared_preferences,device_info,path_provider,这些库一般的Flutter项目都会使用,所以OpenHarmony SIG组织已经对这些库做了一些支持。大家可以点击查看

然后如下方式进行修改就行。修改完了之后执行 flutter pub get 更新本地代码。

改了上面的shared_preferences库,就可以正常进入项目了,不过显示图片还有点问题。

image.png

图片显示不出来,一般都是path_provider的问题,因为图片需要缓存到本地沙盒,相应改一下就行,不过有时候,有些库相互引用,导致修改比较麻烦,好在Flutter提供了提供了dependency_overrides方式,可以覆盖第三方库的最终地址。里面覆盖了path_providerpackage_info_pluspermission_handlerdevice_info_plusconnectivity_plus。这些库都是鸿蒙开源组织已经修改好了的。

 
yaml
代码解读
复制代码
dependency_overrides:
  path_provider:
    git:
      url: https://gitee.com/openharmony-sig/flutter_packages.git
      path: "packages/path_provider/path_provider"
  package_info_plus:
    git:
      url: https://gitee.com/openharmony-sig/flutter_plus_plugins.git
      path: packages/package_info_plus/package_info_plus
      ref: a1347adcca3a46346a6ddd127cebcec9970cad6c
  permission_handler:
    git:
      url: https://gitee.com/openharmony-sig/flutter_permission_handler.git
      path: permission_handler
  device_info_plus:
    git:
      url: https://gitee.com/openharmony-sig/flutter_plus_plugins.git
      path: packages/device_info_plus/device_info_plus
      ref: a1347adcca3a46346a6ddd127cebcec9970cad6c
  connectivity_plus:
    git:
      url: https://gitee.com/openharmony-sig/flutter_plus_plugins
      path: packages/connectivity_plus/connectivity_plus
      ref: a1347adcca3a46346a6ddd127cebcec9970cad6c

flutter pub get之后,再次运行,基本上就可以使用。本来想放视频演示下,结果上传视频比较麻烦,就截了视频里面的几张图片,可以大致看看效果。想自己跑的话,下文也把源码push到gitee了。

image.png image.png image.png

支持鸿蒙的仓库已经提交到该地址。感谢原作者,我拿过来只是为了演示项目。

总结

大概花了不到半天的时间,就可以把一个已有的Flutter项目来支持原生鸿蒙系统,这个迁移成本还是不太高的,对于一些纯Dart写的第三方库可以直接使用,也无需适配。当然还会有一些其他的问题,比如鸿蒙没有覆写的第三方插件库,还有一些鸿蒙系统专属特性,这就需要我们自己去写一些鸿蒙原生代码,但是其实难度也不高。


作者:星河滚烫Leaf
链接:https://juejin.cn/post/7405153695539396617
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
posted @   YY2000  阅读(25)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示