FlutterPackages中的animations库升级适配Flutter3.27
Flutter 3.27 支持的 Dart 版本为 3.6,本文说明如何将 TPC中的 animations 库升级适配Flutter 3.27
升级步骤:
- 找到上有 animations 库的最新版本及源码,并下载至本地解压
打开 https://github.com/flutter/packages,点击 Doanlowd Zip,解压到本地。
- 克隆 TPC 中的 flutter_packages 仓库
克隆之前我们先 Fork 一份仓库至自己的组织中,以便后续提交 PR 使用。克隆成功后,将 Fork 后的仓库克隆至本地
1 | git clone https://gitcode.com/nutpi/flutter_packages.git |
- 新建一个分支
按照命名规则,新建分支为:br_animations-v2.0.11_ohos
- 将解压的 animations 中的文件同步覆盖到 TPC 中的 flutter_packages/animations 文件夹下
需要注意的是,这里需要逐个文件覆盖,需要保留 TPC 仓库中的 ohos 相关文件目录
- 测试代码
5.1 打开 example 目录,首先对 ohos 项目进行签名配置
5.2 使用 Deveco 打开 example/ohos 目录,然后修改配置签名
5.3 运行 lib/main.dart 代码,测试功能是否正常
提交代码至自己的组织中
提交 PR
鸿蒙版FlutterSDK3.27.4可以使用了
近日,OpenHarmony 社区的 Flutter 仓库创建了 Flutter 3.27.4-dev 分支,这标志着 鸿蒙版 Flutter SDK 3.27 进入开发阶段。
值得注意的是,Flutter 等三方框架从 SIG 组织中分离出来,使用单独的 TPC(Third Party Components)来管理,专门存放开源三方库,代码管理更加清晰,但社区管理上,TPC 仍然由 OpenHarmony SIG 主导。
准备工作
这里我们使用 FVM 管理Flutter SDK
首先进入 fvm/versions 目录下,克隆 3.27.4-dev 分支的 flutter_flutter 仓库
1 | cd ~/fvm/versions |
切换 Flutter SDK
接下来进入自己的项目,使用 fvm 切换版本
1 | fvm use custom_3.27.4 |
参考资料
阿里云 Web应用防火墙 3.0 使用 CNAME 接入传统负载均衡 CLB
开通 WAF
首先找到 Web应用防火墙,然后点击开通。
添加域名
开通后打开接入管理,点击 CNAME 接入
本文章中的示例域名为 api.baidu.com,不代表实际域名,请自行替换。
接下来输入需要接入的域名
回到域名解析管理中,按照提示添加 TXT 记录
接下来,添加服务器地址,这里的地址就是防护的服务器/负载均衡的公网 IP地址
点击提交后,同样根据页面提示,添加 CNAME 记录
回到域名解析控制台,添加 CNAME 记录
检测 CNAME 是否生效
- 在 Window 上,可以使用 nslookup 进行测试
1 | nslookup -qt=CNAME api.baidu.com |
如果看到 api.baidu.com.c.yundunwaf5.com.
相关的输出,则说明 CNAME 配置成功。
- 在 Linux/Mac 上,可以使用 dig 进行测试
1 | dig api.baidu.com CNAME |
1 | ➜ dig api.baidu.com CNAME |
如上所示,看到 api.baidu.com.c.yundunwaf5.com.
输出,则说明 CNAME 配置成功。
使用GithubActions和腾讯CloudBase自动发布静态网页
腾讯 CloudBase 可以用于托管静态网站,服务开通之后,使用 CloudBase CLI 可以将本地静态网站上传到 CloudBase,并生成相应的访问域名。
配置 Workflow
创建 .github/workflows/deploy.yml 文件, 编辑内容如下:
1 | name: Deploy to CloudBase Static Hosting |
这里,我们首先配置好 node 环境,然后安装 CloudBase CLI,通过 tcb login 命令登录 CloudBase,然后使用 tcb hosting deploy 命令将静态网站部署到 CloudBase。
可以看到,这里用到了几个环境变量,如 TCB_SECRET_ID、TCB_SECRET_KEY、TCB_ENV_ID。 接下来,我们需要在项目设置中添加环境变量。
配置
- 点击 Settings 按钮,进入项目设置页面。找到 Secrets and Variables 选项展开,点击 Actions,在
Repository secrets
处点击
New repository secret
按钮,准备添加变量。
- 添加变量,分别添加 TCB_SECRET_ID、TCB_SECRET_KEY、TCB_ENV_ID。
TCB_SECRET_ID、TCB_SECRET_KEY,通过控制台/访问管理,找到访问密钥管理,添加。
TCB_ENV_ID 为服务创建好之后的环境 ID。
参考资料
鸿蒙Flutter实战:01-搭建开发环境
准备工作
1.安装 DevEco Studio NEXT IDE, 注意版本应该是 Next,当前最新的是 Beta3
2.安装Git, 如果要同时适配安卓,需要安装Android Studio; 如果要适配ios,需要安装Xcode
Mac 安装(推荐)
环境变量配置
1 | # Flutter Mirror |
Windows 安装
配置用户变量
1 | FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn |
配置环境变量
编辑 PATH,添加以下路径
1 | C:\Program Files\Huawei\DevEco Studio\tools\ohpm\bin |
管理多个 Flutter 版本
如果在项目开发中,需要使用多个 Flutter 版本,可以考虑使用 fvm
- 安装 FVM
- 使用 fvm 官方 flutter 版本
1 | fvm install 3.22.0 |
- 安装自定义鸿蒙版本,进入 fvm/version 目录,通常位于用户目录下,如
~/fvm/versions/3.22.0
,
拷贝仓库并重命名为custom_x.y.z
的名字
1 | git clone -b dev https://gitcode.com/openharmony-sig/flutter_flutter.git custom_3.7.12 |
注意命名格式必须为
custom_x.y.z
,即必须以 custom_ 开头,后面跟三位数字版本号,如custom_3.7.12
- 在项目中使用单独的 flutter sdk 版本, 在项目目录中执行:
1 | fvm use custom_3.7.12 |
常见问题
- 运行 flutter doctor 出现
Error: Unable to find git in your PATH.
执行以下命令
1 | git config --global --add safe.directory '*' |
案例
Flutter 鸿蒙交流群
【flutter鸿蒙技术交流群】
目前 Flutter 鸿蒙已经跑通,但仍然存在一些潜在的坑需要解决和处理,欢迎大家一起分享交流
请扫码加小助手进群:
备注:鸿蒙Flutter
wx:zacksleo
参考资料
鸿蒙Flutter实战:02-Windows环境搭建踩坑指南
环境搭建
1. 下载Flutter SDK,配置环境变量
鸿蒙 Flutter SDK 需要在 Gitee 下载。目前建议下载 dev 分支代码。
需要配置以下用户变量
注意鸿蒙开发需要安装Java和配置相关变量
1 | # flutter sdk 镜像 |
配置环境变量
编辑 PATH,添加以下路径,鸿蒙开发需要配置ohpm, hvigor及node
1 | C:\Program Files\Huawei\DevEco Studio\tools\ohpm\bin |
SDK 下载完成,环境变量配置妥当后,使用 flutter doctor 检查各项是否通过。
在命令行中,运行 ohpm -v, hvigorw -v, node -v 查看是否能使用,确保各个依赖的工具,其 PATH 配置正确。
使用 echo %DEVECO_SDK_HOME%
, echo %JAVA_HOME%
等检查用户变量是否生效。
环境变量发生变化时,需要重启命令行工具。
另外,需要注意的是,优先添加用户环境变量,如果是系统环境变量,可能需要注销登录或者重启系统,否则配置可能不生效。
2. 为了避免意外情况,将新建项目位置,与SDK使用相同的磁盘,如D盘。
否则可能出现 package 找不到的情况。
另外,项目目录不要过深,不然会因路径太长导致编译可能失败。
3. VsCode 无法识别设备
用 DevEco 打开项目,待项目分析完成后,Vscode 中的设备应该可以出来了。
4. 插件Har包找不到
打开DevEco运行时,出现类似以下错误
1 | hpm ERROR: missing: flutter_inappwebview_ohos@/.../ohos/har/flutter_inappwebview_ohos.har, required by entry@1.0.0 |
此时需要在Flutter项目下运行 flutter run
或 flutter build
以生成插件的 har 包
4. 如何自定义显示 DevEco 打开 ohos 后的项目名称
每个鸿蒙Flutter项目,用DevEco打开ohos工程后,默认显示的工程名称为 ohos
,如果想自定义显示的工程名称,可以参考以下步骤:
在 ohos/.idea 目录下,新建一个 .name
文件,写入项目名称即可。
鸿蒙Flutter实战:03-鸿蒙Flutter开发中集成Webview
主要有两种方案
使用第三方库
如 使用flutter_inappwebview
插件,在 pubspec.lock 文件中配置:
1 | flutter_inappwebview: |
或者使用 webview_flutter 插件
1 | webview_flutter: |
编写原生 ArkTS 代码实现 PlatformView
创建 entryablitiy
在 src/main/module.json5中配置ablitiy
1 | "abilities": [ |
cat src/main/entryablity/CustomFactory.ets
1 | import { BinaryMessenger } from '@ohos/flutter_ohos/src/main/ets/plugin/common/BinaryMessenger'; |
cat src/main/entryablity/CustomPlugin.ets
1 | import { FlutterPlugin, |
cat src/main/entryablity/CustomView.ets
1 | import MethodChannel, { |
cat src/main/entryablity/EntryAbility.ets
1 | import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos'; |
创建 pages
cat src/main/ets/pages/index.ets
1 | import common from '@ohos.app.ability.common'; |
在src/main/resources/base/profile/main_page.json中配置路由
1 | { |
在 Dart 侧调用该 PlatformView
1 | Scaffold( |
参考资料
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
在《鸿蒙 Flutter 开发中集成 Webview》,介绍了如果在 Flutter 中集成 Webview. 本文则为 Webview 的调试方法。
配置 Webview
CustomView.ets 文件中,在生命周期aboutToAppear处配置允许调试:
1 | aboutToAppear() { |
找到 devtools 的端口
运行 App,使用 hdc 命令连接设备,查找相关端口
1 | # 连接设备 |
如上面所示,webview_devtools_remote_43406 即为我们要调试的页面
开启端口转发
将设备中的端口转发到开发电脑上
1 | hdc fport tcp:9222 localabstract:webview_devtools_remote_43406 |
在 Chrome 中找打 Webview 并开始调试
在 Chrome 中打开 chrome://inspect/#devices
页面,观察页面中RemoteTarget 处出现了相关页面
选择需要调度的页面,点击 inspect,弹出 DevTools 窗口,开启页面调度
其他
如果要在 Webview 注入 js 代码,可在 Web 组件配置处使用runJavaScript
方法注入 JavaScript 脚本,如
1 | Web({src: 'https://baidu.com', controller: this.webviewController}) |
参考资料
鸿蒙Flutter实战:05-使用第三方插件
在鸿蒙Flutter开发中,如果涉及到使用原生功能,就要使用插件。使用插件有两种方式,一种是自己编写原生ArkTS代码,在Dart侧调用。另外一种是使用第三方代码。
方式一:编写原生 ArkTS 代码
该方案可以使用 PlatformView 或者 MethodChannel 调用。
PlatformView 即为在 Flutter 侧创建一个 View,然后在 Native 侧渲染。PlatformView 封装了底层的 View。
MethodChannel 即通过 MethodClannel 调用原生Native 方法。
具体操作可以分别参考文章 鸿蒙 Flutter 开发中集成 Webview 和 使用 ArkTs 开发 Flutter 鸿蒙平台插件
方式二:使用第三方代码
1.在pub.flutter.dev/github/gitee/ophm查找使用的插件,如果插件已经适配鸿蒙,则可以像其他Flutter插件一样正常使用。
2.如果插件尚未适配鸿蒙,则需要寻找适配的插件库。配置方法如下
3.如果使用的第三方插件,其底层以的库没有适配鸿蒙,则需要通过overrider配置其鸿蒙化的替代插件,否则会在运行时报错。如下面所示:
1 | dependencies: |
这里需要注意的时,如果不存在依赖冲突,dependency_overrides 可能不生效。也就是说,查看 pubspec.lock 文件,发现依赖的插件库,不存在 **_ohos 库,则说明 overrides不生效,此时使用以下方式,修改 pubspec_overrides.yaml 文件,手动添加文件。
如果 overrides 不生效, 打开 pubspec_overrides.yaml,添加以下内容,再次运行 pub get, 发现 pubspec.lock 成功添加了 **_ohos 库。
1 | dependency_overrides: |
另外,如果没有找到使用的鸿蒙化插件,则可以考虑自行编写垮端调用代码,或者编写新的插件库,作为原插件库的特定平台实现。