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 等文章, 可能有你想要了解的技能知识点哦~

相关推荐
小牛itbull34 分钟前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL8 小时前
npm入门教程1:npm简介
前端·npm·node.js