✨ 布景和市场调研

新年期间打牌碰到一个困扰———算账。不想每局完毕立即付钱,可是几局下来就记不清谁欠谁多少钱了,作为程序员是不是可以开发一款针对打牌的记账软件。
结合运用场景和频率做成微信小程序最合适,去微信查找”打牌记账“发现已上线的产品众多,可是能用且好用的基本没有,界面粗糙,逻辑紊乱,广告横飞。

所以本产品”立项“

立项

  • 命名: 依据微信指数显现打牌记账日查找量10w+,新年期间达90w+,近百万。可是”打牌记账“已被运用,所以定下了”打牌记“这个颇有情调的姓名

  • 产品规划: 页面由主页(静默登录,设置头像昵称,运用简介),房间页(主页面,包含我的积分,约请老友,老友列表,转账结算等功能),我的(历史记录,设置等功能)共三个页面组成

  • UI: 一款好的产品不行获取的是简洁美观的UI,作为一名前端没有专业的UI常识,所以到处搜寻美观的界面规划,以作参阅。感谢 dribbble.com,ui8.net,uinotes.com 供给的创意。感谢pixso.cn供给的规划平台,flaticon.com供给的icon,以及zfont.cn供给的免费字体。重复修正N遍规划后,做出自己基本满意的UI图。

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

开发

前端:
第一版 taro+taroUI

开发之初打算快速迭代上线,选用了taro+taroUI 搭配react+ts进行开发,开发效率的确很高。可是坏处也不少如bug无法确定是taro仍是原生的问题,taro打包体积大影响小程序打开速度。

开发要点

①用户登录:小程序回收了自动获取用户昵称头像的才能(吐槽一下:微信废物),所以利用wx.login()获取用户openid,后端结构用户信息时自动分配默许头像昵称回来给前端。

②房间用户数据同步: 依据房间ID创建websocket 、房间成员接收服务端消息推送刷新数据

第二版 原生+weUI

本着学习原生小程序语言的目的重构了悉数代码,对第一版业务逻辑进行梳理精简,代码组件化,采用原生weUI,代码包体积减少80%

后端: Nodejs+MongoDB 对数据进行增删改查,文件上传

静态资源: CDN

上线

开发时间基本都集中在业余时间,陆陆续续规划加开发耗时两个月有余,目前累计用户800+,日活100.

扫描上图二维码或许点击下面链接体会

手机端可点击下面链接打开小程序 poker.coder.wang

总结

以前都是跟着产品司理做项目,只用负责自己的模块就可以。第一次从0到1完好开发一个项目,其间包括登录逻辑规划,个人信息修正逻辑,转账逻辑规划,数据库规划等,后期要点进行产品体会优化。都是不行多得的开发经历。上线之后和朋友一同试用,肯定了这个项目的实用价值,并且在体会过程中提出优化建议,使得这个软件变的更好用易用。

打牌记 小程序运用教程

1.微信查找或扫码进入小程序,体系会默许生成头像昵称
2.点击创建房间进入房间页
3.点击约请老友生成约请二维码,可直接共享给老友或群组
4.老友扫码或点击约请进入房间,点击转账进行积分搬运
5.结算积分页面会自动计算每个人的分数

欢迎我们体会的一起给出宝贵意见,谢谢