[微信小程序] 从 0 到 1 做一款小程序,过程分享 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
HelloWZ
V2EX    分享创造

[微信小程序] 从 0 到 1 做一款小程序,过程分享

  HelloWZ 2023-04-18 10:39:30 +08:00 9751 次点击
这是一个创建于 911 天前的主题,其中的信息可能已经有所发展或是发生改变。

APPLOGO

背景和市场调研

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

于是本产品”立项“

立项

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

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

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

APP 展示

开发

前端:
第一版 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.结算积分页面会自动计算每个人的分数

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

58 条回复    2025-04-01 10:41:43 +08:00
DavZhn
    1
DavZhn  
   2023-04-18 11:02:59 +08:00
想问一下,这个被抓后会不会直接或者间接成为 dubo 的证据 ememem 就是单纯的忽然想到了。。
HelloWZ
    2
HelloWZ  
OP
   2023-04-18 11:13:52 +08:00
@DavZhn 哈哈,开发的时候想到这个层面了,写了免责声明。
就算真的发生,只能说技术无罪吧,他们用微信转账岂不是微信也成了帮凶
goodidea1
    3
goodidea1  
   2023-04-18 11:28:29 +08:00
@HelloWZ #2 建议去问下法律相关的问题
HelloWZ
    4
HelloWZ  
OP
   2023-04-18 11:29:39 +08:00
@goodidea1 感谢提醒
1462326016
    5
1462326016  
   2023-04-18 11:29:50 +08:00
自然流量吗,还是有做推广
zhangH258
    6
zhangH258  
   2023-04-18 11:47:52 +08:00
体验了下,好看的,鼓励鼓励
justsoup
    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
suckli
    8
suckli  
   2023-04-18 12:42:42 +08:00
感谢分享
HelloWZ
    9
HelloWZ  
OP
   2023-04-18 13:17:12 +08:00
@1462326016 自然流量,基本都靠搜索进去的,第一次推广就是现在发在 v2
HelloWZ
    10
HelloWZ  
OP
   2023-04-18 13:18:27 +08:00
@justsoup 不是多嘴,你的经验很受用,学习了
pppanda
    11
pppanda  
   2023-04-18 13:33:12 +08:00
感谢 pixso.cn 提供的设计平台
-------
歪个楼,这个是达文西讨要加班费的万兴科技旗下的平台吗
HelloWZ
    12
HelloWZ  
OP
   2023-04-18 13:46:27 +08:00
@pppanda 是的
zhangshangjin
    13
zhangshangjin  
   2023-04-18 14:56:33 +08:00
非常好,也挺实用的
declandragon
    14
declandragon  
   2023-04-18 15:40:28 +08:00
创建房间,邀请好友,弹出二维码,发送给好友,好友点击消息进来创建了新的房间,两个人不在一个房间
scal
    15
scal  
   2023-04-18 15:54:07 +08:00
问题是不会算帐~~~~
HelloWZ
    16
HelloWZ  
OP
   2023-04-18 16:10:31 +08:00
@scal 有结算功能,就是算账
HelloWZ
    17
HelloWZ  
OP
   2023-04-18 16:11:27 +08:00
@declandragon 感谢反馈,分享链接有点小问题,正在修复,暂时可以使用二维码进房间
HelloWZ
    18
HelloWZ  
OP
   2023-04-18 16:30:05 +08:00
@declandragon 已修复
6397like
    19
6397like  
   2023-04-18 16:30:13 +08:00
非常赞
VtoEXL
    20
VtoEXL  
   2023-04-18 16:36:27 +08:00
赞一个,界面挺不错的。想知道 OP 在 UI 这一块的创作,是怎么样一个流程,如何把那些网站上获取的素材聚集到一起,把界面做的统一又美观。
spacebound
    21
spacebound  
   2023-04-18 16:38:27 +08:00
界面很舒服,挺精美的小程序
HelloWZ
    22
HelloWZ  
OP
   2023-04-18 16:52:02 +08:00   2
@VtoEXL 画 UI 的时候先画个草图,构思好每个页面有哪些内容,主题色。然后去找参考(对于我这种非 UI 专业的),最好参考一个完整的 APP ,不然每个页面的风格不统一
jimczj007
    23
jimczj007  
   2023-04-18 16:54:49 +08:00
很棒的一款小程序,设计很好,界面也很简洁
VtoEXL
    24
VtoEXL  
   2023-04-18 18:18:02 +08:00
@HelloWZ #22 不错不错,谢谢解答
sc13
    25
sc13  
   2023-04-18 19:16:11 +08:00
UI 很舒服,赞一个
pC0oc4EbCSsJUy4W
    26
pC0oc4EbCSsJUy4W  
   2023-04-18 19:19:38 +08:00
ui 风格喜欢
hlwjia
    27
hlwjia  
PRO
   2023-04-18 19:59:26 +08:00
某省公安厅:麻烦把数据接口打通一下
KAaBUcT0D4zEgtxZ
    28
KAaBUcT0D4zEgtxZ  
   2023-04-18 20:01:49 +08:00
求教,立项里的宣传图是怎么做出来的
scal
    29
