分享打牌记账小程序开发技术栈

105 阅读2分钟

市场需求

牌友们,是不是在牌局中为记账而烦恼?赢了不知道谁应该付钱,输了不知道应该找谁报销,一不小心还容易引发误会。现在,一款打牌记账神器来了,让您告别繁琐记账,赢牌更容易!
微信搜索:牌桌记账 , 即可立即体验

a1.png

市场现状

根据微信指数显示打牌记账日搜索量10w+,春节期间达90w+,近百万。
但市面上提供的产品,UI落后,广告横飞。 给用户带来很不好的体验。
我们提供的这款产品, 秉持着无广告原则,希望能给用户带来一丝爽感。
并且为保重程序的稳定运行, 新购了服务器来支撑系统的运行.

开发过程

UI设计

首先,调研来市面上很多的打牌记账小程序, 大多数界面雷同。 终于找打一款<打牌记>做的很用心。
在这个产品的基础上,使用figma进行初步的UI设计。

WX20240517-205651@2x.png **figma真的是一款高效的设计工具, 推荐给大家。 **

前端(uniapp)

前端采用的技术是uniapp, 组件库选用的是thorui
这个组件库有着类似微信的效果。 用起来也非常方便。
关于uniapp如何集成throui,请查看我之前的文章uniapp从0到1集成thorui

WX20240517-210144@2x.png 整个项目的代码结构如上图,主要完成的功能有:

  • store全局存储功能
  • 登陆注册功能
  • 启动时刷新token功能
  • http请求的封装
  • websocket实现聊天室功能(直白的讲就是同一个房间相互转账可见)

后端(springboot)

整个网关层是采用springboot完成构建, 主要完成的功能如下:

  • 微信授权登录
  • jwt接口鉴权
  • 图片上传功能
  • websocket后端代码
  • 全局异常拦截
  • 创建房间
  • 生成房间微信小程序码
  • 邀请好友功能
  • 转账功能
  • 查询账单详情

WX20240517-210829@2x.png

参考作品

从0到1开发一款小程序,打牌记开发过程分享