基于 UniApp 和腾讯云开发（CloudBase）的跨平台应用模板，目前已适配 H5 、 微信小程序 、 支付宝小程序 、 抖音小程序 以及 App (iOS/Android)，其他端的适配正在开发中。为开发者提供了快速构建全栈跨平台应用的能力。
本项目基于 CloudBase AI ToolKit 开发，通过AI提示词和 MCP 协议+云开发，让开发更智能、更高效，支持AI生成全栈代码、一键部署至腾讯云开发（免服务器）、智能日志修复。
- 🚀 基于 UniApp 构建，一套代码多端运行
- ⚡ 使用 Vue 3 Composition API 构建现代化 UI
- 🌐 目前支持 H5 、 微信小程序 、 支付宝小程序 、 抖音小程序 以及 App (iOS/Android) ，其他平台适配开发中
- 🎁 深度集成腾讯云开发 CloudBase，提供一站式后端云服务
- 🔧 自定义 UniApp 适配器，完美适配云开发能力
- 📱 完整的 TypeScript 支持，提供更好的开发体验
各平台展示如下：
| H5 端 | 微信小程序 |
|---|---|
 |
 |
| 支付宝小程序 | 抖音小程序 |
|---|---|
 |
 |
| Android 和 iOS |
|---|
 |
