【MPFlutter浅尝】使用flutter写一个微信小程序
前言：12份左右flutter发布2.8.0 flutter对于桌面端和web端的支持越来越完善 想着这玩意能不能写微信小程序呢 一搜还真有 由一兜糖团队开发的MPFlutter项目开源了 本着尝鲜的心态看了下已上线的一兜糖小程序 哎呀妈呀 感觉还不错的样子 话不多嗦 vscode启动
所以 我应该写个啥玩意项目好呢
开始我想的是仿站 或者把公司项目直接用MPFlutter写一遍小程序 这样我接口什么的都有现成的
但是我是一个Apex游戏玩家 我要干票大的 我看刑
第一步借鉴ui
打开WeGame 打开小黑盒
简单查看后先借鉴下小黑盒 ps:不得不说小黑盒数据非常全 基本所有Steam游戏都囊括了
开始设计ui
简单的画两笔 差不多就这样
第二步 收集数据
apex英雄这个游戏是一个大逃杀类型游戏 数十个英雄 二三十把枪械 数以千记的皮肤 边框 动作 数据太多自己搜集太麻烦这部分 但是小黑盒的数据非常全 嘿嘿嘿
简简单单写个后台填上数据
第三步 开始绘制前端
因为我flutter写的还行但是我从未写过微信小程序。但是好在MPFLutter的文档写的很详细。属于我奶奶来了都能把环境搭好的那种
mpflutter 应该是类似mpvue的类型。是一个跨平台 Flutter 开发框架，可用于各种小程序、H5、原生应用开发。开发者可以通过 Dart 语言开发 App，一套代码同时在多个平台运行 微信 京东 钉钉等等
Apex项目启动
环境搭建
这里部分和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社区越来越好 一统我的技术栈
作者：祝星
链接：https://juejin.cn/post/7057093045342175268
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
