用Flutter开发一个app吧

217 阅读4分钟

背景

做前端做了几年了。写了无数个后台管理,小程序,toC的网站,h5应用...vue算是基本盘吧,使用vue写东西得心应手,很久之前react写过一年,后续也看过或者迭代过很多企业的项目,基于百度与chatgpt完全也能拿捏,只是可能编码速度稍微慢一点。

好像自己能够做很多事情了,有很多经验了。但是你在进步的同时,这个市场对前端的要求也在上升。很明显的感觉到今年市场的变化。大公司,国有企业,带点事业性质的企业要求前端会3D方面的东西,他们需要这种专业性人才。中小型企业我发现他们更需要的是全能型人才,也就是你得会写网页,你还得回开发App,亦或者你能写前端也能做后端。

很久之前的一家公司曾今试图把公司的app应用进行重构。但是这个app是原生的,也就四ios一套,安卓一套。所以在工作没那么忙的时候,我们想把app进行重写。写成一套代码兼容ios和安卓。当时2020年,彼时uni-app还没有那么流行开发app(我记得那时候我们公司是用uni-app开发小程序和h5,一两年之后我发现很多公司开始用uni-app开发app了),所以我们选择了flutter。当时的前端和后端都会去学习,都在分模块进行重构。其实前端和后端去写flutter各有各的优劣,因为dart这门语言就像是一个”缝合怪“,构建视图方面有点像react的类类型组件,前端数据交互那一块又很想后端那一套。当然还有无处不在的面向对象,相信java程序员会很熟悉...当时我以完成任务的心态重构了一些模块,后续新的需求来了,我们开始做新的需求,然后我离开了哪家公司....

时间从2020到2023,这个时候我开始学习了后端(nest.js),想成为一个多功能型人才,然后再网上扒了一个原型开始根据原型写后台代码,该系统是一个医疗相关的app项目。部分截图如下:

image.png

image.png

后端的代码我也完成了好几个模块。

image.png

然后我就想着目前自己经验比较少的就是app开发了,所以又想着既然都有了自己的后台,索性就基于此后台慢慢做一个app。

接下来就是技术选型了,首先是原生开发我就不考虑。然后就是uni-app,uni-app我还是觉得他的主战场目前是h5和小程序混合开发,react-native以前做过一个项目,感觉跟写react差不多。然后就是flutter了,个人觉得它的主战场是用来开发app的。

开发

开发的时候我想了一下,如果我用uni-app或者我用vue去开发这样的应用,我需要的东西。

  • 首先你要绘制页面吧(页面由各种组件构成,vue的基本语法你得会)
  • 页面之间要跳转吧(使用vue-router)
  • 前后端要交互吧(使用aixos,封装axios,拦截器...)
  • 一个项目得有状态管理吧(vuex、pinia)
  • 基本的逻辑编写,无外乎就一下几点吧:
    • 数据驱动
    • 组件通信
    • 页面通信
    • .... 基于以上的分析,我局的我要做一个flutter应用,大方向就是上面几点,一一攻克即可:
  • 学习dart语言
    • 有js与ts基础,不用怎么学。重点关注面向对象,class语法。
  • fluro进行路由划分,页面间通信。
  • 使用dio进行前后端数据交互(当然要封装dio,拦截器。。。)
  • 使用getx进行项目的状态管理
  • 组件的编写,组件的通信...
    • 组件的通信与react很像

基于上诉的思路,配合chatgpt。中途踩了一些坑,比如mac上安装环境的时候顺便升级系统,更新xcode等等。windows上运行项目使用始终编译不到模拟器上...大部分是环境方面,真正写代码还是比较顺畅。然后目前已经开发出部分模块,模拟器的效果如下:

image.png

image.png

image.png

后续会继续迭代项目,继续总结一些问题。