微信小程序云开发迁移项目_百战_1

微信小程序云开发迁移项目 - 课程笔记

一、课程目标

将已有小程序项目（使用传统服务器接口）迁移到微信云开发环境，使用云函数、云数据库和云存储替代原有网络请求。

二、迁移前准备

原有项目特点

• 项目功能完整：包含首页、分类、购物车、用户中心等模块
• 数据来源：通过传统网络请求从服务器API获取数据
• 技术栈：使用 Want UI 组件库
• 文件结构完整：包含 pages、components、api 等目录

云开发环境要求

• 必须使用微信小程序 AppID
• 启用云开发功能
• 使用 JavaScript 基础模板

三、迁移步骤详解

1. 创建新的云开发项目

• 在微信开发者工具中新建项目
• 选择云开发模板（JavaScript）
• 输入有效的 AppID（需在微信公众号平台获取）
• 项目命名为 “mp-shop-cloud”（区分原项目）

2. 清理默认项目文件

• 删除默认生成的 components 文件夹
• 删除默认的 images 资源
• 删除不需要的页面文件（保留 app.js）
• 保留云开发初始化配置

3. 复制原有项目代码

• 将原有项目的以下内容复制到新项目：
  • pages 文件夹（所有页面）
  • components 文件夹（自定义组件）
  • images 文件夹（静态资源）
  • utils 等工具文件夹
  • app.json、app.wxss 等配置文件
• 注意事项：app.js 需要特殊处理，保留云开发初始化代码

4. 解决项目依赖问题

vant-weapp: 轻量、可靠的小程序 UI 组件库

• Want UI 组件库安装：

  npm i @vant/weapp -S --production
  

• 在开发者工具中：工具 → 构建 npm

• 确保 package.json 中包含正确的依赖配置

5. 配置云开发环境

• 打开云开发控制台
• 使用 “evan” 环境（或其他自定义环境）
• 清理测试数据：
  • 删除默认云函数
  • 清空云数据库集合
  • 清理云存储文件

6. 项目结构对比

原项目结构：                云开发项目结构：
mp-shop/                   mp-shop-cloud/
├── pages/                 ├── pages/           # 复制过来
├── components/            ├── components/      # 复制过来
├── api/                  ├── cloud/           # 新增：云函数目录
│   └── http-request.js   ├── envList.js       # 云环境配置
├── utils/                ├── utils/           # 复制过来
└── app.js                └── app.js           # 合并云初始化

四、关键注意事项

1. App.js 配置合并

• 保留原有项目的 globalData 配置
• 添加云开发初始化代码：

wx.cloud.init({
  env: 'evan-xxx', // 云环境ID
  traceUser: true
})

2. Want UI 组件问题

• 原有项目使用 Want UI，需重新安装
• 通过官方GitHub或国内镜像获取
• 构建后需在 app.json 中正确配置

3. 版本兼容性

• 云开发需要基础库 2.2.3 或以上
• 用户登录等功能可能需要特定基础库版本
• 在 “详情 → 本地设置” 中调整调试基础库

五、后续迁移计划

待完成工作：

1. 创建云数据库集合

   • banner 数据表
   • goods 商品表
   • 其他业务表

2. 编写云函数

   • 替换原有的API请求
   • 实现数据查询逻辑

3. 修改前端调用方式

   • 将 wx.request 改为 wx.cloud.callFunction
   • 调整数据解析逻辑

优点对比：

• 传统方式：需要独立服务器、域名备案、API开发
• 云开发：一站式服务、自动扩容、无需运维

六、常见问题解决

编译错误处理

1. 删除 node_modules 重新安装依赖
2. 清除开发者工具缓存：编译 → 重新编译
3. 检查 app.json 页面路径配置

组件找不到

1. 确认 npm 构建成功
2. 检查组件引用路径
3. 查看 Want UI 版本兼容性

七、课程总结

本次课程完成了：

• ✅ 创建云开发项目环境
• ✅ 迁移原有项目代码
• ✅ 解决组件依赖问题
• ✅ 配置云开发基础环境
• ✅ 清理测试数据，准备业务开发

核心收获：掌握了将传统小程序项目迁移到云开发平台的完整流程，为后续使用云数据库和云函数打下基础。

下节预告：创建云数据库集合，编写第一个云函数获取首页数据。