#小程序云开发挑战赛#-萌宠创造营-我是咸鱼
发布于 4 年前 作者 xiuying45 3212 次浏览 来自 分享

1 应用场景及目标用户

“萌宠创造营”微信小程序的主要为想养宠物却暂时没有条件实现的人群提供一个虚拟养宠场景,使用户先在虚拟场景中体验养宠生活,然后获取一定养宠知识后再去养宠物。

该小程序通过提供虚拟领养萌宠、AR躲猫猫、虚拟喂食以及与宠物对话等功能让用户真切体验养宠物的过程,通过培养用户的陪伴觉知、增加养宠知识来培养用户的养宠责任心,对领养宠物承担一定的职责。本小程序主要针对人群为没有经验而不敢养宠物或者只是想“虚拟”体验养宠等因为各种原因暂时无法真正养一只宠物的爱宠人士。

2 创新点

(1)“AR躲猫猫”是一个创意与技术方面都具有创新的功能模块。在创意方面,打开摄像头之后宠物的位置是未知的,用户带着好奇心探索宠物位置是一个有趣的体验,同时在现实意义上提醒用户与宠物进行肢体互动。在技术方面,基于webgl的threejs在小程序平台上运行对模型的要求很高,模型制作与threejs适配的方法也是创新点之一。

(2)“宠物说话”的语音由开发者使用“小黄人”特效变声器录制,两条必做语音之后是四条循环语音,新颖有趣。

(3)“遛弯”结合微信步数API,步数大于100才可以打卡,步数的范围不同,宠物有话说的内容也不同,这样个性化的设置具有创新性。

(4)参加“结业考试”并获得绿卡是升华整个小程序重要的部分,不仅在小程序里可以休闲娱乐、学到养宠知识,还能通过测试检验是否具备养宠的基本知识,使用户有清晰的认知。正如平时谈到原生家庭道“做父母的应该有个考试”,谈到养宠道“做一个合格的铲屎官应该有个考试”,本小程序实现了这一想法,是一个创新。

3 架构图


模块图

业务流程图

4 实现技术

(1)AR技术:本小程序在“AR躲猫猫”中使用的AR技术是用threejs技术将gtlf格式的3d模型显示在canvas组件中,并且开启摄像头,实现AR效果。

(2)获取微信步数:执行wx.getWeRunData,将cloudID传给云函数,获取近30日步数信息。

(3)生成海报:绘制canvas,将用户头像和昵称绘制上去之后将canvas转换为图片用canvasToTempFilePath方法保存到本地。然后将图片路径传给image图片的src。

(4)养宠考试:所有题目用json文件存储,随机打乱显示题目,完成一题就将加得分,错误就将题号加入错题数组。

(5)宠物说话:判断投喂与遛弯的状态,根据状态调取语音内容,用户调用wx.createInnerAudioContext().src设置播放路径,wx.createInnerAudioContext().play()播放语音。

5 运行截图


欢迎页面

创造专属萌宠

进入小窝

点击嘴巴或者点击“投喂”

遛弯打卡

养宠饲养指南列表

指南详情页

AR躲猫猫-等待萌宠出现

找到萌宠

图5-6 生成海报

图5-7 积分达到100分时的提醒

点击“永不提醒”,用户需手动点击绿字进入考试

答题界面

超过80分可以点击领取绿卡

6 团队简介

我是咸鱼队是由 北京邮电大学的两小只程序媛组成。佛系参赛,多多关照。

 

3 回复

这个AR很有前途

AR躲猫猫 哈哈😆

回到顶部