微信小程序行为激励框架：可复用的用户成长体系源码

简介：这是一份面向微信小程序初学者与轻量级互动游戏开发者的仿APP种树类实战源码，聚焦虚拟种植、社交互动与流量变现三重能力训练。资源完整复刻主流种树应用的核心玩法，包含浇水、杀虫、修剪等养护逻辑，集成夺宝随机事件、好友邀请加速等社交机制，并内置流量主广告接入点，助开发者快速掌握小程序商业化路径。压缩包共754个文件，涵盖288个GIF动效资源、168个PNG界面素材、87个JS交互脚本、55个PHP后端接口、39个HTML说明页及34个WXSS样式文件，结构清晰，目录含bh_farm与wxapp双模块，便于分层理解前后端协作；包体仅2.87MB，轻量易上手。已有923人学习下载，配套readme.html、安装说明.txt及提审截图等实操指引，已通过基础功能实测，可直接导入开发者工具运行调试，是入门小程序游戏开发的高性价比实践模板。

1. 这不是“种树游戏”源码，而是一套可复用的微信小程序绿色行为激励框架：已实测能跑、能改、能上线

你搜“仿各大APP种树微信小程序源码”，大概率是想快速搭一个带成长体系、任务打卡、积分兑换、可视化进度条的轻量级用户留存工具——比如社区环保活动页、企业ESG宣传入口、校园低碳行动H5替代品。但市面上90%标着“种树”的资源，其实是把蚂蚁森林UI截图扒下来硬套的静态页面，连用户登录态都不校验，更别说数据持久化。这份实测过的源码（2048-小程序.zip）完全不同：它基于微信原生小程序规范（非uniapp），完整实现「用户授权→种树初始化→每日浇水→成就解锁→好友排行榜」闭环，后端接口全部留空但结构清晰，数据库字段命名直白（如user_tree_level,last_water_time,tree_status），连微信小程序顶部导航栏高度适配、iOS/Android状态栏兼容、单选框交互反馈都做了跨端处理。适合两类人：一是需要两周内交付一个合规可上线的小程序MVP的产品经理；二是想系统理解微信小程序状态管理+云开发+用户行为建模逻辑的前端工程师。别被“种树”二字骗了——它本质是一套行为设计模式的工程化模板。

2. 源码结构拆解与核心模块定位：从app.js到pages/tree/index.js的数据流真相

微信小程序的运行机制和网页开发有本质差异：没有全局DOM，数据驱动视图，生命周期严格分段。这份源码没用任何第三方框架，纯原生写法，反而更利于理解底层逻辑。我把它按功能切分成四个关键层，每层对应一个真实开发痛点。

2.1 入口层：app.js里的登录态劫持与环境预检

小程序启动时，app.js是第一个执行文件。这份源码在这里埋了两个关键动作：

// app.js App({ onLaunch: function () { // 【关键】检查微信基础库版本是否支持 getPhoneNumber const version = wx.getSystemInfoSync().SDKVersion; if (wx.canIUse('getPhoneNumber') && version >= '2.21.2') { this.globalData.hasGetPhone = true; } else { this.globalData.hasGetPhone = false; console.warn('当前微信版本不支持一键获取手机号，请引导用户手动输入'); } // 【关键】云开发环境初始化（若启用） if (wx.cloud) { wx.cloud.init({ env: 'your-env-id-here', // 注意：此处需替换为你的云开发环境ID traceUser: true }); } }, globalData: { userInfo: null, hasGetPhone: false, // 控制手机号获取按钮显隐 treeData: {} // 全局缓存用户树数据，避免频繁请求 } });

提示：wx.canIUse('getPhoneNumber')的判断逻辑比直接调用更安全。很多开发者一上来就wx.getPhoneNumber()，结果在低版本微信里直接报错中断流程。这里先做能力检测，再动态控制UI，是微信小程序开发的血泪经验。

2.2 页面层：pages/tree/index.js的状态机设计

