H5相关

sdk: 3.13.6
尝试将flutter sdk升级为3.16.9，很多低端机型都不兼容，暂时不要升级sdk
相关issue: https://github.com/flutter/r/flutter/r/issues/134317

修改h5内版本号

（注：无特殊情况一般不修改，与app某一个版本一致即可）：
在TokenManager的versionName写死
壳工程修改app.js/ux中的 webVersionCode

设置正式测试本地环境

在mini_app_utils文件中修改isProduction变量
在mini_app_utils中修改isLocal变量

设置h5地址后缀

在index.html文件中修改href（如版本号为1.0.0）

抖音小程序：/tt_1.0.0 或 /tt_html_1.0.0
微信小程序：/wx_1.0.0 或 /wx_html_1.0.0
快应用：/quick_html_1.0.0
每一个小程序平台访问的路径都不一样，每一个版本的都路径也都不一样，每次都需要重新配置新的版本路径和上传到机器的文件名要对上。

需分别下载：抖音开发工具，微信开发工具，快应用开发工具

一般开发流程

1. 电脑安装nginx

配置nginx文件，将默认打包后的web包地址配置为对应小程序/快应用的路径，这样打包后reload即可直接访问
终端直接执行nginx -s reload

2. 修改项目本地地址

修改项目mini_app_utils文件中 localWebUrl地址前缀为自己电脑网络地址，设置isLocal为true

3. 修改壳工程项目本地地址

在app.js/app.ux文件中的gloabalData的isLocal字段，以及对应的webUrl改为自己电脑本地地址，需与对应的h5同步

4. 小程序开发工具，编译或调试，即可运行项目

关于调试

各个小程序的调试界面都可以看到壳工程的日志，抖音小程序/快应用不支持查看h5内的日志，微信小程序可以支持，但是只能在模拟器上看，并且如果是报错的日志并不会打印出真实的栈帧，而是生成js文件后的具体行数，变量名也被混淆，基本无法找到具体问题。

如果想要开发查看日志，则必须电脑运行浏览器，并且将真实的链接参数赋值给浏览器，一般比较大的需求开发都使用此种模式，尤其是不涉及到壳代码，纯flutter的需求的时候，因为浏览器的环境与小程序的agent不同，在代码的环境判断的时候可能与小程序/快应用有差异，这点需要注意，浏览器的枚举type为none。

1. 运行项目从浏览器复制到具体的本地url地址
2. 修改main.dart的replace地址，写上刚才复制的地址
3. 运行对应的小程序/快应用，从小程序开发工具的调试日志中拿到具体的url拼接参数，复制?后面的内容粘贴到刚刚运行的浏览器中
4. 重新运行即可正常调试
   阅读全文 »

AI生成BGM

BGM猫

• 可以通过BGM猫平台 http://bgmcat.com/home 生成AI音乐

• 使用描述 : 我走在田间的马路上,听着小歌曲,跳着走

• 提示 : 默认生成的bgm是没有商用版权的,可以通过购买专业创作者会员或单曲购买商业用途,目前感觉没必要购买

Mubert

• 可以通过mubert平台 https://mubert.com/render?authBy=google ⽣成AI⾳乐

• 使⽤描述 : I was walking on the road in the field, listening to little songs, dancing (规定只能使⽤英⽂)

BGM去除⼈声Spleeter

• 通过 https://makenweb.com/SpleeterGUI 可以下载免费的Windows版本(2022-10-12),MAC⽆对应软件。

• 通过 https://bbs.huaweicloud.com/forum/thread-117164-1-1.html 链接教程(2021-03-30有点过时), 调⽤的是Spleeter库,调⽤的流程和Windows版软件命令⼀致,⽆须搭建使⽤了.

优化重点项

将以下资源本地化，打包到项目中

• canvaskit.js和canvaskit.wasm
• KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf
• css2?family=Noto_Sans+SC

ps：最初canvaskit资源上传到阿里云，采用国内镜像资源加载。这次为了保险起见，也放入到本地。
好处：只要服务器正常能访问，这些资源文件就能够正常加载成功，最大程度上规避页面加载异常的风险！
最终项目中添加一些配置文件，如下图：

文/ Nayuta，CFUG 社区

