美文网首页
LNMP+flutter 实现一款简单的app

LNMP+flutter 实现一款简单的app

作者: 携一两本单色书来 | 来源:发表于2020-11-02 10:59 被阅读0次

先放web效果,此文章用于自己记录,如果这里有您想要知道的或者详细了解的,您可以在下方留言.

前提:

写php业务也有一段时间了,抛开curd业务之外,难免想尝试一下整个业务流程,毕竟踩坑才能带来进步.刚好也有去年双十一买的腾讯云,公司业务也不太忙,再加上以前曾经有一个产品思路,就决定前后端全部自己完成,写一个简单的app.过程中卡壳好几次,后悔当时没有详细记下来,写完后才开始总结,难免不太细致,有所遗漏.这也给自己提个醒,以后记录问题要及时,不然解决后就不是问题了,脑子里也就不当回事了.

后台:

腾讯云采用LNMP,(美中不足的是环境直接是腾讯镜像市场提供的,导致后面部分定制不太了解,建议还是自己走一遍流程,新手多踩一遍LNMP的坑总归是好的)

LNMP

  1. 端口设置文件夹分区:
    在nginx.conf 可以添加多个端口,实现不同的端口进入不同的文件夹
    比如:80端口写api, 81端口放flutter web端

  2. 跨域问题,在nginx.conf 对应端口加入

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

Laravel

  1. composer 搭建Laravel开发环境,这里会提示报错,要删除php.ini 里的两个参数.
  2. 生成laravel key
  3. 身份认证采用tymon/jwt-auth
    4.钉钉推送采用wangju/ding-notice
  4. 短信验证码用的腾讯的50块钱5000条tencentcloud/sms,毕竟没有验证码没发修改密码,这里采用的redis存储时效性的验证码,问了公司老大,他建议用DB,但是可能是客户端与身俱来的内存管理习惯,也可能是实在是担心学生机内存不够,还是采用了redis这种方式.公司老大看完这个项目后评价,怎么抠抠索索的.

这个过程查了很多的文档,毕竟也是第一次自己搭建后台项目,都是一步一个脚印摸索过来的.

客户端

采用纯flutter实现,毕竟界面太简单,用oc的话估计一天就完事儿了,再加上flutter可以实现,iOS+androd+Web三端通用,所以我几乎就没有犹豫地采用了这个方案,但是没想到在这里用了几乎这个时间的2/3.

  1. 因为想要实现支持markdown语法,且能够粘贴复制的功能.我尝试了
    flutter_markdown,但是没有找到复制文本的办法,于是我又尝试了SelectableText,但是又没有办法实现富文本,最终找到了refined_markdown这个markdown解析器,和extended_text支持复制的text控件,算是实现了想要的效果.
  2. 为了尽可能了解这门语言,所以尝试了各种写法,bloc,setState对应OC的RX和setModel.
  3. 整个过程写完感觉代码就是用OC的写法将一堆demo拼起来的项目,毫无美感可言.我想实现类似iOS登录后一对多的传值,先是尝试了ChangeNotifier,但是当时好像效果局限于同一Widget树,无法实现全局的效果(也可能是我不会用),后来采用了eventbus这种全局单例的写法.
  4. 以下是用到的一些框架
  dio: ^3.0.9 #网络请求
  pull_to_refresh: ^1.6.2 #刷新
  flutter_spinkit: ^4.1.2+1 #动画
  flutter_redux: 0.6.0 #数据共享
  flutter_easyloading: ^1.1.3 #弹窗
  shared_preferences: ^0.5.3+1 #偏好存储
  refined_markdown: ^1.2.2
  extended_text: ^4.0.0
  webview_flutter: ^1.0.5

5.shared_preferences存储个人信息可能存在问题,在web上登录后存在明显的问题,

总结

前前后后大概两周的时间,其实本来的目的是熟悉php项目架构,实现从0到1,但是过程中大部分时间都给了客户端,而且这里踩坑了也没法请教别人,有点儿走偏了,还好效果不错,算是实现了立项的目标.

  • 熟悉了laravel的整个搭建流程,包括短信验证码发送,钉钉推送,用户登录注册等等
  • 因为短信验证码必须要上线以后才可以申请,所以先用的自己的一个公众账号申请的
  • flutter客户端的搭建,打包了 web,androd提交应用宝(目前还在审核),iOS 打包到蒲公英,也算是实现了一套代码,三端通用

一些遗憾

  1. 客户端出生的我一直担心的内存问题,所以没有搭建gitlab,线上环境和线下环境也没有区分(囧~~)回过头看看实在是nc操作...
  2. LNMP环境没有自己搭建,这个流程必须要自己走一下的..
  3. flutter 其实并没有系统的学习过,就是在flutter中文网看了看就直接按OC的风格来了,导致代码非常不规范,极其不优雅.满分10分的话,只能给自己打4分.关于这个跨平台方案,以后应该不会再继续学习了,除非是工作中用到,或者是能够给来一些正向收益的话,到时候需要系统的学习一下dart语言和widget的底层.
  4. 真正写起来才发现,php也好,flutter,只会一些语法根本算不得会这门语言,根本无法做到OC的游刃有余,一刀切中要害的那种手到擒来.代码结构也非常混乱,构架比较混乱,大部分都是拿现成的轮子,拼凑出一个产品.

相关文章

网友评论

      本文标题:LNMP+flutter 实现一款简单的app

      本文链接:https://www.haomeiwen.com/subject/vjruvktx.html