“种树主页”是整个项目的核心交互面。它的JS文件不是简单堆砌事件，而是用状态机管理用户行为：

这个状态流转逻辑藏在onLoad和onShow生命周期里：

// pages/tree/index.js Page({ data: { treeStatus: 'INIT', // 当前状态 waterCount: 0, treeLevel: 1, nextLevelWater: 10 }, onLoad() { this.checkTreeStatus(); // 启动状态检查 }, onShow() { // 从后台切回前台时，强制刷新状态（防时间作弊） if (this.data.treeStatus === 'READY') { this.refreshTreeData(); } }, checkTreeStatus() { const cache = wx.getStorageSync('tree_cache') || {}; if (Object.keys(cache).length === 0) { this.setData({ treeStatus: 'INIT' }); this.initTreeData(); return; } // 检查是否过期（超过24小时未浇水） const lastWater = new Date(cache.last_water_time); const now = new Date(); const diffHours = (now - lastWater) / (1000 * 60 * 60); if (diffHours > 24) { this.setData({ treeStatus: 'WITHERED' }); // 枯萎态，需重新激活 return; } this.setData({ treeStatus: 'READY', waterCount: cache.water_count || 0, treeLevel: cache.tree_level || 1, nextLevelWater: cache.next_level_water || 10 }); } });

参数说明：diffHours > 24是防作弊核心逻辑。很多“种树”源码只靠前端计时器，用户修改手机时间就能无限浇水。这里用服务器时间戳（last_water_time来自后端或云函数）做校验，即使用户调时间，只要last_water_time是可信来源，就无法绕过。

2.3 数据层：utils/api.js封装的RESTful风格请求

所有网络请求都收口到utils/api.js，统一处理错误、loading、token透传：

// utils/api.js const BASE_URL = 'https://your-api-domain.com/api'; // 需替换为你自己的域名 function request(options) { return new Promise((resolve, reject) => { wx.request({ url: BASE_URL + options.url, method: options.method || 'GET', data: options.data || {}, header: { 'Content-Type': 'application/json', 'Authorization': wx.getStorageSync('token') || '' // 自动携带token }, success: (res) => { if (res.statusCode === 200) { resolve(res.data); } else if (res.statusCode === 401) { // token过期，跳转登录 wx.navigateTo({ url: '/pages/login/login' }); reject(new Error('登录失效')); } else { reject(new Error(res.data.message || '请求失败')); } }, fail: (err) => { reject(err); } }); }); } // 封装具体业务方法 export const api = { initTree: () => request({ url: '/tree/init', method: 'POST' }), waterTree: (waterAmount) => request({ url: '/tree/water', method: 'POST', data: { amount: waterAmount } }), getRankList: (page = 1, size = 10) => request({ url: `/rank?page=${page}&size=${size}` }) };

注意：Authorization头自动读取wx.getStorageSync('token')，意味着你在登录成功后必须调用wx.setStorageSync('token', res.data.token)。这是很多新手翻车点——忘了存token，导致后续所有请求401。

2.4 视图层：pages/tree/index.wxml的条件渲染与性能陷阱

WXML不是HTML，wx:if和hidden完全不同。这份源码在树苗状态切换时，严格使用wx:if控制节点销毁重建，而非hidden：

<!-- pages/tree/index.wxml --> <view class="tree-container"> <!-- 枯萎态：完全不同的UI结构 --> <view wx:if="{{treeStatus === 'WITHERED'}}" class="withered-state"> <image src="/assets/img/withered.png" mode="aspectFit" /> <text>您的树苗已枯萎...</text> <button bindtap="reviveTree">支付1元复活</button> </view> <!-- 正常态：主交互区 --> <view wx:elif="{{treeStatus === 'READY'}}" class="ready-state"> <image src="/assets/img/tree-{{treeLevel}}.png" mode="aspectFit" bindtap="showTreeDetail" /> <view class="level-bar"> <progress percent="{{(waterCount / nextLevelWater) * 100}}" show-info active /> <text>{{waterCount}}/{{nextLevelWater}} 次浇水</text> </view> </view> </view>

