【MPFlutter浅尝】使用flutter写一个微信小程序

前言：12份左右flutter发布2.8.0 flutter对于桌面端和web端的支持越来越完善 想着这玩意能不能写微信小程序呢 一搜还真有 由一兜糖团队开发的MPFlutter项目开源了 本着尝鲜的心态看了下已上线的一兜糖小程序 哎呀妈呀 感觉还不错的样子 话不多嗦 vscode启动

MPFlutter项目地址

MPFlutter Gayhub地址

所以 我应该写个啥玩意项目好呢

开始我想的是仿站 或者把公司项目直接用MPFlutter写一遍小程序 这样我接口什么的都有现成的 但是我是一个Apex游戏玩家 我要干票大的 我看刑

第一步借鉴ui 打开WeGame 打开小黑盒 简单查看后先借鉴下小黑盒 ps:不得不说小黑盒数据非常全 基本所有Steam游戏都囊括了 开始设计ui 简单的画两笔 差不多就这样

第二步 收集数据 apex英雄这个游戏是一个大逃杀类型游戏 数十个英雄 二三十把枪械 数以千记的皮肤 边框 动作 数据太多自己搜集太麻烦这部分 但是小黑盒的数据非常全 嘿嘿嘿 简简单单写个后台填上数据

第三步 开始绘制前端 因为我flutter写的还行但是我从未写过微信小程序。但是好在MPFLutter的文档写的很详细。属于我奶奶来了都能把环境搭好的那种

mpflutter 应该是类似mpvue的类型。是一个跨平台 Flutter 开发框架，可用于各种小程序、H5、原生应用开发。开发者可以通过 Dart 语言开发 App，一套代码同时在多个平台运行 微信 京东 钉钉等等

Apex项目启动

环境搭建

windows配置环境

macOS中配置环境

这里部分和flutter配置环境是一样的 。但是我们需要

克隆模板工程

git clone https://github.com/mpflutter/mpflutter_template.git apex_wechat

安装依赖

./mpflutter packages get

注意，这里用的是 ./mpflutter 而不是 flutter！

这里模板工程克隆下来之后按F5就可以成功运行 你可以看到演示的demo 。这里继续看文档 要把模板工程变成这里的项目。我们需要

初始化应用信息

dart scripts/help.dart

这将出现以下信息，help.dart 是 MPFlutter 的帮助中心，可帮助你完成应用的初始化和构建工作。

我们选择初始化 MPFlutter 模板工程，并根据提示输入工程名称、输出目标。

• 是否移除模板工程自带的 Git 源？ (y/N)

  • 对于新克隆的模板工程，选 y 即可，移除自带的 Git 源，后续可以添加自己的 Git 源。

• 请输入工程名称，合法字符为全小写英文和下划线：

  • 输入一个合法的工程名称，如 awesome_project，这将会同步修改 pubspec.yaml 中的 name 值。

• 该工程需要输出到 Web 吗？(如果选择否，将删除 Web 目录。) (y/N)

  • 如果你不需要输出到 Web (HTML5) 可以选择否，一般情况下，我们会选 y 保留该目标。

• 该工程需要输出到微信小程序吗？(如果选择否，将删除 weapp 目录。) (y/N)

  • 如果你不需要输出到微信小程序可以选择否。

......

在命令行执行 ./mpflutter packages get。

这里你的项目就成功跑起来了

然后就开始我们的apex启动

目前MPFlutter支持的第三库有GetX Provider 富文本 Bloc等等 我这里简单使用了Provider 和GetX 用法和写FLutter项目没有差别 正常引入后./mpflutter packages get就行

提一嘴就是Flutter很多组件都是经过MPFlutter二次封装过的 material组件包含的是不可用的 MPFlutter提供了大部分替换类的组件，但是还是有一小部分需要自己实现。就意味这部分ui需要自己写 pub.dev上的第三方ui组件差不多也是不能用的 算了 写就写吧 又不是不能看 丑就丑点吧

花了大概两个星期总算是把前后数据都通了完成了百科 商店 头条页面 上线的话目前还没有想法 过完年不懒了再说 现在我只想打Apex 效果图如下

具体代码地址 小孩子不懂事写着玩的 轻点喷

看到这里可能有小伙伴要问了 我应该如何调用原生小程序的APi 登录授权 查看大图等等。不用担心 MPFlutter早已经把这部分的问题解决了 提供了所有的原生小程序的APi调用 具体说明

总的来说经过使用MPFlutter写了一个微信小程序感觉就是有点回归写html的时候的样子 自己想要的ui效果得自己写 但是像一些基础组件还是可以用的 包括我在使用过程中遇到各种问题也一直在请教MPFLutter作者 @PonyCui。大佬也一直很有耐心的解答我的各种奇葩问题和解决我的奇葩需求。 再次感谢 @PonyCui的开源 希望flutter社区越来越好 一统我的技术栈