Flutter开发静态站点自动发布工具手机应用

0. 项目背景

自从我搭建了静态博客的moments站点之后，我发布一个动态分享的流程是这样的，打开手机github应用进入仓库，仓库中新建md文件，在文件中写上文字，切换到手机浏览器，登录图床上传照片，复制照片链接，回到github粘贴图片链接，最后发布推送。这个流程让我抓狂，如果是更多的照片简直恨不得摔手机。于是我很早就计划做一个app，把以上流程都合并在一个应用中完成。现在趁端午假期立刻把项目落地，在项目评估中我选择了Flutter的前端框架，它并非调用安卓原生控件而是使用自己的UI引擎绘制控件，屏蔽了原生安卓开发中的很多诟病，它支持跨平台。

1. 方案选择

选择Flutter而非原生 Android， 跨平台，热重载可以不需要等待长时间的编译，屏蔽了原生安卓开发的复杂性，避免复杂的权限申请，小工具推荐使用。

2. VSCode安装插件

安装Flutter插件，参照官方指导安装工具链

参考链接：Install Flutter using VS Code

3. 工具链部署

VSCode上安装 Flutter插件 + Flutter SDK(插件安装后会提示下载安装) + Android Studio(手动安装最新版)

配置Flutter SDK bin目录到环境变量：

Path D:FlutterSDKflutterbin

#在环境变量里面新建变量，配置国内镜像源
PUB_HOSTED_URL https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

运行 flutter doctor 检查：

运行检查后提示缺失的环境配置需手动安装

安装安卓cmdline-tools(进入Android Studio安装配置)：

#部署Android证书
flutter doctor --android-licenses

再一次运行，正常情况会提示依赖完整：

4. VSCode开发

使用Flutter插件的命令创建项目(项目地址与Flutter缓存要同盘符)：

创建项目骨架之后，运行编译

手机启用usb调试，手机连接电脑，vscode会显示你的手机：

5. 修改镜像源

修改gradle镜像源：

#androidgradlewrappergradle-wrapper.properties
distributionUrl=https://mirrors.cloud.tencent.com/gradle/gradle-9.1.0-all.zip

#android/build.gradle.kts 添加一下镜像源
repositories {
        // 优先从国内阿里云镜像拉取安卓标准库
        maven { url = uri("https://maven.aliyun.com/repository/google") }
        maven { url = uri("https://maven.aliyun.com/repository/public") }
        google()
        mavenCentral()
    }

#android/settings.gradle.kts
repositories {
        // 优先从国内阿里云镜像拉取 Gradle 插件
        maven { url = uri("https://maven.aliyun.com/repository/google") }
        maven { url = uri("https://maven.aliyun.com/repository/public") }
        maven { url = uri("https://maven.aliyun.com/repository/gradle-plugin") }
        google()
        mavenCentral()
        gradlePluginPortal()
    }

运行构建：

flutter clean
flutter run -v

6. 创建token

在应用中涉及仓库以及图床的操作，需要申请token

新建github [Fine-grained personal access tokens] 密钥 (只选Contents权限) + 配置兰空图床API(使用ApiFox工具申请token)，最后粘贴到assets/secrets.json

7. 调试结果

手机APP会自动安装，测试功能并查看控制台的日志是否正常：

USB调试app的日志输出：

博文推送到github后，wordflows会自动执行python脚本对文章进行预处理，

云服务器的docker webhook会触发静态站点构建工具的执行，静态页面html资源文件会自动更新，最后显示效果如下：

8. 代码仓库

 git clone https://github.com/haiou1220/git_md_lsky_flutter_app.git

9. 最后

这个项目解决了我发布一个动态需要繁琐流程的麻烦，相当于解放了我的时间与对操作的厌倦。接下来我应该还会继续开发一款用于控制物联网设备的手机应用，项目到这里就告一段落啦。