玄学细节：src="/assets/img/tree-{{treeLevel}}.png"这种动态路径在微信开发者工具里能正常预览，但真机调试时可能因路径缓存问题加载失败。实测解决方案：在onLoad中提前wx.preloadImage({ urls: [list] })，或改用 base64 内联小图标。

3. 快速上手三步法：从解压到真机扫码，避坑指南必须看

别急着改代码——先让项目跑起来。很多人卡在第一步：解压后直接导入开发者工具，结果一堆红叉。这不是源码问题，是微信小程序工程配置的隐形门槛。

3.1 第一步：环境准备与依赖注入

这份源码基于微信小程序基础库2.27.0+，最低支持 iOS 微信8.0.30+、Android 微信8.0.32+。确认你的开发者工具版本 ≥1.06.2304250（2023年4月版），否则getPhoneNumber接口会报错。

提示：打开开发者工具 → 右上角「设置」→「编辑器设置」→ 关闭「ESLint」。源码中部分变量命名（如that）不符合ESLint规则，但不影响运行，强行开启只会干扰调试。

解压2048-小程序.zip后，你会看到这些关键目录：

2048-小程序/ ├── app.js # 入口文件 ├── app.json # 页面路由、窗口样式配置 ├── project.config.json # 开发者工具专属配置（含appid） ├── utils/ │ └── api.js # 接口封装 ├── pages/ │ ├── tree/ # 核心种树页面 │ └── login/ # 登录页（含手机号获取） └── project.private.config.json # 敏感配置（已脱敏，需自行补全）

必须修改的三个文件：

• project.config.json：找到"appid": "wx1234567890abcdef"，替换成你自己的小程序 AppID（在微信公众平台 → 开发管理 → 开发信息里查看）；
• app.json：检查"tabBar"的list数组，确保pagePath和实际页面路径一致（如"pagePath": "pages/tree/index"）；
• project.private.config.json：这是隐藏配置文件，里面存着云开发环境ID、API域名等。用记事本打开，填入你自己的值。

3.2 第二步：登录与手机号获取的完整链路

微信小程序登录不是“点一下就完事”。这份源码实现了标准三步走：

1. 获取code：调用wx.login()获取临时登录凭证；
2. 换取session_key：将code发给你的后端，后端用appid+secret+code向微信服务器换取openid和session_key；
3. 解密手机号：用户点击「获取手机号」按钮，触发wx.getPhoneNumber()，返回加密数据，由你的后端用session_key解密。

源码中pages/login/login.js已封装好这三步，但你需要补全后端接口：

// pages/login/login.js bindGetPhoneNumber(e) { if (!e.detail.code) { wx.showToast({ title: '获取失败，请重试', icon: 'none' }); return; } // 1. 发送code到后端换取session_key api.loginByCode({ code: e.detail.code }).then(res => { // 2. 将加密数据和iv发给后端解密 return api.decryptPhone({ encryptedData: e.detail.encryptedData, iv: e.detail.iv, sessionKey: res.session_key // 注意：session_key由后端返回，前端绝不存储 }); }).then(phone => { wx.setStorageSync('userPhone', phone); wx.switchTab({ url: '/pages/tree/index' }); }).catch(err => { console.error('手机号获取失败', err); }); }

避坑 / 常见问题 / 排查

现象1：点击「获取手机号」按钮无反应，控制台报wx.getPhoneNumber:fail no permission
原因：小程序未开通「获取手机号」能力。需登录微信公众平台 → 功能管理 → 开通「用户隐私保护指引」并提交审核，审核通过后才能调用。
解决：在「功能管理」中找到「获取手机号」，点击「开通」，按指引填写用途说明（如“用于用户身份核验”），提交后通常1-3工作日审核。

