# miniprogram-cloud-base **Repository Path**: graduation-design-collection/miniprogram-cloud-base ## Basic Information - **Project Name**: miniprogram-cloud-base - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-05-12 - **Last Updated**: 2025-05-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 微信小程序云开发脚手架 基于微信小程序原生框架的云开发脚手架，集成了Vant Weapp组件库和TypeScript支持。 ## 项目特点 - **原生框架**：使用微信小程序原生框架，无额外学习成本 - **TypeScript支持**：全面使用TypeScript提高代码质量和开发效率 - **云开发**：集成云函数、云数据库和云存储功能 - **Vant Weapp**：集成优秀的UI组件库，提供美观的界面 - **Mock服务**：内置Mock服务，可在无云环境下进行开发和测试 - **自动登录**：内置用户自动登录逻辑 - **表结构调整**：支持动态调整表结构和测试数据 ## 功能模块 1. **首页**：内容展示、轮播图、下拉刷新、上拉加载更多 2. **个人中心**：用户信息、功能入口、开发者选项 3. **内容详情**：内容展示、点赞、收藏、分享 4. **Mock服务**：模拟云函数和云数据库，支持开关控制 5. **数据库初始化**：一键初始化云数据库和测试数据 ## 开发准备 ### 环境要求 - 微信开发者工具 v1.06.2301180 或更高版本 - Node.js 12.0.0 或更高版本 ### 安装步骤 1. 克隆本仓库 ```bash git clone https://github.com/your-username/miniprogram-cloud-base.git ``` 2. 打开微信开发者工具，导入项目 3. 安装依赖 ```bash # 进入miniprogram目录 cd miniprogram # 安装依赖 npm install # 构建npm # 在微信开发者工具中点击"工具" -> "构建npm" ``` 4. 开通云开发 - 在微信开发者工具中，点击"云开发"按钮 - 根据提示开通云开发 - 创建环境（如不创建则使用默认环境） - 在project.config.json文件中更新云环境ID 5. 上传云函数 - 在cloudfunctions目录下，右键点击每个云函数文件夹 - 选择"上传并部署" ### 使用Mock服务 Mock服务允许你在没有云环境的情况下进行开发和测试，特别适合前期开发阶段或离线工作环境。 1. **开启Mock服务** - 在"我的"页面中，开发者选项下打开"Mock控制"开关 - 所有API调用将使用本地Mock数据而非真实云环境 2. **配置Mock接口** - 在开启Mock控制后，点击"Mock接口设置"可以单独控制每个API的Mock状态 - 可以选择性地打开或关闭某些API的Mock 3. **自定义Mock数据** - Mock数据定义在 `miniprogram/mock/db/data` 目录下 - 你可以修改这些文件来自定义测试数据 4. **重置Mock数据** - 点击"重置Mock数据"可以恢复初始测试数据 - 适用于测试过程中数据被修改后需要重新开始测试的情况 ### 初始化数据库 当你需要在真实云环境中设置初始数据时，可以使用数据库初始化功能： 1. 在"我的"页面中，开发者选项下点击"初始化数据库" 2. 确认后，云函数将自动创建以下集合并导入测试数据： - `users`: 用户信息表 - `contents`: 内容表 - `collections`: 用户收藏表 - `view_history`: 浏览历史表 ## 项目结构 ``` miniprogram-cloud-base/ ├── cloudfunctions/ # 云函数目录 │ ├── login/ # 登录云函数 │ ├── initDatabase/ # 数据库初始化云函数 │ │ ├── index.js # 云函数入口 │ │ ├── package.json # 依赖配置 │ │ └── data/ # 测试数据 │ ├── getContents/ # 获取内容列表云函数 │ ├── getContentDetail/ # 获取内容详情云函数 │ └── ... # 其他业务云函数 ├── miniprogram/ # 小程序源码 │ ├── api/ # API接口封装 │ ├── components/ # 自定义组件 │ ├── mock/ # Mock服务 │ │ ├── db/ # Mock数据库 │ │ │ ├── data/ # 测试数据 │ │ │ └── schema.ts # 表结构定义 │ │ ├── services/ # Mock服务实现 │ │ └── mock-switch.ts # Mock开关控制 │ ├── models/ # 数据模型定义 │ ├── pages/ # 页面 │ │ ├── index/ # 首页 │ │ ├── profile/ # 个人中心 │ │ └── content-detail/ # 内容详情 │ ├── services/ # 服务层 │ ├── styles/ # 全局样式 │ ├── utils/ # 工具函数 │ │ ├── request.ts # 请求封装 │ │ ├── storage.ts # 存储封装 │ │ └── util.ts # 工具函数 │ ├── app.ts # 应用入口 │ ├── app.json # 全局配置 │ └── app.wxss # 全局样式 ├── typings/ # TypeScript类型定义 ├── project.config.json # 项目配置 └── README.md # 项目说明 ``` ## 开发指南 ### 添加新页面 1. 在miniprogram/pages目录下创建新的页面目录，例如 `my-page` 2. 添加以下四个文件： ``` my-page/ ├── my-page.wxml # 页面结构 ├── my-page.wxss # 页面样式 ├── my-page.ts # 页面逻辑 └── my-page.json # 页面配置 ``` 3. 在app.json中的pages数组中添加页面路径： ```json "pages": [ "pages/index/index", "pages/profile/profile", "pages/content-detail/content-detail", "pages/my-page/my-page" ] ``` ### 添加新云函数 1. 在cloudfunctions目录下创建新的云函数目录，例如 `myFunction` 2. 添加index.js和package.json文件： ``` myFunction/ ├── index.js # 云函数入口 └── package.json # 依赖配置 ``` 3. 编写云函数逻辑，示例： ```javascript // index.js const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db = cloud.database() exports.main = async (event, context) => { // 云函数逻辑 return { result: '云函数执行成功' } } ``` 4. 在package.json中添加依赖： ```json { "name": "myFunction", "version": "1.0.0", "description": "我的云函数", "main": "index.js", "dependencies": { "wx-server-sdk": "~2.6.3" } } ``` 5. 在微信开发者工具中右键点击云函数目录，选择"上传并部署" ### 添加新的Mock服务 1. 在miniprogram/mock/services目录下添加新的服务文件，例如 `myService.ts`： ```typescript // myService.ts import { mockDB } from '../db'; export const myFunction = async (data: any) => { // Mock逻辑实现 return { result: { message: '这是一个Mock响应' } }; }; ``` 2. 在index.ts中导出新服务： ```typescript // services/index.ts export * from './login'; export * from './content'; export * from './user'; export * from './myService'; // 添加这行 ``` 3. 在mock-switch.ts的defaultMockSettings中添加对应的API配置： ```typescript // mock-switch.ts const defaultMockSettings = { enabled: true, apis: { login: true, getContents: true, // ... 其他API配置 myFunction: true // 添加这行 } }; ``` ### 使用API接口 1. 在miniprogram/api目录下创建或修改接口文件： ```typescript // 新建 myApi.ts 或在现有文件中添加 import { callFunction } from '../utils/request'; export const myFunction = async (data: any) => { return await callFunction('myFunction', data); }; ``` 2. 在页面中导入并使用： ```typescript import { myFunction } from '../../api/myApi'; Page({ async onSomeAction() { try { const res = await myFunction({ someParam: 'value' }); console.log(res); } catch (error) { console.error(error); } } }); ``` ## 性能优化指南 为提高小程序性能，推荐以下优化措施： 1. **合理使用分包加载** - 将不常用页面放入分包 - 在app.json中配置分包结构 2. **图片资源优化** - 使用适当格式和大小的图片 - 考虑使用云存储和CDN加速 3. **避免频繁setData** - 合并setData调用 - 仅更新必要数据 4. **使用懒加载** - 页面滚动时再加载远处内容 - 使用placeholder提前占位 5. **缓存策略** - 合理使用本地缓存 - 为API响应设置过期时间 ## 常见问题解答 ### 1. 云函数调用失败 **问题**：调用云函数时报错"云函数调用失败" **解决方案**： - 检查云函数是否已上传部署 - 检查app.ts中的云环境ID是否正确 - 检查云开发权限是否开通 - 尝试关闭Mock开关，使用真实云环境 ### 2. 无法连接云数据库 **问题**：无法读取或写入云数据库 **解决方案**： - 检查数据库集合是否创建 - 检查数据库权限设置 - 使用"初始化数据库"功能创建必要的集合 - 检查云开发资源使用量是否超限 ### 3. 组件样式异常 **问题**：Vant组件样式显示异常 **解决方案**： - 确认是否正确执行了"构建npm" - 检查app.json中的组件引入是否正确 - 尝试删除miniprogram_npm目录后重新构建 ### 4. TypeScript类型错误 **问题**：出现TypeScript类型错误 **解决方案**： - 检查tsconfig.json配置 - 确保类型定义完整 - 考虑在typings目录添加缺失的声明文件 ## 后续开发计划 1. 添加用户认证功能 2. 实现内容搜索功能 3. 添加图片上传功能 4. 优化页面切换动画 5. 增加消息推送功能 ## 贡献指南 欢迎贡献代码或提出建议，请通过以下方式参与： 1. Fork本仓库 2. 创建您的特性分支 (git checkout -b feature/AmazingFeature) 3. 提交您的更改 (git commit -m 'Add some AmazingFeature') 4. 推送到分支 (git push origin feature/AmazingFeature) 5. 打开一个Pull Request ## 许可证 [MIT License](LICENSE)