一、技术栈转换
将源码下载下来，然后使用AI编程工具。
| 模块 | 网页版 | 小程序版 |
|---|---|---|
| 前端框架 | React + Vite | WX小程序原生（WXML + WXSS） |
| UI 渲染 | React 组件 + Canvas | 小程序自定义组件 + Canvas |
| 用户登录 | Supabase Auth（邮箱） | WX一键登录（wx.login） |
| 后端 | Supabase（PostgreSQL） | WX云开发（云函数 + 云数据库） |
| 路由 | React Router | 小程序页面栈（wx.switchTab） |
二、关键改造点
1. 宠物渲染组件转换
-
问题：小程序 Canvas API 与网页不同
-
解决 ：使用
this.createSelectorQuery()获取 Canvas 节点，用 observer 监听属性变化 -
坑：真机上宠物外观不更新 → 用 key 机制强制重渲染
// 强制重渲染
this.setData({
petRenderKey: Date.now()
});
2. 用户系统接入WX登录
- 使用
wx.login()获取 code - 调用云函数
auth完成登录/注册 - 自动创建用户和宠物数据
3. 数据模型迁移
- PostgreSQL → 云数据库（NoSQL）
- 注意：云数据库集合不会自动创建，首次写入时会报错
- 解决 ：在云函数中添加
ensureCollection()逻辑
4. 游戏逻辑适配
- 离线衰减算法：客户端计算 + 服务端校验
- 金币系统：喂食消耗 3 金币，完成任务获得金币
- 训练限制：每天每种训练最多 3 次（本地存储 + 云端双重校验）
三、真机调试的常见坑
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 宠物外观不更新 | setData 合并优化导致不重渲染 |
用 key 强制组件重建 |
| 云数据库集合不存在 | 集合不会自动创建 | 云函数中添加自动创建逻辑 |
| 自定义导航栏适配 | 不同机型状态栏高度不同 | 用 wx.getSystemInfoSync() 动态计算 |
| 动画卡顿 | 频繁调用 setData |
用 CSS 动画代替 JS 动画 |
四、性能优化
1. 包体积优化（主包限制 2MB）
- 使用 SVG 代替 PNG
- 图片上传到云存储（不占本地包）
- 定期清理无用资源
2. 云函数优化
- 减少云函数调用次数（合并操作）
- 使用本地缓存（
wx.setStorageSync） - 数据库字段添加索引
3. 动画优化
- 用 CSS 动画代替 JS 动画
- 避免频繁
setData（用 Canvas 自绘制动画）
五、上线流程
Step 1：准备工作
- 注册WX小程序账号
- 开通云开发环境
- 下载并安装WX开发者工具
Step 2：导入项目
- 打开WX开发者工具
- 选择"导入项目"
- 填写 AppID（在WX公众平台获取）
- 选择项目目录
Step 3：上传云函数
- 在开发者工具中，右键点击"cloudfunctions"文件夹
- 选择"上传所有云函数"
- 等待上传完成
Step 4：测试
- 使用模拟器测试基本功能
- 使用"真机调试"功能在实际手机上测试
- 检查所有云函数是否正常工作
Step 5：上传代码
- 点击开发者工具右上角"上传"按钮
- 填写版本号和项目备注
- 点击"上传"
Step 6：提交审核
- 登录WX公众平台
- 进入"版本管理" → "开发版本"
- 点击"提交审核"
- 填写审核信息（功能页面、测试账号等）
- 提交审核（通常需要 1-3 个工作日）
Step 7：发布上线
- 审核通过后，在WX公众平台点击"发布"
- 小程序正式上线
小程序已经正式上线，搜索AI像素宠物即可体验；
最近我在调试用应用做后台，然后链接到一个硬件显示AI宠物对话，请点赞关注我，后续进展持续更新！