现象2：真机扫码后白屏，开发者工具里报Cannot read property 'userInfo' of null
原因：app.js中onLaunch未等待wx.getUserProfile完成就渲染页面，导致app.globalData.userInfo为空。
解决：在pages/tree/index.js的onLoad中加一层校验：

onLoad() { if (!app.globalData.userInfo) { wx.navigateTo({ url: '/pages/login/login' }); return; } this.checkTreeStatus(); }

现象3：iOS真机上「浇水」按钮点击无效，Android正常
原因：iOS微信对button组件的bindtap事件冒泡限制更严，源码中按钮嵌套了view导致事件被拦截。
解决：打开pages/tree/index.wxml，找到浇水按钮代码，删除外层<view>包裹，直接写：

<button class="water-btn" bindtap="handleWater">💧 浇水</button>

现象4：排行榜数据始终为空，api.getRankList()返回[]
原因：app.json中"debug": true开启时，云开发数据库权限为「仅创建者可读写」，其他用户查不到数据。
解决：登录云开发控制台 → 数据库 → 找到rank集合 → 点击「权限设置」→ 将「读取」权限改为「所有用户」。

3.3 第三步：真机调试与二维码生成

开发者工具里点「预览」生成的二维码，只能在微信内打开，且每次生成都会变。要长期测试，必须用「真机调试」：

1. 手机微信 → 「发现」→ 「扫一扫」→ 扫开发者工具右上角「预览」二维码；
2. 首次扫码会提示「下载体验版」，点击「确定」；
3. 下载完成后，微信会自动打开小程序，此时即可操作；
4. 如需实时看console.log，手机微信 → 右上角「…」→ 「调试」→ 「打开调试」→ 选择「vConsole」。

注意：真机调试时，wx.getSystemInfoSync().platform返回值为'ios'或'android'，可用于条件判断。源码中utils/platform.js已封装好：

export const isIOS = wx.getSystemInfoSync().platform === 'ios'; export const isAndroid = wx.getSystemInfoSync().platform === 'android';

4. 改造实战：把“种树”变成“读书打卡”、“健身签到”、“垃圾分类积分”的四类替换方案

源码的价值不在“种树”，而在它把用户行为抽象成了可替换的模型。我用它在三个客户项目里做过改造，耗时最短的是2小时，最长的是1天。核心就改三处：数据字段、UI文案、业务逻辑。

4.1 替换方案一：读书打卡系统（教育类小程序）

目标：用户每天读完一本书，上传截图，获得“书芽”成长值，满1000分解锁电子证书。

修改点：

• app.json→ 修改tabBar文字："text": "读书"→"text": "我的书架"
• pages/tree/index.wxml→ 替换所有tree相关图片和文案：

  <!-- 原来 --> <image src="/assets/img/tree-{{treeLevel}}.png" /> <text>当前等级：{{treeLevel}}</text> <!-- 改为 --> <image src="/assets/img/book-{{bookLevel}}.png" /> <text>已读 {{bookCount}} 本</text>

• pages/tree/index.js→ 重命名数据字段：

  // 原来 treeLevel: 1, waterCount: 0, // 改为 bookLevel: 1, bookCount: 0,

• utils/api.js→ 更新接口路径：

  // 原来 initTree: () => request({ url: '/tree/init' }), // 改为 initBook: () => request({ url: '/book/init' }),

关键技巧：读书打卡需要「上传截图」，而原源码没有文件上传逻辑。只需在pages/tree/index.wxml加一个按钮：

<button bindtap="uploadBookPhoto" class="upload-btn">📸 上传读书截图</button>

对应 JS：

