编写第一个 MPFlutter 微信小游戏

收到反馈：Flutter 3.16.8 存在白屏及包体积增大问题，请使用 3.16.7 以下版本。​

从模板工程开始

直接下载以下 awesome_game_template 并解压

解压后，可见这是一个标准的 Flutter 游戏工程，使用 Flame 框架开发。​

这个工程存在以下文件，是 MPFlutter 专有的。

fonts	文件夹	存放内置于小游戏包的字体文件
wegame	文件夹	存放微信小游戏工程文件 • 可修改 wegame/game.json 中的游戏配置 • 可修改 wegame/project.config.json 中的工程配置 • 可添加额外的小游戏逻辑、资源到该工程
scripts	文件夹	存放构建脚本

另外，lib/main.dart 也和普通的 Flutter 工程不一样，具体是：

•
runApp 换成 runMPApp​

除此以外，Flutter 所允许编写的任何代码、依赖库都可以在 MPFlutter 中使用。​

Flutter SDK 版本支持情况

Flutter SDK >3.16.7 and <3.22.0以及 > 3.27 是不被支持的。

当你使用 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"​

不正确的设置会导致构建失败。

构建应用

在命令行下，执行以下命令构建微信小程序：

代码块

flutter packages upgrade # 首次安装依赖，建议使用该命令。​
flutter packages get​
dart scripts/build_wegame.dart​

如果没有错误发生，那么在 build/wechat 目录下就是最终产物。​

注意：所有的 [INFO] 日志都不代表错误，如无任何异常，请直接忽略。​

导入到微信开发者工具使用

1.
打开【微信开发者工具】> 【小游戏】​

2.
在工程选择页面，选择【导入】​

3.
选择刚刚构建出来的 build/wegame<- 划重点，是 build 目录下的 wegame​

4.
将 appId 换成你自己的测试 appId​

5.
然后就可以在微信开发者工具预览 MPFlutter 应用啦​

6.
同样的，你可以使用【扫码预览】功能，在 iPhone 或者 Android 手机上体验应用​

注意：请不要使用【真机调试】功能，使用【扫码预览】。

提示：如果小游戏运行白屏，请检查《​环境安装 》中的每一项是否均已正常安装。​

提示：Nightly 版本可能已有遇到问题的修复方案，请关注《​版本信息 》。​

下一步

你可以通过《了解更多》文档理解 MPFlutter 的原理

编写第一个 MPFlutter 微信小游戏​