logo
0
0
WeChat Login

小程序云开发模板项目

本项目是一个基于小程序 + 云开发的空白项目,提供了基本的云开发能力演示,帮助开发者快速上手小程序云开发。

Powered by CloudBase

本项目基于 CloudBase AI ToolKit 开发,通过AI提示词和 MCP 协议+云开发,让开发更智能、更高效,支持AI生成全栈代码、一键部署至腾讯云开发(免服务器)、智能日志修复。

项目特点

  • 📄 小程序完善的前端开发能力
  • 🚀 集成云开发云函数等后端能力
  • 🤖 集成 AI IDE 规则,提供智能化开发体验
  • ☁️ 集成云开发 MCP,提供一站式云服务开发部署体验
  • 🎁 深度集成腾讯云开发 CloudBase,提供一站式后端云服务

项目架构

云函数

  • getOpenId:用于获取用户的 openidappidunionid
  • getNotes:获取笔记列表(支持分页和分类筛选)
  • publishNote:发布笔记
  • likeNote:点赞/取消点赞笔记
  • collectNote:收藏/取消收藏笔记

小程序页面

  • index:首页,展示笔记列表(瀑布流布局)
  • publish:发布页,支持图片上传和笔记发布
  • discover:发现页
  • message:消息页
  • profile:个人中心页

自定义组件

  • cloudbase-badge:CloudBase品牌标识组件,可复用的badge显示组件
  • note-card:笔记卡片组件,展示笔记信息

开始使用

前提条件

  • 安装小程序开发工具。
  • 拥有腾讯云开发账号。

安装依赖

云函数依赖已在 cloudfunctions/getOpenId/package.json 中定义,可在云开发控制台中安装依赖。

配置云开发环境

项目已配置云开发环境ID:hjhsite-4gwrqvh455f57d20

如需修改,在 miniprogram/app.js 文件中修改:

wx.cloud.init({ env: 'hjhsite-4gwrqvh455f57d20', // 云开发环境ID traceUser: true, });

快速部署

详细部署步骤请参考 DEPLOY.md

1. 部署云函数

在微信开发者工具中:

  1. 点击左侧"云开发"按钮
  2. 选择环境:hjhsite-4gwrqvh455f57d20
  3. 在"云函数"目录下,右键点击每个云函数文件夹
  4. 选择"上传并部署:云端安装依赖"

需要部署的云函数:

  • getOpenId
  • getNotes
  • publishNote
  • likeNote
  • collectNote

2. 创建数据库集合

  1. 在云开发控制台,进入"数据库"
  2. 创建集合:notes
  3. 权限设置:
    • 所有用户可读:read: true
    • 仅创建者可写:write: "doc.userId == auth.openid"

详细结构说明请参考 miniprogram/DATABASE.md

3. 配置云存储

  1. 在云开发控制台,进入"存储"
  2. 配置权限:允许所有用户上传文件
  3. 设置文件大小限制(建议:单个文件不超过10MB)
  4. 设置允许的文件类型:jpg, jpeg, png, gif

本地开发

  1. 打开微信开发者工具,导入本项目
  2. 确保云开发环境已正确配置
  3. 部署所有云函数(见上方步骤)
  4. 创建数据库集合(见上方步骤)
  5. 点击开发工具中的预览按钮,查看效果

目录结构

├── cloudfunctions/ # 云函数目录 │ ├── getOpenId/ # 获取用户openid │ ├── getNotes/ # 获取笔记列表 │ ├── publishNote/ # 发布笔记 │ ├── likeNote/ # 点赞笔记 │ └── collectNote/ # 收藏笔记 ├── miniprogram/ # 小程序代码目录 │ ├── app.js # 小程序入口文件 │ ├── app.json # 小程序配置 │ ├── app.wxss # 全局样式 │ ├── components/ # 自定义组件 │ │ ├── cloudbase-badge/ # CloudBase徽章组件 │ │ └── note-card/ # 笔记卡片组件 │ ├── pages/ # 页面目录 │ │ ├── index/ # 首页 │ │ ├── publish/ # 发布页 │ │ ├── discover/ # 发现页 │ │ ├── message/ # 消息页 │ │ └── profile/ # 个人中心页 │ ├── CONFIG.md # 云开发配置说明 │ ├── DATABASE.md # 数据库结构说明 │ └── sitemap.json # 站点地图配置 ├── cloudbaserc.json # 云开发配置文件 ├── DEPLOY.md # 部署指南 ├── project.config.json # 项目配置 └── README.md # 项目说明

云开发使用示例

通过 wx.cloud 访问云开发服务:

// 数据库操作 const db = wx.cloud.database(); const result = await db.collection('users').get(); // 查询数据 await db.collection('users').add({ data: { name: 'test' } }); // 添加数据 // 调用云函数 const funcResult = await wx.cloud.callFunction({ name: 'getOpenId' }); // 文件上传 const uploadResult = await wx.cloud.uploadFile({ cloudPath: 'test.jpg', filePath: tempFilePath }); // 调用数据模型 const models = wx.cloud.models;

功能特性

  • ✅ 笔记发布(支持多图上传)
  • ✅ 笔记列表展示(瀑布流布局)
  • ✅ 点赞功能
  • ✅ 收藏功能
  • ✅ 分页加载
  • ✅ 下拉刷新
  • ✅ 上拉加载更多
  • ✅ 云存储图片上传
  • ✅ 数据库CRUD操作

相关文档

扩展开发

您可以根据项目需求,添加新的云函数和页面,实现更多的云开发功能:

  • 评论功能
  • 分享功能
  • 用户关注
  • 消息通知
  • 搜索功能
  • 分类筛选
  • 个人主页
  • 等等...

技术支持

About

创建一个使用 CloudBase Auth 支持微信登录的小程序应用 在 CloudBase 云函数中集成 AI 模型,实现文本生成功能 在微信小程序中集成 CloudBase AI 模型,实现智能对话功能