使用 Flutter 开发 Windows 桌面应用 [MD]


我的GitHub 我的博客 我的微信 我的邮箱
baiqiantao baiqiantao bqt20094 baiqiantao@sina.com

目录

目录
  • 目录
  • 使用 Flutter 开发桌面应用
    • 环境准备
    • 第一个桌面应用
    • 发布桌面应用
      • 构建压缩包文件
      • 生成证书 csr、crt、pfx
      • 发布桌面应用

使用 Flutter 开发桌面应用

  • 官网
  • 中文官网
  • 官方博客
  • 镜像配置
  • 命令行工具

官方地址中文地址 的关系(中文网站一般都是以.cn结尾):

  • https://flutter.dev/xxx -> https://flutter.cn/xxx
  • https://docs.flutter.dev/xxx -> https://flutter.cn/docs/xxx
  • https://storage.googleapis.com/xxx -> https://storage.flutter-io.cn/xxx

环境准备

  • 安装和配置 Flutter 开发环境
  • 在中国网络环境下使用 Flutter
  • Flutter 桌面支持
  • 为 Android 模拟器配置硬件加速
  • Visual Studio 下载
  • 在 VS 中安装 C++ 支持

  • 在开始菜单的搜索功能键入env,选择编辑系统环境变量
  • 在 用户变量的 Path 中增加flutter\bin目录的完整路径
  • 运行where flutter dart,确保flutter\bin目录在最前面
  • 运行flutter doctor只需要 解决与你需求相关的问题即可,不需要全部都处理掉
  • [可选] 创建 Android 模拟器,启用 硬件加速三件套:GLES、Skia 渲染、Hypervisor
  • 下载 Visual Studio,安装C++ 桌面开发工作负载及其所有默认组件

第一个桌面应用

  • 支持的 IDE:AS、IDEA 或 VS Code
  • 创建新的 Flutter 项目
  • 各个渠道的发布版本
  • Flutter build release channels

  • 启用桌面版支持:flutter config --enable-windows-desktop
  • [可选] 安装一个支持 Flutter 的 IDE,例如 AS,并且需要安装 Flutter 和 Dart 插件
  • 运行flutter devices,如果有 Windows (desktop) 代表桌面已成功启用
  • 切换 flutter 到 beta 分支:git checkout -b beta remotes/origin/beta
  • 创建一个 Flutter 项目,勾选 Windows 平台,没有的话代表你的环境有问题
  • 选择目标设备后点击 Run 即可编译、运行,页面代码在lib/main.dart
flutter upgrade         # 更新 Flutter SDK 和依赖包
flutter channel         # 列出所有渠道(分支),并标出当前使用的渠道
flutter channel beta    # 切换到 beta 渠道:master、dev、beta、stable

flutter create myapp    # 在 myapp 目录中,创建一个包含桌面支持的新应用
flutter run -d windows  # 构建 debug 版本并启动,注意:桌面应用不支持热重载
flutter build windows   # 构建 release 版本(但是同样并不会打包)

发布桌面应用

  • Flutter 桌面支持
  • 发布桌面应用

构建压缩包文件

打包需要的文件在目录 \module_bqt\build\windows\runner\(Debug or Release) 中,文件结构如下:

Release
│──module_bqt.exe
│──flutter_windows.dll
│──msvcp140.dll          # [非必须] 本机代码的 C++ 标准库,需要从 C:\Windows\System32 拷贝
│──vcruntime140.dll      # [非必须] 本机代码的 C++ 运行库,需要从 C:\Windows\System32 拷贝
│──vcruntime140_1.dll    # [非必须] 本机代码的 C++ 运行库,需要从 C:\Windows\System32 拷贝
└──data
│   │──app.so
│   │──icudtl.dat
│   └──flutter_assets   # [非必须] 包括两个字体文件、版权说明

将以上所有文件打成一个 rar 后发给别人,别人即可正常运行。

生成证书 csr、crt、pfx

  • OpenSSL
  • CSR 文件在线生成
  • CSR 文件在线验证
openssl version     # 【OpenSSL 1.1.1h  22 Sep 2020】确保安装了OpenSSL
where openssl       # 【\Git\mingw64\bin\openssl.exe】也可以使用 Git 自带的

openssl genrsa -out bqt_rsa.key 2048                 # 生成 2048 位的 rsa 私钥
openssl req -new -key bqt_rsa.key -out bqt_csr.csr   # 生成证书签名请求(CSR)文件
openssl x509 -in bqt_csr.csr -out bqt_crt.crt -req -signkey bqt_rsa.key -days 9999  # 生成 .crt 文件
openssl pkcs12 -export -out bqt_pfx.pfx -inkey bqt_rsa.key -in bqt_crt.crt          # 生成 .pfx 文件

生成 CSR 文件需要输入的信息

  • Country:国家代码,中国为 CN
  • State or Province Name:州或省名称,GuangDong
  • Locality Name (eg, city):城市,ShenZhen
  • Organization Name (eg, company):组织(公司),Tencent
  • Organizational Unit Name:组织单位(部门),IT
  • Common Name:名字,需要输入与服务器关联的域名,或者是您服务器的公共 IP 地址,baiqiantao.github.io
  • Email:邮箱,baiqiantao@sina.com
  • A challenge password:至少 4 位的密码,1234

生成的几个文件简介

  • .csrCertificate Signing Request,证书签名请求文件,纯文本文件,可以 在线验证
  • .crtCertificate,证书文件,纯文本文件,可以双击打开查看证书信息(包含.csr中的所有信息)
    • 证书信息:此 CA 根证不受信任。要启用信任,请将该证书安装在受信任的根证书颁发机构存储区中
    • 颁发者、颁发给、证书路径:baiqiantao.github.io
  • .pfx:Personal Information Exchange,个人信息交换文件,二进制文件,可以双击打开证书导入向导
    • 向导可以帮助你将证书书信任列表从磁盘复制到证书存储。证书存储是保存证书的系统区域
    • 由证书颁发机构颁发的证书是对你身份的确认,它包含用来保护数据建立安全网络连接的信息
    • 安装后,我们的证书就是Trusted 受信任的 Root Certification Authorities 机构颁发的证书了

发布桌面应用

  • Windows 应用包格式:MSIX
  • MSIX 打包工具
  • 部署示例

若要在 Windows 上分发你的应用,则需要一个 Windows 能够识别的证书签名。上面我们已经生成了一个自签名的 .pfx 证书,安装应用之前,我们需要在本地安装 .pfx 证书。

这一部分的内容太过复杂,而且官方文档已经明确说明:......不建议发布桌面应用!所以仅简单记录

2021-12-15