更新记录

1.0.5（2025-11-13）

优化组件

1.0.4（2025-11-13）

优化组件

1.0.3（2025-11-13）

优化组件

平台兼容性

uni-app(3.6.14)

uni-app x(3.6.14)

其他

tree-game 高仿蚂蚁森林

一个功能完整的蚂蚁森林游戏组件，支持浇水、施肥、能量球收集、好友互动与排行榜等核心功能，轻松为您的 App 注入绿色能量。

✨ 功能特性

🌳 核心玩法

• 种树养成：支持多阶段树苗成长（小树、中树、大树）
• 浇水系统：点击浇水，水滴动画效果，提升树苗成长值
• 施肥功能：收集肥料，为树苗施肥加速成长
• 能量球收集：点击收集能量球，增加水滴值
• 进度系统：实时显示树苗成长进度和等级

🎮 互动功能

• 好友互动：支持好友排行榜查看
• 在线排行：实时查看在线用户排名
• 签到系统：每日签到获取奖励
• 社交分享：支持分享功能

🌤️ 环境系统

• 天气显示：实时显示温度和湿度
• 动态背景：精美的天空和土地背景
• 动画效果：丰富的交互动画，提升用户体验

📦 安装使用

方式一：通过 uni_modules 导入（推荐）

组件已放置在 uni_modules 目录下，可直接使用。

方式二：手动导入

<template>
  <view class="container">
    <tree-game></tree-game>
  </view>
</template>

<script>
import treeGame from '@/uni_modules/tree-game/components/tree-game/tree-game.vue'

export default {
  components: {
    treeGame
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
}
</style>

🎯 使用示例

基础使用

<template>
  <view class="page">
    <tree-game></tree-game>
  </view>
</template>

<script>
import treeGame from '@/uni_modules/tree-game/components/tree-game/tree-game.vue'

export default {
  components: {
    treeGame
  }
}
</script>

<style>
.page {
  width: 100%;
  height: 100vh;
}
</style>

📱 支持平台

uni-app 平台支持

• ✅ Vue2 / Vue3
• ✅ H5 (Safari, Chrome)
• ✅ App (Android, iOS, Harmony)
• ✅ 小程序 (微信、支付宝、头条、百度、***、京东、QQ、飞书等)
• ✅ 快应用 (华为、联盟)

🔧 配置说明

组件内部数据结构示例：

info: {
  votes: 2967,           // 水滴值
  treeName: "蚂蚁森林",   // 树名称
  level: 16,             // 等级
  progress: 74.73,       // 成长进度
  temperature: "",       // 温度
  humidity: "",          // 湿度
  score: 80,             // 养分
  waterDrop: 1660,       // 待收集水滴
  myWaterDrop: 2967,     // 已收集水滴
  myFertilizer: 300,     // 已收集肥料
}

🎨 功能按钮说明

• 摄像头按钮：拍照功能（可自定义）
• 在线排行：查看在线用户排行榜
• 签到按钮：每日签到获取奖励
• 施肥按钮：为树苗施肥
• 浇水按钮：为树苗浇水
• 收集按钮：收集能量球和肥料

📝 版本信息

• 当前版本：v1.0.1
• 更新日期：魔改，全段适配
• 最低 HBuilderX 版本：^3.1.0
• 最低 uni-app 版本：^3.6.14

🔗 相关链接

• 支持暗黑模式：✅
• 支持国际化：✅
• 支持宽屏适配：✅

📄 许可证

本组件为商业组件，使用前请确认授权。

让您的 App 快速拥有绿色能量！ 🌱