[微信小程序] 从 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.结算积分页面会自动计算每个人的分数

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

[DavZhn]

想问一下，这个被抓后会不会直接或者间接成为 dubo 的证据 ememem 就是单纯的忽然想到了。。

[HelloWZ]

@DavZhn 哈哈，开发的时候想到这个层面了，写了免责声明。
就算真的发生，只能说技术无罪吧，他们用微信转账岂不是微信也成了帮凶

[goodidea1]

@HelloWZ #2 建议去问下法律相关的问题

[HelloWZ]

@goodidea1 感谢提醒

[1462326016]

自然流量吗，还是有做推广

[zhangH258]

体验了下，好看的，鼓励鼓励

[justsoup]

界面很好看，学习了
多说一嘴，taro 在项目路径 config/prod.js ，mini 里面配置下就可以开启 terser-webpack-plugin 压缩，体积减少 4/5
一般用 taro 使用小程序不引入整个 taroUI ，太大了，而是用到什么拆什么，直接去 packages 里面拿，改造一下即可
之前上线了一款小程序，6 个页面，打包完 360kb

[suckli]

感谢分享

[HelloWZ]

@1462326016 自然流量，基本都靠搜索进去的，第一次推广就是现在发在 v2

[HelloWZ]

@justsoup 不是多嘴，你的经验很受用，学习了

[pppanda]

感谢 pixso.cn 提供的设计平台
-------
歪个楼，这个是达文西讨要加班费的万兴科技旗下的平台吗

[HelloWZ]

@pppanda 是的

[zhangshangjin]

非常好，也挺实用的

[declandragon]

创建房间，邀请好友，弹出二维码，发送给好友，好友点击消息进来创建了新的房间，两个人不在一个房间

[scal]

问题是不会算帐~~~~

[HelloWZ]

@scal 有结算功能，就是算账

[HelloWZ]

@declandragon 感谢反馈，分享链接有点小问题，正在修复，暂时可以使用二维码进房间

[HelloWZ]

@declandragon 已修复

[6397like]

非常赞

[VtoEXL]

赞一个，界面挺不错的。想知道 OP 在 UI 这一块的创作，是怎么样一个流程，如何把那些网站上获取的素材聚集到一起，把界面做的统一又美观。

[spacebound]

界面很舒服，挺精美的小程序

[HelloWZ]

@VtoEXL 画 UI 的时候先画个草图，构思好每个页面有哪些内容，主题色。然后去找参考（对于我这种非 UI 专业的），最好参考一个完整的 APP ，不然每个页面的风格不统一

[jimczj007]

很棒的一款小程序，设计很好，界面也很简洁

[VtoEXL]

@HelloWZ #22 不错不错，谢谢解答

[sc13]

UI 很舒服，赞一个

[pC0oc4EbCSsJUy4W]

ui 风格喜欢

[hlwjia]

某省公安厅：麻烦把数据接口打通一下

[KAaBUcT0D4zEgtxZ]

求教，立项里的宣传图是怎么做出来的

[scal]

@HelloWZ #16 我的意思麻将算番

[LeegoYih]

很赞，请问 OP 有盈利（回本）吗？这类小程序应该要如何盈利呢？
现在个人认证开发个小程序太难了，各种限制

[HelloWZ]

@hlwjia 这是用户隐私🐶

[HelloWZ]

@LeegoYih 目前没有盈利，用爱发电。盈利主要靠广告和私活。
个人认证的确限制多，我用的企业认证

[HelloWZ]

@aslanTT 可以参考 ui8.net,或者 pixso.cn 资源社区的封面图

[dongcxcx]

10w+的微信指数算高吗? 感觉是一个比较小众的使用场景. 年纪大的一般不会用这玩意,年轻人真正打牌也就逢年过节

[LeegoYih]

企业认证是自己注册了一个公司吗😂

[HelloWZ]

@LeegoYih 有这个资源

[izzy27]

赞 很漂亮的界面

[gotonull]

在电脑上显示排版有点问题

[bojue]

草图好评

[baimayinqiang]

赞 ，最近也在学习小程序开发，做了一个非常简单的小程序 #小程序:截图一键打码，可以对聊天截图中的昵称和头像进行马赛克处理，有需要的朋友可以试试

[sumonian]

10w+的微信指数 这个是怎么查看

[HelloWZ]

@sumonian 小程序 微信指数

[hiolex1216]

@justsoup 开发者工具本身就可以配置上传代码时压缩脚本文件和 wxml 文件的吧？

[hiolex1216]

https://poker.coder.wang 这种网站不错，怎么做的？有一键生成的懒人工具包吗？哈哈

[hiolex1216]

你的 logo 和草图用什么做的？

[HelloWZ]

@hiolex1216 vue3+tailwindcss 手写的，草图在本子上手画的，logo PS

[HelloWZ]

@bojue 感谢

[HelloWZ]

@spacebound 感谢

[Honwhy]

1 、有没有考虑过使用 mpx ，滴滴开源的
2 、UI 的话，可以考虑下 tdesign
3 、可以了解下云开发方式，效率会高一点

[HelloWZ]

@Honwhy
云开发一生黑；
如果使用 mpx ，为什么考虑 uni-app 和 taro 呢

[PrtScScrLk]

老哥能出一个就是混合开发框架和原生开发的体验上的差别吗?

[pigzzz]

想过怎么盈利吗

[HelloWZ]

@pigzzz 目前就靠随缘的广告

[Nostalgia]

@HelloWZ 请问下两种技术方案，开发周期是怎样的？
（本人有一定的 Vue 3 基础

[sumtsui]

我有个有点离题的提问, 一定要公司主体的公众号才能发布小程序吗

[lizy0329]

@LeegoYih 盈利当然是向赌鬼收钱，开通会员啦

[wholve]

缺后端吗 哈哈

[wyshp]

什么时候有时间了可以把前端抽离出来做个通用框架，这个界面 UI 确实做的很成功