春节期间打牌碰到一个困扰算账。不想每局结束立即付钱,但是几局下来就记不清谁欠谁多少钱了,作为程序员是不是可以开发一款针对打牌的记账软件。
结合使用场景和频率做成微信小程序最合适,去微信搜索”打牌记账“发现已上线的产品众多,但是能用且好用的基本没有,界面粗糙,逻辑混乱,广告横飞。
于是本产品”立项“
命名: 根据微信指数显示打牌记账日搜索量 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.结算积分页面会自动计算每个人的分数
![]() | 1 DavZhn 2023-04-18 11:02:59 +08:00 想问一下,这个被抓后会不会直接或者间接成为 dubo 的证据 ememem 就是单纯的忽然想到了。。 |
![]() | 2 HelloWZ OP @DavZhn 哈哈,开发的时候想到这个层面了,写了免责声明。 就算真的发生,只能说技术无罪吧,他们用微信转账岂不是微信也成了帮凶 |
![]() | 5 1462326016 2023-04-18 11:29:50 +08:00 自然流量吗,还是有做推广 |
![]() | 6 zhangH258 2023-04-18 11:47:52 +08:00 体验了下,好看的,鼓励鼓励 |
![]() | 7 justsoup 2023-04-18 12:26:41 +08:00 界面很好看,学习了 多说一嘴,taro 在项目路径 config/prod.js ,mini 里面配置下就可以开启 terser-webpack-plugin 压缩,体积减少 4/5 一般用 taro 使用小程序不引入整个 taroUI ,太大了,而是用到什么拆什么,直接去 packages 里面拿,改造一下即可 之前上线了一款小程序,6 个页面,打包完 360kb |
![]() | 8 suckli 2023-04-18 12:42:42 +08:00 感谢分享 |
![]() | 9 HelloWZ OP @1462326016 自然流量,基本都靠搜索进去的,第一次推广就是现在发在 v2 |
![]() | 13 zhangshangjin 2023-04-18 14:56:33 +08:00 非常好,也挺实用的 |
![]() | 14 declandragon 2023-04-18 15:40:28 +08:00 创建房间,邀请好友,弹出二维码,发送给好友,好友点击消息进来创建了新的房间,两个人不在一个房间 |
![]() | 15 scal 2023-04-18 15:54:07 +08:00 问题是不会算帐~~~~ |
![]() | 17 HelloWZ OP @declandragon 感谢反馈,分享链接有点小问题,正在修复,暂时可以使用二维码进房间 |
![]() | 18 HelloWZ OP @declandragon 已修复 |
![]() | 19 6397like 2023-04-18 16:30:13 +08:00 非常赞 |
![]() | 20 VtoEXL 2023-04-18 16:36:27 +08:00 赞一个,界面挺不错的。想知道 OP 在 UI 这一块的创作,是怎么样一个流程,如何把那些网站上获取的素材聚集到一起,把界面做的统一又美观。 |
![]() | 21 spacebound 2023-04-18 16:38:27 +08:00 界面很舒服,挺精美的小程序 |
![]() | 22 HelloWZ OP ![]() @VtoEXL 画 UI 的时候先画个草图,构思好每个页面有哪些内容,主题色。然后去找参考(对于我这种非 UI 专业的),最好参考一个完整的 APP ,不然每个页面的风格不统一 ![]() |
![]() | 23 jimczj007 2023-04-18 16:54:49 +08:00 很棒的一款小程序,设计很好,界面也很简洁 |
![]() | 25 sc13 2023-04-18 19:16:11 +08:00 UI 很舒服,赞一个 |
26 pC0oc4EbCSsJUy4W 2023-04-18 19:19:38 +08:00 ui 风格喜欢 |
![]() | 27 hlwjia PRO 某省公安厅:麻烦把数据接口打通一下 |
28 KAaBUcT0D4zEgtxZ 2023-04-18 20:01:49 +08:00 求教,立项里的宣传图是怎么做出来的 |
![]() | 30 LeegoYih 2023-04-18 21:15:14 +08:00 很赞,请问 OP 有盈利(回本)吗?这类小程序应该要如何盈利呢? 现在个人认证开发个小程序太难了,各种限制 |
34 dongcxcx 2023-04-19 09:38:26 +08:00 10w+的微信指数算高吗? 感觉是一个比较小众的使用场景. 年纪大的一般不会用这玩意,年轻人真正打牌也就逢年过节 |
![]() | 35 LeegoYih 2023-04-19 10:42:02 +08:00 企业认证是自己注册了一个公司吗 |
![]() | 37 izzy27 2023-04-19 16:45:07 +08:00 赞 很漂亮的界面 |
38 gotonull 2023-04-20 09:25:10 +08:00 |
![]() | 39 bojue 2023-04-20 23:42:10 +08:00 草图好评 |
40 baimayinqiang 2023-04-21 18:27:36 +08:00 赞 ,最近也在学习小程序开发,做了一个非常简单的小程序 #小程序:截图一键打码,可以对聊天截图中的昵称和头像进行马赛克处理,有需要的朋友可以试试 |
![]() | 41 sumonian 2023-04-23 09:23:59 +08:00 10w+的微信指数 这个是怎么查看 |