Freadhub 适配原生鸿蒙(Harmony OS NEXT)

前言

Freadhub是由AriesHoo开发维护的一个Flutter开源项目--readhub的非官方产品。

之前Freadhub 手机端已有Androd、iOS版本,随着 原生鸿蒙(Harmony OS NEXT) 的发布,加上社区 SDK 鸿蒙化的推进。笔者感觉是时候适配一下了.

Gitee开源: gitee.com/AriesHoo/fl...

先来个整体效果展示

亮色模式	深色模式

今日古诗	分享面板

图片分享	文字分享

内置浏览	系统浏览

更多内容	主题选择

开始适配

前置条件

首先因为 Harmony版Flutter SDK 只支持Mac arm架构,故需要准备一个 Mac M系列 的 Mac 电脑.

社区文档

很可惜笔者的电脑是不支持的...😂

话说公司应该给升个级了.

那么就走另一条路了,买个支持原生鸿蒙的手机.

根据自己的情况搞一个 Harmony NEXT 支持设备查询

Flutter SDK下载

目前社区版 鸿蒙Flutter SDK 有俩版本 3.7.12 和 3.22.0, Freadhub选择3.7.12,

可以直接下载给自己的Flutter项目加载使用

git clone gitee.com/openharmony... hm3.7.12

也可使用fvm 进行多版本SDK管理通过 fvm use hm3.7.12 切换当前系统使用SDK版本

增加ohos支持

flutter create --platforms=ohos . 执行该命令后会在原项目增加 ohos 文件夹

ohos项目配置

下载并配置 DevEco Studio

在华为官网下载一个 DevEco Studio

该步骤非本文重点,具体安装配置流程参考文章

DevEco Studio 配置 Freadhub ohos项目

第一步:导入 flutter_readhub 项目的 ohos 文件夹,该文件夹是一个完整的 Harmony NEXT项目

如图可见,该项目是完全可直接运行的,类似用Android Studio直接打开android文件夹,也是可以直接运行起来的一样

第二步:配置项目自动签名

因为项目是需要直接运行到真机的,故需要自动签名

需要登录自己的华为开发者账号

打开设备开发者模式并连接电脑

如果电脑未连接设备会是这个样子的

华为官方文档 Flutter社区文档

然后在未配置自动签名项目运行会出现一下问题华为官方解疑

第三步:配置应用bundleName

应用包名,对应 Android 项目的packageName或 applicationId 及 iOS 项目的 bundleId

因为历史原因建议与Android项目作区分

第四步:配置应用的图标及应用名称

配置app.json5

移除 module.json5 中默认添加的 icon 和label

至于原因参考华为官网介绍

v5前华为官方文档

v5后华为官方文档

第五步:配置应用的闪屏页

如下图所示配置 module.json5 中 startWindowIcon

增加闪屏背景dark模式适配,copy一份 base 文件夹改名为dark 并且仅保留 element文件夹及下级color.json文件

修改 dark 文件夹下 color.json 文件里的 start_window_background 的 value 为一个相对较暗的值

至此 DevEco Studio 配置 Freadhub ohos项目完成.

`flutter_readhub`项目适配

插件适配 `ohos` 端

首先通过 Android Studio 打开 flutter_readhub 项目,其中 Flutter Plugins 需要自行判断是否需要在 ohos 端进行适配.

可以在Flutter社区已兼容openharmony插件进行查阅

本项目需要兼容的插件如下

yaml 复制代码

  #  设备信息
  device_info_plus:
    git:
      url: https://gitee.com/openharmony-sig/flutter_plus_plugins.git
      path: packages/device_info_plus/device_info_plus
  #  应用包信息
  package_info_plus:
    git:
      url: https://gitee.com/openharmony-sig/flutter_plus_plugins.git
      path: packages/package_info_plus/package_info_plus
  # WebView-应用内查看资讯详情
  webview_flutter:
    git:
      url: https://gitee.com/openharmony-sig/flutter_packages.git
      path: packages/webview_flutter/webview_flutter
      ref: master
  #跳转系统浏览器/打电话等
  url_launcher:
    git:
      url: https://gitee.com/openharmony-sig/flutter_packages.git
      path: packages/url_launcher/url_launcher
  #动态权限申请-8.0.0版本需在Profile申请需要启用的权限
  permission_handler:
    git:
      url: https://gitee.com/openharmony-sig/flutter_permission_handler.git
      path: permission_handler
  #分享文字及文件-注意保存文件位置
  share:
    git:
      url: https://gitee.com/AriesHoo/plugins.git
      path: packages/share
      ref: master
  #  plus版本
  share_plus:
    git:
      url: https://gitee.com/openharmony-sig/flutter_plus_plugins.git
      path: packages/share_plus/share_plus

其中项目直接引入共计7个需要适配ohos的插件.

又因为 flustars 插件内部引入了 path_provider 和 shared_preferences 插件故需要通过 dependency_overrides 方式进行覆盖.

最后通过命令 flutter pub get 一下,即可查看到对应 ohos 实现的 Flutter Plugins

至此该项目是可以直接运行到 Harmony NEXT 设备上的.最后还需针对ohos的小优化--涉及修改 flutter_readhub 代码层面的.

针对 `ohos` 的 `flutter_readhub` 代码层面优化

分享功能优化

因为之前在 Android 平台增加固定分享某些社交平台如QQ、微信、企业微信、钉钉等,故之前魔改了 Flutter 官方的share 插件,但是支持 ohos 的分享插件是 share_plus 故需要做判断.

首先增加是否是 ohos 的判断方法

其次在share_util中的shareText及 shareFiles 方法修改

然后分享图片截取图片到手机功能,经测试发现在ohos上不需要申请权限即可保存到手机然后进行图片分享.但是没有找到图片在图库的具体位置😓.(不知道是否是存在应用独有的存储空间?),故在权限帮助类增加如下判断

下拉刷新及底部加载更多

因之前做 Android 是 MaterialClassicHeader 刷新头,其他都是 ClassicHeader,这次升级后,Androud的刷新头是 MaterialClassicHeader ,ohos 刷新头脚都是 ArkUI 自带的 LoadingProgress效果. 剩余平台的头脚都是 CupertinoActivityIndicator

这里通过加载 GIF图片效果增加 ohos 的效果,首先从华为官网获取到对应gif资源并放入flutter_readhub项目