状态管理一直是 Flutter 开发中一个火热的话题。谈到状态管理框架，社区也有诸如有以 Get、Provider 为代表的多种方案，它们有各自的优缺点。 面对这么多的选择，你可能会想：「我需要使用状态管理么？哪种框架更适合我？」 本文将从作者的实际开发经验出发，分析状态管理解决的问题以及思路，希望能帮助你做出选择。

为什么需要状态管理？

首先，为什么需要状态管理？ 根据笔者的经验，这是因为 Flutter 基于 声明式 构建 UI ， 使用状态管理的目的之一就是解决「声明式」开发带来的问题。

「声明式」开发是一种区别于传原生的方式，所以我们没有在原生开发中听到过状态管理，那如何理解「声明式」开发呢？

State 的生命周期，定义了 Widget 的加载到构建的全过程，可以利用其回调机制根据 Widget 的状态选择合适的时机做合适的事情。而 APP 的生命周期，则定义了 APP 从启动到退出的全过程。

如果想在对应的 APP 的生命周期事件中做相应的处理，比如 APP 从后台进入前台、从前台退到后台，或是在 UI 绘制完后做一些处理，则可以应用 WidgetsBindingObserver 类来实现。

WidgetsBindingObserver 中的回调方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Accessibility 相关特性回调
void didChangeAccessibilityFeatures() { }

// App 生命周期改变回调
void didChangeAppLifecycleState(AppLifecycleState state) { }

// 本地化语言改变回调
void didChangeLocales(List<Locale> locale) { }

// 系统窗口相关改变回调
void didChangeMetrics() { }

// 系统亮度改变回调
void didChangePlatformBrightness() { }

// 文本缩放系数改变回调
void didChangeTextScaleFactor() { }

// 内存不足警告回调
void didHaveMemoryPressure() { }

// 页面 pop
Future<bool> didPopRoute() => Future<bool>.value(false);

// 页面 push
Future<bool> didPushRoute(String route) => Future<bool>.value(false);

要使用以上回调方法，只需通过给 WidgetsBindingObserver 单例对象设置监听器即可监听相关回调方法

一、通过命令：

1
2
3
4
5
6
7

查看版本： flutter --version
检查环境：flutter doctor
查看渠道：flutter channel
切换渠道（stable, beta, dev, master）：flutter channel stable
升级到最新版本：flutter upgrade 
升级到指定版本：flutter upgrade v2.5.0
回退到指定版本：flutter downgrade v2.5.0

二、通过git回退版本：

1、进入flutter github找到要回退的版本

2、cd进入到存放flutter sdk目录，运行回退指令 git reset –hard [commit_id]

例如-> git reset –hard 4cc385b4b84ac2f816d939a49ea1f328c4e0b48e

3、查看flutter版本

查看版本-> flutter doctor 或者 flutter –version

颠覆开发者开发方式的Flutter

Flutter的诞生是为了彻底改变应用程序开发方式：将Web的迭代开发模式与硬件加速图形渲染和像素级控制相结合，这些以前可是游戏的专利，而现在它被来进行应用开发。自从Flutter 1.0测试版发布以来，谷歌对其不断地进行优化，让Flutter的功能日趋完善，比如添加了新的框架功能和小部件、与底层平台进行更加深入的集成、提供了丰富的软件包库，并且在性能和工具上也做了许多的改进。

从1.0到3.0版本，Flutter被越来越多的开发者使用来构建应用程序。据谷歌最新用户研究报告显示：

• 91%的开发人员认为Flutter能缩短构建和发布应用程序所需要的时间；
• 85%的开发人员认为Flutter使他们的应用程序更美观；
• 85%的人认可Flutter能使他们在更多的平台上发布他们的应用程序。

实现“大一统”，一个Flutter，横跨iOS、Android、Web、Windows、macOS、Linux六大平台

Flutter 3.0为开发者提供了一种使用Dart编程语言为六大面向消费者的主流平台（iOS、Android、Web、Windows、macOS、Linux）目标编写应用程序的方法。基于Flutter 3，开发者能拥有从单个代码库为六个平台构建应用程序的体验，这将使其生产力大大提高。

