春节期间打牌碰到一个困扰———算账。不想每局结束立即付钱,但是几局下来就记不清谁欠谁多少钱了,作为程序员是不是可以开发一款针对打牌的记账软件。
结合使用场景和频率做成微信小程序最合适,去微信搜索”打牌记账“发现已上线的产品众多,但是能用且好用的基本没有,界面粗糙,逻辑混乱,广告横飞。
于是本产品”立项“
命名: 根据微信指数显示打牌记账日搜索量 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 2023-04-18 19:59:26 +08:00
某省公安厅:麻烦把数据接口打通一下
|
28
aslanTT 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+的微信指数 这个是怎么查看
|
43
hiolex1216 2023-04-23 18:33:15 +08:00
@justsoup 开发者工具本身就可以配置上传代码时压缩脚本文件和 wxml 文件的吧?
|
44
hiolex1216 2023-04-23 18:36:30 +08:00
https://poker.coder.wang 这种网站不错,怎么做的?有一键生成的懒人工具包吗?哈哈
|
45
hiolex1216 2023-04-23 18:46:18 +08:00
你的 logo 和草图用什么做的?
|
46
HelloWZ OP @hiolex1216 vue3+tailwindcss 手写的,草图在本子上手画的,logo PS
|
48
HelloWZ OP @spacebound 感谢
|
49
Honwhy 2023-05-06 01:57:30 +08:00
1 、有没有考虑过使用 mpx ,滴滴开源的
2 、UI 的话,可以考虑下 tdesign 3 、可以了解下云开发方式,效率会高一点 |
51
PrtScScrLk 2023-05-15 16:27:55 +08:00
老哥能出一个就是混合开发框架和原生开发的体验上的差别吗?
|
52
pigzzz 2023-06-12 11:41:26 +08:00
想过怎么盈利吗
|
55
sumtsui 188 天前
我有个有点离题的提问, 一定要公司主体的公众号才能发布小程序吗
|
57
wholve 127 天前
缺后端吗 哈哈
|