尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

30 分钟搭好情侣微信小程序:做任务攒积分换商品,把恋爱过成双向奔赴的小游戏

30 分钟搭好情侣微信小程序:做任务攒积分换商品,把恋爱过成双向奔赴的小游戏 30 分钟搭好情侣微信小程序做任务攒积分换商品把恋爱过成双向奔赴的小游戏【免费下载链接】Rainbow-Cats-Personal-WeChat-MiniProgram给女朋友做的微信小程序情侣自己的任务和商城系统项目地址: https://gitcode.com/gh_mirrors/ra/Rainbow-Cats-Personal-WeChat-MiniProgram谈恋爱最难的往往不是心动而是把随口说出的一起做点什么真正落地。工作一忙约好的晚餐、说定的周末爬山、临睡前的视频常常沦为聊天框里的一句下次一定。Rainbow-Cats-Personal-WeChat-MiniProgram 就是为这件事而生的一款基于微信云开发的情侣微信小程序把做任务、攒积分、换商品串成一套完整的互动闭环让两个人靠一张张小任务、一件件小商品把日常过得有来有回。项目名字有点长没关系跑起来之后你只需要记住六个字任务、积分、商城。一、先承认一件事口头承诺天生容易烂尾回想一下你和另一半的日常说好这周他洗碗结果碗在水池里泡到周末约好一起学英语App 下载完就再没打开过异地恋更是全靠早安晚安硬撑。问题出在哪不是不爱而是缺一个看得见进度、能兑现结果的载体。聊天记录会沉底甜言蜜语会过期但一笔攒下的积分不会。当我做了饭变成我完成了一个任务并收到 20 积分当欠你一次变成这张洗碗券现在就能用承诺就从嘴上搬到了手里。这正是这款小程序想解决的核心痛点把抽象的付出变成可记录、可兑换、可回味的互动。二、玩法拆解任务、积分、商城是怎么转起来的先别管技术用一个场景把规则说透。任务侧走的是发布—执行—确认三步女朋友发布任务比如今晚一起做番茄牛腩并标好奖励积分男朋友去做做完后点击申请完成女朋友确认无误积分自动到账。商品侧走的是上架—购买—使用三段男朋友上架一件商品比如洗碗豁免券明码标价 50 积分女朋友用攒下的积分买下券进入她的仓库哪天她不想洗碗了拿出这张券标记已使用——这一步不可逆用了就是用了。整套规则里藏着一条精妙的防作弊设计确认完成的人不能是获得积分的人谁也不能给自己发任务、自己点完成、自己赚积分。换句话说想给自己加积分门都没有。规则的公平性恰恰是这套情侣微信小程序能长久玩下去的基础。三、越用越顺手的细节这些交互设计藏在哪一个能跑的小程序不难难的是好用。这个项目在体验层面下过不少功夫随便列几条都值得抄作业左滑菜单完成、购买、删除统一用左滑手势操作界面干净利落仓库系统买下的商品先进仓库想用时再取出来标记兑换流程完整闭环搜索框任务和商品多了之后直接搜名字一秒定位预设模板添加任务或商品时可以一键套用预设比如洗碗券一起散步不用每次手敲可拖拽悬浮按钮新增入口是页面上的悬浮球随手拖到顺手的位置积分滑块设置奖励积分不用手输数字滑一下就行时间记录任务发布、商品上架、购买成交的时间全部留痕攒积分的过程一目了然商城顶栏打开商城就能看到当前积分余额心里有数才敢剁手。如果说这些功能是迭代出来的智慧那下面的对比图就是最好的证明——从旧版到新版项目的交互逻辑几乎重做了一遍。四、把商城开进小程序粉色主题下的兑换体验这套系统的第二块拼图是商城。不同于普通电商这里的货币是两个人亲手攒出来的积分每一分都有来处换出去的东西也自带故事。商城的视觉走的是治愈系路线粉色主调、可爱的卡比主题、圆润的卡片布局配上 emoji 点缀整体氛围轻松又亲密。商品没有真实的物流却比真实购物更让人期待——因为你换到的可能是一次按摩一顿早餐或者原谅我这次。五、零服务器背后的秘密微信云开发小程序的分工逻辑说完了玩法聊聊它为什么能一个人也跑得动。答案藏在微信云开发这四个字里——数据库、云函数、存储全部由微信侧托管开发者不用买服务器、不用配域名、不用管运维。项目分两大块前端miniprogram/目录按页面拆分成MainPage首页总览、Mission任务管理、Market积分商城、Account个人仓库等模块负责把数据渲染成上面那些好看的界面。后端cloudfunctions/目录每一个云函数只干一件事addElement负责新增、deleteElement负责删除、editCredit负责加减积分、editStar处理收藏、getList拉取列表、getElementById查详情还有专门用于消息提醒的information。职责单一改起来不打架测试也省心。数据落在云数据库的四个集合里任务表MissionList、商品表MarketList、仓库表StorageList、用户表UserList。两个人的积分、任务、库存全部按_openid隔离互不串号。六、新手部署清单从注册到跑通一步步照做万事开头难但部署这件事跟着清单走就能绕开所有坑。先把项目拿下来git clone https://gitcode.com/gh_mirrors/ra/Rainbow-Cats-Personal-WeChat-MiniProgram接下来按顺序来注册账号到微信公众平台注册小程序开发者账号完善信息与类目这一步是后面所有操作的前提下载工具在开发菜单里下载微信开发者工具扫码登录后导入项目文件夹开通云开发点左上角的云开发按提示开通有免费额度重度使用再考虑付费套餐创建集合进数据库新建MissionList、MarketList、StorageList、UserList四个集合初始化用户表在UserList里加两条记录每条包含字段_openid先留空和credit值为 0配置环境 ID打开miniprogram/envList.js把云开发控制台概览里的环境 ID 填进去上传云函数右键cloudfunctions里的每个云函数文件夹选择云端安装依赖并上传——这一步最繁琐但也最不能跳过收集身份标识两台手机各自打开小程序、各建一个任务然后回数据库里把两条_openid抄出来写入身份信息把抄到的_openid填进UserList同时填进miniprogram/app.js里的_openidA和_openidB改成你们的名字顺手把userA、userB换成你俩的昵称从此首页就是你们专属的主场。跑通之后记得把小程序上传设置为体验版分享给对方——不需要走审核两个人就能立刻开玩。七、进阶定制消息提醒、专属昵称调成你们的样子基础版跑通只是开始这个项目还留了不少自定义接口。消息提醒借助微信订阅消息当对方完成了你发布的任务你会收到一条叮咚任务更新提醒。配置方式也不复杂在miniprogram/pages/MainPage/index.js和MissionAdd/index.js里换成你自己的模板 ID再把cloudfunctions/information/index.js里的双方 openid 改掉部署即可。专属昵称app.js里的userA、userB一改欢迎语、任务归属全部跟着变。交易上限app.js里的maxCredit默认是 500想限制单次大手笔交易改这个数字就行。从昵称到提醒、从积分规则到商品预设这套系统几乎每个角落都能调成你们俩的版本。八、不止做家务这套玩法还能装下哪些场景有人拿它当家务分配器其实它的想象力远不止厨房异地恋的桥梁两个人隔着屏幕却能一起攒积分、一起等兑换距离感被共同目标冲淡不少纪念日的仪式感把准备惊喜礼物设成高积分任务完成后兑换一件专属好物仪式感拉满共同成长的记录仪一起学技能、一起健身、一起早睡每完成一项就攒一笔积分成长轨迹清清楚楚情绪表达的出口有些话不好意思直说帮你完成一个任务就是最好的台阶。规则是死的用法是活的。积分怎么定价、商品上架什么、任务定多难全由你俩说了算。九、现在轮到你俩上场了从一纸约定到一套能跑的情侣任务积分商城中间差的不是技术而是动手的冲动。这款基于微信云开发的情侣微信小程序已经把路铺好了克隆下来、按清单配置、改成你们的名字最快一顿饭的功夫两个人的专属互动平台就能上线。别再让下次一起停在聊天框里。把项目克隆到本地跟着上面的清单走一遍然后邀请另一半从发布第一个任务开始把恋爱过成一场双向奔赴的小游戏——你们的故事值得一套自己的积分系统。【免费下载链接】Rainbow-Cats-Personal-WeChat-MiniProgram给女朋友做的微信小程序情侣自己的任务和商城系统项目地址: https://gitcode.com/gh_mirrors/ra/Rainbow-Cats-Personal-WeChat-MiniProgram创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表