scal  
   2023-04-18 21:05:10 +08:00
@HelloWZ #16 我的意思麻将算番
LeegoYih
    30
LeegoYih  
   2023-04-18 21:15:14 +08:00
很赞,请问 OP 有盈利(回本)吗?这类小程序应该要如何盈利呢?
现在个人认证开发个小程序太难了,各种限制
HelloWZ
    31
HelloWZ  
OP
   2023-04-19 09:00:20 +08:00
@hlwjia 这是用户隐私
HelloWZ
    32
HelloWZ  
OP
   2023-04-19 09:03:37 +08:00   1
@LeegoYih 目前没有盈利,用爱发电。盈利主要靠广告和私活。
个人认证的确限制多,我用的企业认证
HelloWZ
    33
HelloWZ  
OP
   2023-04-19 09:27:10 +08:00
@aslanTT 可以参考 ui8.net,或者 pixso.cn 资源社区的封面图
dongcxcx
    34
dongcxcx  
   2023-04-19 09:38:26 +08:00
10w+的微信指数算高吗? 感觉是一个比较小众的使用场景. 年纪大的一般不会用这玩意,年轻人真正打牌也就逢年过节
LeegoYih"
    35
LeegoYih  
   2023-04-19 10:42:02 +08:00
企业认证是自己注册了一个公司吗
HelloWZ
    36
HelloWZ  
OP
   2023-04-19 11:03:22 +08:00
@LeegoYih 有这个资源
izzy27
    37
izzy27  
   2023-04-19 16:45:07 +08:00
赞 很漂亮的界面
gotonull
    38
gotonull  
   2023-04-20 09:25:10 +08:00
bojue
    39
bojue  
   2023-04-20 23:42:10 +08:00
草图好评
baimayinqiang
    40
baimayinqiang  
   2023-04-21 18:27:36 +08:00
赞 ,最近也在学习小程序开发,做了一个非常简单的小程序 #小程序:截图一键打码,可以对聊天截图中的昵称和头像进行马赛克处理,有需要的朋友可以试试
sumonian
    41
sumonian  
   2023-04-23 09:23:59 +08:00
10w+的微信指数 这个是怎么查看
HelloWZ
    42
HelloWZ  
OP
   2023-04-23 09:47:48 +08:00
@sumonian 小程序 微信指数
hiolex1216
    43
hiolex1216  
   2023-04-23 18:33:15 +08:00
@justsoup 开发者工具本身就可以配置上传代码时压缩脚本文件和 wxml 文件的吧?
hiolex1216
    44
hiolex1216  
   2023-04-23 18:36:30 +08:00
https://poker.coder.wang 这种网站不错,怎么做的?有一键生成的懒人工具包吗?哈哈
hiolex1216
    45
hiolex1216  
   2023-04-23 18:46:18 +08:00
你的 logo 和草图用什么做的?
HelloWZ
    46
HelloWZ  
OP
   2023-04-24 10:57:42 +08:00
@hiolex1216 vue3+tailwindcss 手写的,草图在本子上手画的,logo PS
HelloWZ
    47
HelloWZ  
OP
   2023-04-27 09:49:19 +08:00
@bojue 感谢
HelloWZ
    48
HelloWZ  
OP
   2023-04-27 09:49:30 +08:00
@spacebound 感谢
Honwhy
    49
Honwhy  
   2023-05-06 01:57:30 +08:00
1 、有没有考虑过使用 mpx ,滴滴开源的
2 、UI 的话,可以考虑下 tdesign
3 、可以了解下云开发方式,效率会高一点
HelloWZ
    50
HelloWZ  
OP
   2023-05-06 09:35:00 +08:00
@Honwhy
云开发一生黑;
如果使用 mpx ,为什么考虑 uni-app 和 taro 呢
PrtScScrLk
    51
PrtScScrLk  
   2023-05-15 16:27:55 +08:00
老哥能出一个就是混合开发框架和原生开发的体验上的差别吗?
pigzzz
    52
pigzzz  
   2023-06-12 11:41:26 +08:00
想过怎么盈利吗
HelloWZ
    53
HelloWZ  
OP
   2023-06-13 18:00:15 +08:00
@pigzzz 目前就靠随缘的广告
Nostalgia
    54
Nostalgia  
   2024-05-08 16:36:44 +08:00
@HelloWZ 请问下两种技术方案,开发周期是怎样的?
(本人有一定的 Vue 3 基础
sumtsui
    55
sumtsui  
   2024-06-20 17:31:47 +08:00
我有个有点离题的提问, 一定要公司主体的公众号才能发布小程序吗
lizy0329
    56
lizy0329  
   2024-07-18 10:50:48 +08:00
@LeegoYih 盈利当然是向赌鬼收钱,开通会员啦
wholve
    57
wholve  
   2024-08-21 00:42:07 +08:00
缺后端吗 哈哈
wyshp
    58
wyshp  
   197 天前
什么时候有时间了可以把前端抽离出来做个通用框架,这个界面 UI 确实做的很成功
关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1587 人在线   最高记录 6679       Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 28ms UTC 16:26 PVG 00:26 LAX 09:26 JFK 12:26
Do have faith in what you're doing.
ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86