从 0 到 1 做一款小程序，过程分享

[HelloWZ]

✨ 背景和市场调研

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

于是本产品”立项“

🏆 立项

• 命名： 根据微信指数显示打牌记账日搜索量 10w+,春节期间达 90w+，近百万。但是”打牌记账“已被使用，于是定下了”打牌记“这个颇有情调的名字

• 产品设计： 页面由首页(静默登录，设置头像昵称，使用简介)，房间页(主页面，包含我的积分，邀请好友，好友列表，转账结算等功能)，我的(历史记录，设置等功能)共三个页面组成

• UI： 一款好的产品不可获取的是简洁美观的 UI ，作为一名前端没有专业的 UI 知识，于是到处搜寻好看的界面设计，以作参考。感谢 dribbble.com，ui8.net，uinotes.com 提供的灵感。感谢pixso.cn提供的设计平台，flaticon.com提供的 icon ，以及zfont.cn提供的免费字体。反复修改 N 遍设计后，做出自己基本满意的 UI 图。

🖥 开发

前端：
第一版 taro+taroUI

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

开发重点

①用户登录：小程序回收了自动获取用户昵称头像的能力(吐槽一下：微信垃圾)，于是利用 wx.login()获取用户 openid ，后端构造用户信息时自动分配默认头像昵称返回给前端。

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

第二版 原生+weUI

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

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

静态资源： CDN

🎯 上线

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

扫描上图二维码或者点击下面链接体验

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

📚总结

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

打牌记 小程序使用教程

1.微信搜索或扫码进入小程序，系统会默认生成头像昵称
2.点击创建房间进入房间页
3.点击邀请好友生成邀请二维码，可直接分享给好友或群组
4.好友扫码或点击邀请进入房间，点击转账进行积分转移
5.结算积分页面会自动计算每个人的分数

👋👋👋 欢迎大家体验的同时给出宝贵意见，谢谢

[wgfire]

我们这里打牌都是一局完，立马付钱的 哈哈

[xyholic]

不错，比那个一堆广告的简单清爽

[HelloWZ]

@xyholic 感谢体验，广告太丑，破坏美感，暂时没考虑加广告

[calmbinweijin]

设计的很好看