Flutter - 热更新 Shorebird 1.0 正式版来了 🐦

欢迎关注微信公众号:FSA全栈行动 👋

一、概述

等了这么久,就在 4月9号 这一天,Shorebird1.0 正式版终于来了!本次最关心的还是对 iOS 的热更新支持得如何了,因为在之前的版本中,iOS 的性能表现简直差到无法使用~

先给个结论:iOS 端终于能用了!通过测试,iOS 端打完补丁后的性能表现已达上线水平 🥳

需要注意的是:

iOS 热更新稳定版本需要使用最新版本的 Shorebird CLI (1.0.0) 和最新稳定版本的 Flutter (3.19.5)

但是

对,但是,先不要着急用!

二、踩坑

我在发布的当天就升级到 1.0 来尝尝鲜,结果在打完补丁后,有几个页面灰屏了!!!

当时脑袋嗡嗡的,我就只改了文本的颜色,不至于吧~ 😕

根据控制台的报错的内容定位到了项目里以下两处代码(已简化)

dart 复制代码
bool _isExist(SomeType type) {
  try {
    final model = state.models.firstWhere(
      (element) => element.type == type,
    );
    return true;
  } catch (e) {
    return false;
  }
}
dart 复制代码
String value = '';
...
try {
  return json.decode(value);
} catch (e) {
  return null;
}

推测 tryCatch 失效了,然后我建了一个最小的 Demo 做测试,竟然一切正常。。。

然后开始忙需求去了,直到 4月15号 小伙伴说官方有提到相关说明,如下图所示

还真是 tryCatch 导致的,现在我们能做的就是静静的等待下个版本了。

三、脚本适配(混编)

关于基本使用,这里就不再赘述,有需要的小伙伴可以看我之前的两篇文章

我们接下来讲一讲升级到正式版后的一些调整

以下是 Shorebird1.00.22.1 版本之间的命令改动

ios-framework-alpha 改名为 ios-framework

diff 复制代码
- shorebird release ios-framework-alpha --release-version 7.0.0+1
+ shorebird release ios-framework --release-version 7.0.0+1

flutter versions use 废弃

现在你再按如下命令执行,会提示你找不到 use

shell 复制代码
shorebird flutter versions use 3.19.3
Could not find a subcommand named "use" for "shorebird flutter versions".

Usage: shorebird flutter versions <subcommand> [arguments]
-h, --help    Print this usage information.

Available subcommands:
  list   List available Flutter versions.

Run "shorebird help" to see global options.

如果你需要指定 Flutter 版本,就得在 release 命令中使用 --flutter-version

ini 复制代码
# 安卓
shorebird release aar --release-version=7.0.0+1 --flutter-version=3.19.5

# iOS
shorebird release ios-framework --release-version=7.0.0+1 --flutter-version=3.19.5

release--force 废弃

shell 复制代码
The --force flag has been deprecated
If you believe you have a valid reason to use the --force flag, please reach out to the Shorebird team by filing an issue at https://github.com/shorebirdtech/shorebird/issues/new
diff 复制代码
- shorebird release aar -f --release-version 7.0.0+1
+ shorebird release aar --release-version 7.0.0+1

Flutter 3.19 补丁

在【Flutter - 升级3.19之后页面多次rebuild?🤨】一文中有讲到补丁需要去到 Flutter 源码目录下执行。我们知道,Shorebird 的热更新是魔改 Flutter 实现的,所以我们就需要去找到用来打包时的魔改版 Flutter 的目录位置。

下载的 Flutter 源码统一存放在如下目录

shell 复制代码
~/.shorebird/bin/cache/flutter

.
├── 5b9d29d67adb059103beefb65710ee3dabae2f85
├── 771d07b2cf97cf107bae6eeedcf41bdc9db772fa
├── a3d5f7c614aa1cc4d6cb1506e74fd1c81678e68e
├── a6d1747d7f573b2ba2e2b96db1b76ed2f3f024da
└── b9b23902966504a9778f4c07e3a3487fa84dcb2a

但是目录中都是以 hash 码命名的目录,要找到对应版本的目录,可以查看如下文件里的值

shell 复制代码
~/.shorebird/bin/internal/flutter.version

# a6d1747d7f573b2ba2e2b96db1b76ed2f3f024da

如果原先的 flutter versions use 还能用的话,一切就很简单了,先切到对应的 Flutter 版本,然后 cat 一下该文件,拿到 hash 码就可以进入到对应版本的 Flutter 目录,但是它已经被废弃了,所以得换另一个思路。

我们依旧可以通过 flutter.version 拿到 hash 码,但是它是当前最新受支持的 Flutter 版本的,不过不慌,拿到后进入到该 Flutter 目录,因为它是以 git 的方式拉取下来的,所以有分支记录。

我们可以通过 git rev-parse 命令拿到指定版本的 hash

shell 复制代码
git rev-parse --verify refs/remotes/origin/flutter_release/3.19.3

# 得到如下输出
# 0addba5b750987523c04ebe69e9755509369615a

四、脚本使用(混编)

专门服务于混编项目的 Python 脚本,用于切换原生端集成 Flutter 的方式(源码 或 二进制),以及封装 Shorebird 命令的使用。

我们日常研发依旧使用的是源码依赖的方式,只会在打最终测试包时才需要通过脚本切到二进制依赖,并结合 Jenkins 来辅助完成这种万年不变的无聊步骤~

Github: github.com/LinXunFeng/...

switch_flutter_integrate.py

切换 Flutter 项目的集成方式

参数 描述
-p 原生工程路径
-f 平台(ios / android
shell 复制代码
# 二进制依赖
python switch_flutter_integrate.py -p '原生工程路径' -m 'binary' -f 'ios'

# 源码依赖
python switch_flutter_integrate.py -p '原生工程路径' -m 'source' -f 'ios' 

shorebird.py

自动获取版本号,并执行 Shorebird 相关命令

参数 描述
-p 原生工程路径
-s Flutter 工程路径
-m 模式 (release / patch
-f 平台(ios / android
--flutter_version Flutter 版本号,如:3.19.3
--patch_fix 是否打 3.19 补丁,如需要请传 1
shell 复制代码
# release
python shorebird.py -p '原生工程路径' -s 'Flutter工程路径' -m release -f ios
# 指定 Flutter 版本,以及打 3.19 的补丁
python shorebird.py -p '原生工程路径' -s 'Flutter工程路径' -m release -f ios --flutter_version=3.19.3 --patch_fix=1

# patch
python shorebird.py -p '原生工程路径' -s 'Flutter工程路径' -m patch -f ios

如果文章对您有所帮助, 请不吝点击关注一下我的微信公众号:FSA全栈行动, 这将是对我最大的激励. 公众号不仅有 iOS 技术,还有 AndroidFlutterPython 等文章, 可能有你想要了解的技能知识点哦~

相关推荐
腾讯TNTWeb前端团队26 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
快速开始使用 n8n
后端·面试·github
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试