- 框架：UniApp (基于 Vue 3)
- 构建工具：Vite
- 多端支持：H5、微信小程序、支付宝小程序、抖音小程序、App (iOS/Android)（其他平台适配开发中）
- 状态管理：Vue 3 Reactivity API
- 类型支持：TypeScript
本项目使用了以下腾讯云开发（CloudBase）资源：
- 身份认证：用于用户登录和身份验证（匿名登录、手机验证码登录、邮箱验证码登录、手机号/用户名/邮箱密码登录、微信小程序 openId 静默登录）
- 云数据库：用于存储应用数据
- 云函数：用于实现业务逻辑
- 云托管：用于实现业务逻辑
- 云存储：用于存储文件
- 静态网站托管：用于部署 H5 版本
├── src/
│ ├── components/
│ │ ├── show-captcha.vue # 登录验证弹窗组件
│ ├── pages/ # 页面文件
│ │ ├── index/ # 首页
│ │ │ ├── index.vue
│ │ │ └── index.json
│ │ ├── demo/ # 云开发演示页面
│ │ │ ├── demo.vue
│ │ │ └── demo.json
│ │ ├── login/
│ │ │ ├── index.vue # 登录主页面
│ │ │ ├── phone-login.vue # 手机验证码登录页面
│ │ │ ├── email-login.vue # 邮箱验证码登录页面
│ │ │ └── password-login.vue # 密码登录页面
│ │ └── profile/ # 用户信息页面
│ │ └── profile.vue # 用户信息查看页面
│ ├── utils/ # 工具函数和云开发初始化
│ │ ├── cloudbase.ts # 云开发配置
│ │ └── index.ts # 通用工具函数
│ ├── static/ # 静态资源
│ ├── App.vue # 应用入口组件
│ ├── main.ts # 应用入口文件
│ ├── pages.json # 页面路由配置
│ └── manifest.json # 应用配置文件
├── cloudfunctions/ # 云函数目录
│ └── hello/ # 示例云函数
│ ├── index.js
│ └── package.json
├── index.html # H5 模板
├── vite.config.ts # Vite 配置
├── tsconfig.json # TypeScript 配置
├── package.json # 项目依赖
├── cloudbaserc.json # CloudBase CLI 配置
└── README.md # 项目说明
本项目已配置 VS Code 预览功能，支持自动打开浏览器预览：
- 在 VS Code 中打开项目
- 项目会自动加载
.vscode/preview.yml配置 - 启动开发服务器后会自动打开浏览器预览页面
- 默认端口：5173
配置文件位置：.vscode/preview.yml
前提条件
- 安装 Node.js (版本 16 或更高)
- 安装 HBuilderX 或其他支持 UniApp 的开发工具
- 腾讯云开发账号 (可在腾讯云开发官网注册)
安装依赖
npm install配置云开发环境
- 打开
src/utils/cloudbase.ts文件 - 将
ENV_ID变量的值修改为您的云开发环境 ID
const ENV_ID = 'your-env-id'; // 替换为您的云开发环境ID云开发环境配置
在云开发控制台的【扩展能力】->【身份认证】->【登录方式】中开启
- 匿名登录
- 用户名密码登录
- 短信验证码登录
- 邮箱登录
- 微信小程序 openId 登录（需要先在【环境配置】->【小程序认证】中完成小程序认证）
在云开发控制台的【环境配置】->【安全来源】->【安全域名】中添加：
- 开发域名：
http://localhost:5173（本地开发） - 生产域名：您的实际部署域名
在云开发控制台的【环境配置】->【安全来源】->【安全域名】中添加域名：
- 抖音小程序开发域名：
tmaservice.developer.toutiao.com - 支付宝开发域名：
devappid.hybrid.alipay-eco.com
在微信小程序管理后台的【开发】->【开发管理】->【开发设置】->【服务器域名】中配置：
request 合法域名：
https://tcb-api.tencentcloudapi.com
https://your-env-id.service.tcloudbase.com
uploadFile 合法域名：
https://cos.ap-shanghai.myqcloud.com
downloadFile 合法域名：
https://your-env-id.tcb.qcloud.la
https://cos.ap-shanghai.myqcloud.com
注意：请将
your-env-id替换为您的实际环境 ID，地域根据您的云开发环境所在地域调整。
在云开发控制台的【环境配置】->【安全来源】->【移动应用安全来源】中添加应用：
- 应用标识：
your-appSign - 应用凭证：
your-appAccessKey在src/utils/cloudbase.ts文件中，找到appConfig对象，填入您获取到的凭证信息。
const appConfig = {
env: config.env || ENV_ID,
timeout: config.timeout || 15000,
appSign: 'your-appSign', // 应用标识
appSecret: {
appAccessKeyId: 1, // 凭证版本
appAccessKey: 'your-appAccessKey' // 凭证
}本地开发
# H5 开发
npm run dev:h5
# 微信小程序开发
npm run dev:mp-weixin
# 抖音小程序开发
npm run dev:mp-toutiao
# 支付宝小程序开发
npm run dev:mp-alipay
# App (iOS/Android) 开发
# 1. 使用 HBuilderX 打开项目
# 2. 在顶部菜单栏选择【运行】->【运行到手机或模拟器】-> 选择您的设备
# 注意：目前仅支持 APP、H5、微信小程序、抖音小程序和支付宝小程序开发，其他平台适配开发中构建生产版本
# 构建 H5 版本
npm run build:h5
# 构建微信小程序
npm run build:mp-weixin
# 构建抖音小程序
npm run build:mp-toutiao
# 构建支付宝小程序
npm run build:mp-alipay
# 注意：目前仅支持 H5 、微信小程序、抖音小程序和支付宝小程序构建，其他平台适配开发中通过 src/utils/cloudbase.ts 访问云开发服务：
import { app, checkLogin } from './utils/cloudbase'
// 数据库操作
await checkLogin();
const db = app.database();
const result = await db.collection('users').get(); // 查询数据
await db.collection('users').add({ name: 'test' }); // 添加数据
// 调用云函数
const funcResult = await app.callFunction({ name: 'hello' });
// 调用云托管
app.callContainer({
name: 'helloworld',
method: 'POST',
path: '/abc',
header:{
'Content-Type': 'application/json; charset=utf-8'
},
data: {
key1: 'test value 1',
key2: 'test value 2'
},
}).then((res) => {
console.log(res)
});
// 文件上传
const uploadResult = await app.uploadFile({ cloudPath: 'test.jpg', filePath: file });
// 文件下载
cloudbase.downloadFile({
fileID: "cloud://aa-99j9f/my-photo.png"
}).then((res) => {});可以使用 CloudBase CLI 或 MCP 工具部署云函数：
# 使用 CloudBase CLI
tcb functions:deploy hello- 构建 H5 版本：
npm run build:h5 - 登录腾讯云开发控制台
- 进入您的环境 -> 静态网站托管
- 上传
dist/build/h5目录中的文件
- 构建微信小程序版本：
npm run build:mp-weixin - 使用微信开发者工具打开
dist/build/mp-weixin目录 - 上传代码包并发布
- 构建抖音小程序版本：
npm run build:mp-toutiao - 使用抖音开发者工具打开
dist/build/mp-toutiao目录 - 上传代码包并发布
- 构建支付宝小程序版本：
npm run build:mp-alipay - 使用支付宝开发者工具打开
dist/build/mp-alipay目录 - 上传代码包并发布
- ✅ 完全支持所有云开发功能
- ✅ 支持本地开发和生产部署
- ✅ 已配置相关安全域名
- ✅ 完全支持所有云开发功能
- ✅ 支持本地开发和发布
- ✅ 已配置相关域名白名单
- ✅ 完全支持所有云开发功能
- ✅ 支持本地开发和发布
- ✅ 已配置相关域名白名单
- ✅ 完全支持所有云开发功能
- ✅ 支持本地开发和发布
- ✅ 已配置相关域名白名单
- ✅ 完全支持所有云开发功能
- ✅ 支持通过 HBuilderX 进行本地开发
- ✅ 需要配置移动应用安全来源
- 🚧 适配开发中
项目包含完整的云开发功能演示：
- 认证功能: 匿名登录/退出、手机验证码登录、邮箱验证码登录、密码登录、微信小程序 openId 静默登录
- 云函数调用: 调用示例云函数
- 云托管: 调用云托管服务
- 数据库操作: 增加和查询数据
- 数据库监听: 实时监听数据变化
- 文件存储: 上传和下载文件
# 安装 CloudBase CLI
npm install -g @cloudbase/cli
# 登录
tcb login
# 部署到云开发
tcb framework deploy- UniApp - 跨平台应用开发框架
- Vue 3 - 渐进式 JavaScript 框架
- TypeScript - JavaScript 的超集，提供类型支持
- Vite - 下一代前端构建工具
- CloudBase JS SDK - 腾讯云开发 JavaScript SDK
- 环境变量: 确保正确配置云开发环境 ID
- 安全域名: 根据部署平台配置相应的安全域名
- 权限配置: 注意数据库集合的读写权限设置
- 跨端兼容: 部分 API 在不同平台表现可能不同，注意测试
欢迎提交 Issue 和 Pull Request 来改进这个模板！
MIT License