V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
HelloWZ
V2EX  ›  分享发现

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

  •  
  •   HelloWZ · 2023-04-17 14:13:27 +08:00 · 1362 次点击
    这是一个创建于 373 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这是图片

    ✨ 背景和市场调研

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

    于是本产品”立项“

    🏆 立项

    • 命名: 根据微信指数显示打牌记账日搜索量 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.结算积分页面会自动计算每个人的分数

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

    第 1 条附言  ·  2023-04-18 10:40:53 +08:00
    发错节点了,不好意思
    4 条回复    2023-08-09 11:12:32 +08:00
    wgfire
        1
    wgfire  
       2023-04-17 15:38:02 +08:00
    我们这里打牌都是一局完,立马付钱的 哈哈
    xyholic
        2
    xyholic  
       2023-04-18 10:01:01 +08:00
    不错,比那个一堆广告的简单清爽
    HelloWZ
        3
    HelloWZ  
    OP
       2023-04-18 10:22:27 +08:00
    @xyholic 感谢体验,广告太丑,破坏美感,暂时没考虑加广告
    calmbinweijin
        4
    calmbinweijin  
       259 天前
    设计的很好看
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3246 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 13:42 · PVG 21:42 · LAX 06:42 · JFK 09:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.