【生活娱乐】萌宠猜猜看PetGuess-面向全球爱宠人士的一款APP
-
我是一名外贸行业的从业者，想通过TRAE开发一款面向全球爱宠人士的APP。
-
以下是Demo开发过程：
-
先上传了一个参赛文档，要求按照文档要求制作参赛Demo。
文档中描述的项目是一个宠物AI行为分析小程序，包含以下核心页面和功能：
-
首页 - 宠物卡片 + 功能入口 + 今日贴士
-
声音分析 - 录音 + 波形 + AI解读
-
行为解读 - 行为选择 + 语义匹配
-
历史记录 - 筛选 + 详情
-
宠物档案 - CRUD + 当前宠物设置
-
个人中心 - 数据统计 + 成就系统
技术栈：微信小程序原生开发（WXML + WXSS + JS），本地存储，AI语义知识库。
创建一个可运行的Demo。由于微信小程序需要在微信开发者工具中运行，不能直接创建一个完整的小程序。但可以创建一个模拟的Web版本Demo，或者创建一个小程序项目的代码文件。
先规划一下Demo的结构：
-
模拟手机外壳
-
底部TabBar（首页、历史、我的）
-
首页：宠物卡片、功能入口（声音分析、行为解读）、今日贴士
-
声音分析页：录音按钮、波形动画、AI解读结果
-
行为解读页：宠物类型选择、行为选择列表、解读结果
-
历史记录页：分析历史列表
-
宠物档案页：宠物列表、添加/编辑宠物
-
个人中心页：统计数据、成就徽章
数据存储：使用localStorage模拟
需要创建一个完整的HTML Demo来模拟"萌宠猜猜看"微信小程序。这个Demo需要包含：
-
模拟手机外壳 + TabBar
-
首页：宠物卡片、声音分析/行为解读入口、每日贴士
-
声音分析页：录音按钮、波形动画、AI解读
-
行为解读页：行为选择、语义匹配
-
历史记录页：分析历史列表
-
宠物档案页：宠物列表、添加/编辑
-
个人中心页：统计数据、成就徽章
还需要实现：
-
AI语义知识库（前端模拟）
-
localStorage存储
-
成就系统
-
页面切换动画
核心页面
-
首页：宠物卡片展示、声音分析/行为解读双入口、每日贴士
-
声音分析：猫狗切换、模拟录音波形动画、AI解读结果（情绪标签+需求推断+详细解读+行动建议）
-
行为解读：8种猫咪行为 + 8种狗狗行为的语义库，点击即出分析结果
-
历史记录：自动保存每次分析，按时间倒序展示
-
宠物档案：多宠管理、添加新宠物、一键切换当前宠物
-
个人中心：累计/今日/宠物数统计、等级系统、8枚成就徽章
技术实现
-
内置完整的AI语义知识库（6种猫叫声+6种狗叫声+8种猫行为+8种狗行为）
-
localStorage本地持久化存储（历史记录、宠物档案、成就进度）
-
8枚成就徽章自动解锁逻辑
-
模拟手机外壳 + TabBar 导航，还原小程序体验
以下是提取的SessionID：
-
-
1905880097358956:ec0f6ee3fe5540ef95c9b762e93155df_6a4db2ef0f25b4742bf9cdc5.6a4dfe0601f908fe1d5705da.6a4dfe0601f908fe1d5705d8:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 15:36:38)1905880097358956:390f784a84e2c9d4fd58ab905adb29e8_6a4db2ef0f25b4742bf9cdc5.6a4dbd0001f908fe1d57056b.6a4db2ef0f25b4742bf9cdc6:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 10:59:121905880097358956:35ac8fbdc849d35309f2088886cca13f_6a4db2ef0f25b4742bf9cdc5.6a4e052501f908fe1d5705f4.6a4e052501f908fe1d5705f2:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 16:07:01)
- 萌宠猜猜看_Demo.html.zip (13.5 KB)