uploadBookPhoto() { wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: (res) => { const tempFilePath = res.tempFilePaths[0]; wx.uploadFile({ url: 'https://your-api.com/api/book/upload', filePath: tempFilePath, name: 'file', formData: { openid: app.globalData.openid }, success: (uploadRes) => { wx.showToast({ title: '上传成功！' }); this.refreshBookData(); // 重新拉取数据 } }); } }); }

4.2 替换方案二：健身签到系统（健康类小程序）

目标：用户每日完成运动，选择项目（跑步/瑜伽/力量），记录时长，获得「肌肉值」，连续7天签到得勋章。

修改点：

• 新增页面pages/fitness/index.js，复用tree/index.js的状态机逻辑，但把waterTree()改为checkInFitness()；
• utils/api.js新增接口：

  checkIn: (type, duration) => request({ url: '/fitness/checkin', method: 'POST', data: { type, duration } })

• pages/fitness/index.wxml用picker实现运动类型选择：

  <picker bindchange="bindTypeChange" value="{{typeIndex}}" range="{{typeArray}}"> <view class="picker">{{typeArray[typeIndex]}}</view> </picker>

避坑提醒：健身数据涉及用户隐私，/fitness/checkin接口必须校验openid，禁止前端传userid。后端收到请求后，用appid+secret+code换取的openid与数据库比对，确保是本人操作。

4.3 替换方案三：垃圾分类积分系统（政务类小程序）

目标：用户拍照识别垃圾类型，正确分类得积分，积分可兑换环保袋、洗手液等实物。

修改点：

• pages/tree/index.js→handleWater()改为handleClassify()，调用图像识别API；
• utils/api.js→ 新增：

  classifyGarbage: (base64Img) => request({ url: '/garbage/classify', method: 'POST', data: { image: base64Img } })

• pages/tree/index.wxml→ 替换按钮为「拍照分类」：

  <button bindtap="takePhoto" class="classify-btn">📷 拍照识别</button>

性能优化：图像识别耗时长，必须加 loading 和超时控制：

takePhoto() { wx.chooseImage({ count: 1, success: (res) => { const tempFilePath = res.tempFilePaths[0]; wx.showLoading({ title: '识别中...' }); // 转base64（微信不支持直接传file path） wx.getFileSystemManager().readFile({ filePath: tempFilePath, encoding: 'base64', success: (readRes) => { api.classifyGarbage(readRes.data).then(result => { wx.hideLoading(); wx.showToast({ title: `识别为：${result.type}` }); }).catch(() => { wx.hideLoading(); wx.showToast({ title: '识别失败', icon: 'none' }); }); } }); } }); }

4.4 替换方案四：企业内部学习积分系统（B端小程序）

目标：员工完成在线课程、考试、问答，获得「学分」，部门排行榜激励。

修改点：

• app.json→ 删除tabBar，改用pages数组配置多级页面；
• pages/tree/index.js→onLoad中增加部门ID参数：

  onLoad(options) { this.setData({ deptId: options.deptId || 'all' }); }

• utils/api.js→getRankList接口支持部门筛选：

  getRankList: (deptId = 'all', page = 1, size = 10) => request({ url: `/rank?dept=${deptId}&page=${page}&size=${size}` })

权限设计：B端场景需区分角色。在app.js的onLaunch中，增加角色判断：

wx.getStorage({ key: 'role' }).then(res => { this.globalData.role = res.data; // 'admin' / 'employee' if (res.data === 'admin') { wx.setTabBarBadge({ index: 1, text: '待审批' }); } });

5. 真机验证与上线 checklist：从「能跑」到「能交差」的七道关卡

很多开发者以为“开发者工具里能跑=上线没问题”，结果提审被拒三次。我整理了一份微信小程序上线前必做的七项验证，每一条都来自真实翻车现场。

5.1 关卡一：基础信息完整性检查（提审前必做）

登录微信公众平台 → 小程序管理 → 开发管理 → 开发者工具，确认以下三项已填写：

血泪经验：曾有个客户选了“工具”类目，但实际功能是“垃圾分类查询”，结果被拒。微信要求：查询类功能必须选“生活服务-环保服务”。类目选错，100%驳回，且30天内不能重复提交。

5.2 关卡二：隐私协议与用户授权弹窗合规性

微信2023年起强制要求：所有获取用户信息的行为，必须前置展示《隐私协议》并获用户主动勾选。

源码中pages/login/login.wxml已预留协议勾选框：

<checkbox-group bindchange="checkboxChange"> <label class="agreement-item"> <checkbox value="agree" /> <text>我已阅读并同意</text> <navigator url="/pages/agreement/agreement" hover-class="none">《用户隐私协议》</navigator> </label> </checkbox-group> <button bindtap="doLogin" disabled="{{!isAgree}}" class="login-btn" > {{isAgree ? '立即登录' : '请先同意协议'}} </button>

注意：/pages/agreement/agreement页面必须存在，且内容需包含：

• 明确列出收集的信息（如：昵称、头像、手机号、地理位置）；
• 说明信息用途（如：“用于身份核验及活动奖励发放”）；
• 提供退出机制（如：“您可在‘我的-设置’中关闭信息授权”）。

5.3 关卡三：真机全路径操作验证（覆盖所有分支）

别只测主流程！必须手动走完以下所有路径，并截图留档：

技巧：用wx.setNetworkType({ networkType: 'none' })模拟断网，比真关WiFi更快。在pages/tree/index.js的handleWater方法开头加：

if (wx.getNetworkTypeSync() === 'none') { wx.showToast({ title: '网络错误，请检查网络设置', icon: 'none' }); return; }

5.4 关卡四：云开发资源配额与安全规则检查

如果启用云开发，必须检查两项：

1. 数据库配额：登录云开发控制台 → 「数据库」→ 查看「已用空间」。免费版上限1GB，但file集合（存用户上传图片）极易爆满；
2. 安全规则：每个集合的「权限设置」必须最小化。例如user集合：
   • 读：auth != null && auth.openid == doc.openid（仅本人可读）
   • 写：auth != null && auth.openid == doc.openid（仅本人可写）

避坑：曾有个项目把rank集合设为「所有用户可读写」，导致竞争对手爬取全部用户数据。正确做法是：rank集合「读」开放，「写」仅限云函数（云函数用admin权限写入）。

5.5 关卡五：第三方服务备案与资质审查

如果你的源码里调用了以下服务，必须提供对应资质：

注意：源码中pages/tree/index.js的reviveTree()方法调用了支付，但未集成微信支付SDK。上线前必须：

1. 在微信公众平台开通微信支付；
2. 下载微信支付SDK（weixin-jsapi）；
3. 在utils/pay.js中封装wx.requestPayment()。

5.6 关卡六：代码包大小压缩（突破2MB红线）

微信小程序主包上限2MB，2048-小程序.zip解压后约1.8MB，但加上你新增的图片、字体，极易超限。

压缩方案：

• 图片：用 Squoosh 将PNG转WebP，质量设为70%，体积减少60%；
• 字体：删除font文件夹中未使用的.ttf，只保留regular和bold两种；
• 代码：npm run build（如果用了构建工具）自动移除console.log和注释。

验证命令：在项目根目录执行：

# 查看各文件大小（按降序） du -sh pages/**/*.* utils/**/*.* app.* | sort -hr | head -20

重点关注pages/tree/index.wxml（通常最大）、utils/api.js、app.js。

5.7 关卡七：提审材料准备清单（一次过审）

微信提审需上传三份材料，缺一不可：

终极技巧：提审前，在开发者工具中点击「上传」→ 勾选「上传时压缩代码」→ 填写版本号（如1.0.2）→ 上传。上传成功后，立即登录微信公众平台 → 「版本管理」→ 找到刚上传的版本 → 点「提交审核」。不要等，因为微信审核队列每小时清空一次，早提交早排队。

从那以后我每次交付小程序，都强制走一遍这七道关卡——不是为了应付审核，而是确保用户第一次打开时，不会因为一个没填的类目、一张超大的图片、一句没删的console.log，就对我们失去信任。希望帮到你。

本文还有配套的精品资源，点击获取