V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
HelloWZ
V2EX  ›  分享创造

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

  •  8
     
  •   HelloWZ · 313 天前 · 6360 次点击
    这是一个创建于 313 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    53 条回复    2023-06-13 18:00:15 +08:00
    DavZhn
        1
    DavZhn  
       313 天前
    想问一下,这个被抓后会不会直接或者间接成为 dubo 的证据 ememem 就是单纯的忽然想到了。。
    HelloWZ
        2
    HelloWZ  
    OP
       313 天前
    @DavZhn 哈哈,开发的时候想到这个层面了,写了免责声明。
    就算真的发生,只能说技术无罪吧,他们用微信转账岂不是微信也成了帮凶
    goodidea1
        3
    goodidea1  
       313 天前
    @HelloWZ #2 建议去问下法律相关的问题
    HelloWZ
        4
    HelloWZ  
    OP
       313 天前
    @goodidea1 感谢提醒
    1462326016
        5
    1462326016  
       313 天前
    自然流量吗,还是有做推广
    zhangH258
        6
    zhangH258  
       313 天前
    体验了下,好看的,鼓励鼓励
    justsoup
        7
    justsoup  
       313 天前
    界面很好看,学习了
    多说一嘴,taro 在项目路径 config/prod.js ,mini 里面配置下就可以开启 terser-webpack-plugin 压缩,体积减少 4/5
    一般用 taro 使用小程序不引入整个 taroUI ,太大了,而是用到什么拆什么,直接去 packages 里面拿,改造一下即可
    之前上线了一款小程序,6 个页面,打包完 360kb
    suckli
        8
    suckli  
       313 天前
    感谢分享
    HelloWZ
        9
    HelloWZ  
    OP
       313 天前
    @1462326016 自然流量,基本都靠搜索进去的,第一次推广就是现在发在 v2
    HelloWZ
        10
    HelloWZ  
    OP
       313 天前
    @justsoup 不是多嘴,你的经验很受用,学习了
    pppanda
        11
    pppanda  
       313 天前
    感谢 pixso.cn 提供的设计平台
    -------
    歪个楼,这个是达文西讨要加班费的万兴科技旗下的平台吗
    HelloWZ
        12
    HelloWZ  
    OP
       313 天前
    @pppanda 是的
    zhangshangjin
        13
    zhangshangjin  
       313 天前
    非常好,也挺实用的
    declandragon
        14
    declandragon  
       313 天前
    创建房间,邀请好友,弹出二维码,发送给好友,好友点击消息进来创建了新的房间,两个人不在一个房间
    scal
        15
    scal  
       313 天前
    问题是不会算帐~~~~
    HelloWZ
        16
    HelloWZ  
    OP
       313 天前
    @scal 有结算功能,就是算账
    HelloWZ
        17
    HelloWZ  
    OP
       313 天前
    @declandragon 感谢反馈,分享链接有点小问题,正在修复,暂时可以使用二维码进房间
    HelloWZ
        18
    HelloWZ  
    OP
       313 天前
    @declandragon 已修复
    6397like
        19
    6397like  
       313 天前
    非常赞
    VtoEXL
        20
    VtoEXL  
       313 天前
    赞一个,界面挺不错的。想知道 OP 在 UI 这一块的创作,是怎么样一个流程,如何把那些网站上获取的素材聚集到一起,把界面做的统一又美观。
    spacebound
        21
    spacebound  
       313 天前
    界面很舒服,挺精美的小程序
    HelloWZ
        22
    HelloWZ  
    OP
       313 天前   ❤️ 2
    @VtoEXL 画 UI 的时候先画个草图,构思好每个页面有哪些内容,主题色。然后去找参考(对于我这种非 UI 专业的),最好参考一个完整的 APP ,不然每个页面的风格不统一
    jimczj007
        23
    jimczj007  
       313 天前
    很棒的一款小程序,设计很好,界面也很简洁
    VtoEXL
        24
    VtoEXL  
       313 天前
    @HelloWZ #22 不错不错,谢谢解答
    sc13
        25
    sc13  
       313 天前
    UI 很舒服,赞一个
    fatelight
        26
    fatelight  
       313 天前
    ui 风格喜欢
    hlwjia
        27
    hlwjia  
       313 天前
    某省公安厅:麻烦把数据接口打通一下
    aslanTT
        28
    aslanTT  
       313 天前
    求教,立项里的宣传图是怎么做出来的
    scal
        29
    scal  
       312 天前
    @HelloWZ #16 我的意思麻将算番
    LeegoYih
        30
    LeegoYih  
       312 天前
    很赞,请问 OP 有盈利(回本)吗?这类小程序应该要如何盈利呢?
    现在个人认证开发个小程序太难了,各种限制
    HelloWZ
        31
    HelloWZ  
    OP
       312 天前
    @hlwjia 这是用户隐私🐶
    HelloWZ
        32
    HelloWZ  
    OP
       312 天前   ❤️ 1
    @LeegoYih 目前没有盈利,用爱发电。盈利主要靠广告和私活。
    个人认证的确限制多,我用的企业认证
    HelloWZ
        33
    HelloWZ  
    OP
       312 天前
    @aslanTT 可以参考 ui8.net,或者 pixso.cn 资源社区的封面图
    dongcxcx
        34
    dongcxcx  
       312 天前
    10w+的微信指数算高吗? 感觉是一个比较小众的使用场景. 年纪大的一般不会用这玩意,年轻人真正打牌也就逢年过节
    LeegoYih
        35
    LeegoYih  
       312 天前
    企业认证是自己注册了一个公司吗😂
    HelloWZ
        36
    HelloWZ  
    OP
       312 天前
    @LeegoYih 有这个资源
    izzy27
        37
    izzy27  
       312 天前
    赞 很漂亮的界面
    gotonull
        38
    gotonull  
       311 天前
    bojue
        39
    bojue  
       310 天前
    草图好评
    baimayinqiang
        40
    baimayinqiang  
       310 天前
    赞 ,最近也在学习小程序开发,做了一个非常简单的小程序 #小程序:截图一键打码,可以对聊天截图中的昵称和头像进行马赛克处理,有需要的朋友可以试试
    sumonian
        41
    sumonian  
       308 天前
    10w+的微信指数 这个是怎么查看
    HelloWZ
        42
    HelloWZ  
    OP
       308 天前
    @sumonian 小程序 微信指数
    hiolex1216
        43
    hiolex1216  
       308 天前
    @justsoup 开发者工具本身就可以配置上传代码时压缩脚本文件和 wxml 文件的吧?
    hiolex1216
        44
    hiolex1216  
       308 天前
    https://poker.coder.wang 这种网站不错,怎么做的?有一键生成的懒人工具包吗?哈哈
    hiolex1216
        45
    hiolex1216  
       308 天前
    你的 logo 和草图用什么做的?
    HelloWZ
        46
    HelloWZ  
    OP
       307 天前
    @hiolex1216 vue3+tailwindcss 手写的,草图在本子上手画的,logo PS
    HelloWZ
        47
    HelloWZ  
    OP
       304 天前
    @bojue 感谢
    HelloWZ
        48
    HelloWZ  
    OP
       304 天前
    @spacebound 感谢
    Honwhy
        49
    Honwhy  
       295 天前
    1 、有没有考虑过使用 mpx ,滴滴开源的
    2 、UI 的话,可以考虑下 tdesign
    3 、可以了解下云开发方式,效率会高一点
    HelloWZ
        50
    HelloWZ  
    OP
       295 天前
    @Honwhy
    云开发一生黑;
    如果使用 mpx ,为什么考虑 uni-app 和 taro 呢
    PrtScScrLk
        51
    PrtScScrLk  
       286 天前
    老哥能出一个就是混合开发框架和原生开发的体验上的差别吗?
    pigzzz
        52
    pigzzz  
       258 天前
    想过怎么盈利吗
    HelloWZ
        53
    HelloWZ  
    OP
       257 天前
    @pigzzz 目前就靠随缘的广告
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2807 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:33 · PVG 20:33 · LAX 04:33 · JFK 07:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.