不同于之前的版本，Flutter 3新增了对macOS和Linux应用程序的稳定支持。添加新平台的支持并不像我们想象中那么简单，其需要的不仅仅是渲染像素，还需要做很多其他的工作，比如新的输入和交互模型、编译和生成支持、可访问性和国际化以及特定于平台的集成等。Flutter不仅让用户能灵活地充分利用底层操作系统，同时能够根据需要共享尽可能多的UI。

具体来看，在macOS上，Flutter3可以通过通用二进制构建方式支持英特尔和Apple Silicon，允许应用打包在这两种架构上本机运行的可执行文件。同时，由于Dart对Apple Silicon的支持，编译速度也将更快。在Linux上，Canonical和谷歌合作提供了一个高度集成且在同类中最佳的开发选项。

• 背景
• Flutter的四种工程类型
• Flutter工程Pub依赖管理
• FlutterModule集成到Native
• Flutter与Native通信
• Flutter组件化工程
• 后序

一、背景

Flutter 在目前跨平台方案中有更好的平台一致性以及更优的体验。但对于本身已有成熟的业务代码的项目来说，更多的是采用混合栈的方式，在不变更原有 App 业务的基础上，将 Flutter 能力扩展为子模块进行接入和开发。这样并不影响原有的业务和原生能力，又可以结合业务需求进行技术选择。

二、Flutter 的四种工程类型

2.1. Flutter Application

标准的Flutter App工程，包含标准的Dart层与Native平台层

2.2. Flutter Module

Flutter组件工程，仅包含Dart层实现，Native平台层子工程为通过Flutter自动生成的隐藏工程

2.3. Flutter Plugin

Flutter平台插件工程，包含Dart层与Native平台层的实现

2.4. Flutter Package

Flutter纯Dart插件工程，仅包含Dart层的实现，往往定义一些公共Widget

1. 在 Android 模拟器上运行 ARM 应用

这算是一个非常好的消息了，之前在实际应用开发中，因为模拟器缺少对 arm 的支持，基本上都使用真机进行开发与调试。
随着 Android 11预览版的发布
Android 11 系统映像能够在不影响整个系统的前提下，直接将 ARM 指令转换成 x86 指令。开发者无需搭建高负载的 ARM 环境即可执行 ARM 二进制文件并进行测试。

详情：
在 Android 模拟器上运行 ARM 应用

2. 大厂对外文章分享

携程技术
携程Android 10适配踩坑指南
新版本适配一直是 Android 开发者的痛楚之一，但是这件事如果长期不升就会越来越困难。加上现在应用市场比较强势，所以保持一个较高的版本的适配是有必要的。
携程旅行分享了他们从API 26 到 29 的适配经验，大家可以参考一波。
全网最详！暗黑模式在 Trip.com App 的实践

暗黑模式也最近的一个非常热门的话题，甚至微信支持暗黑模式都成为热点了。如果你对这方面感兴趣，或者刚好有暗黑实践的需求，那么可以看这一篇由携程 UED 团队+研发团队撰写的文章。
我个人其实一直没有体验过暗黑模式，毕竟没适配的 app 太多了，所以我不认为把手机切换为暗黑模式有很好的的体验…

Google 开发者
在 Android 开发中使用协程 | 背景介绍
可以看一下官方的文章了解下协程的一些背景知识，用来解决什么问题，如何解决，以及性能相关的一些知识。

字节跳动技术团队
抖音包大小优化-资源优化
可以看下抖音团队为了减少 apk 的体积，针对资源这一方面做了哪些极致的事情。
另外 apk 体积优化也可以看下 jsonchao 的文章：
吹爆系列：深入探索Android包体积优化

百度 APP 技术
Gradle 与 Android 构建入门
写了一篇 Gradle 构建入门的文章，其实很多同学都非常害怕 Gradle，这篇文章会给大家解释为什么需要 Gradle，以及 Gradle 相关的一些基础知识，帮你更好的了解相关知识，比较轻松，可以一看。

西瓜技术团队
AwCookieManager.nativeGetCookie crash 排查
分享了西瓜的一个CookieManager.getCookie(String url) 过程中的 native crash，分析过程较为复杂，不过给出了解决方案，解决方案涉及到 hook，西瓜用了自研的方案，开源的 lancet 应该也能做到，这篇文章也会提到 lancet。