编写第一个 MPFlutter 微信小程序
输入“/”快速插入内容
编写第一个 MPFlutter 微信小程序
编写第一个 MPFlutter 微信小程序
从模板工程开始
直接下载以下任意一个 awesome_project 并解压
解压后，可见这是一个标准的 Flutter 工程。
这个工程存在以下文件，是 MPFlutter 专有的。
fonts | 文件夹 | 存放内置于小程序包的字体文件 |
wechat | 文件夹 | 存放微信小程序工程文件 • 可修改 wechat/project.config.json 中的工程配置 • 可添加额外的小程序逻辑、资源到该工程 |
scripts | 文件夹 | 存放构建脚本 |
另外，lib/main.dart 也和普通的 Flutter 工程不一样，具体是：
•
runApp 换成 runMPApp
•
navigatorObservers 必须包含 MPNavigatorObserver
除此以外，Flutter 所允许编写的任何代码、依赖库都可以在 MPFlutter 中使用。
Flutter SDK 版本支持情况
Flutter SDK >3.16.7 and <3.22.0以及 > 3.29 是不被支持的。
当你使用 3.22+ SDK 时，请确保 pubspec.yaml 中的 environment.sdk 设置正确：
代码块
environment:
sdk: ">=3.4.0 <4.0.0"
当你使用 3.16.7- SDK，也需要确保该值如下方所示：
代码块
environment:
sdk: ">=3.2.0 <4.0.0"
不正确的设置会导致构建失败。
FVM
从 2.6.0 版本开始，MPFlutter 支持使用 fvm 构建，请在解压后的工程目录下使用 fvm use 命令完成初始化。
代码块
fvm use 3.16.7
如果遇到 cli.waitFor 错误，使用以下命令构建应用。
代码块
fvm dart scripts/build_wechat.dart
构建应用
在命令行下，执行以下命令构建微信小程序：
代码块
flutter packages upgrade # 首次安装依赖，建议使用该命令。
flutter packages get
dart scripts/build_wechat.dart
如果没有错误发生，那么在 build/wechat 目录下就是最终产物。
注意：所有的 [INFO] 日志都不代表错误，如无任何异常，请直接忽略。
导入到微信开发者工具使用
1.
打开【微信开发者工具】
2.
在工程选择页面，选择【导入】
3.
选择刚刚构建出来的 build/wechat<- 划重点，是 build 目录下的 wechat
4.
将 appId 换成你自己的测试 appId
5.
然后就可以在微信开发者工具预览 MPFlutter 应用啦
6.
同样的，你可以使用【扫码预览】功能，在 iPhone 或者 Android 手机上体验应用
注意：请不要使用【真机调试】功能，使用【扫码预览】。
提示：如果小程序运行白屏，请检查《环境安装 》中的每一项是否均已正常安装。