4-2 uniCloud配合cli开发流程(云空间创建+绑定+云函数应用)
CLI 项目关联 uniCloud
CLI 创建的 uni-app 项目同样可以使用 uniCloud,但需要通过 HBuilderX 来管理云开发环境。
步骤一:配置 AppID
- 将 CLI 项目导入 HBuilderX(文件 -> 导入 -> 本地目录)
- 打开
src/manifest.json - 点击"重新获取"uni-app 应用标识(需登录 DCloud 账号)
- 配置微信小程序 AppID(从微信公众平台获取)
步骤二:创建云服务空间
- 登录 uniCloud 控制台
- 点击"服务空间" -> "新建空间"
- 选择云服务商(推荐支付宝云)
- 输入空间名称,选择免费版或付费套餐
- 点击"立即购买" -> "确认开通"
- 等待空间初始化完成
步骤三:创建云开发环境
- 在 HBuilderX 中右键项目根目录
- 选择"创建 uniCloud 云开发环境"
- 选择对应的云服务商
- 等待插件安装完成
步骤四:关联云服务空间
- 右键
uniCloud目录 - 选择"关联云服务空间或项目"
- 选择之前创建的服务空间
- 点击"关联"
云函数 vs 云对象
| 维度 | 云函数 | 云对象 |
|---|---|---|
| 定义 | 云端运行的 JS 函数 | 对云函数的面向对象封装 |
| 调用方式 | uniCloud.callFunction() | uniCloud.importObject() |
| 代码风格 | 单个函数入口 | 对象方法(多个 function) |
| 模块规范 | CommonJS(require) | CommonJS(require) |
重要限制:云函数/云对象内只能使用 CommonJS 规范(require/module.exports),不能使用 ES6 的 import/export 语法。
创建云对象
目录结构
uniCloud-aliyun/
└── cloudfunctions/
└── say-hello/
├── index.obj.js ← 云对象入口
└── package.json ← 函数描述
text
云对象代码
// cloudfunctions/say-hello/index.obj.js
module.exports = {
say() {
return {
message: 'Hello uniCloud!'
}
}
}
javascript
前端调用云对象
<template>
<view>
<button @click="handleClick">调用云对象</button>
</view>
</template>
<script setup>
const handleClick = async () => {
const sayObject = uniCloud.importObject('say-hello')
const res = await sayObject.say()
console.log(res) // { message: 'Hello uniCloud!' }
}
</script>
vue
云函数命名注意事项
- 不同项目如果使用同一个服务空间,不能使用同名的云函数/云对象,否则会互相覆盖
- 命名前检查
cloudfunctions目录中是否已存在同名目录
运行调试
使用云函数后,必须通过 HBuilderX 运行项目(不能只用 CLI 的 npm run dev:mp-weixin),因为云函数的本地运行环境依赖 HBuilderX 提供的插件支持。
HBuilderX -> 运行 -> 运行到小程序模拟器 -> 微信开发者工具
text
运行后在微信开发者工具中点击按钮,Console 中即可看到云对象的响应结果。
苹果芯片 Mac 的依赖问题
macOS Apple Silicon 用户运行时可能缺少 esbuild 的 ARM 原生包。解决方法:
- 根据错误提示安装缺失的包
- 如果 esbuild 版本冲突,在
package.json中添加resolutions字段强制指定版本:
{
"resolutions": {
"esbuild": "0.21.5"
}
}
json
- 删除
node_modules和 lock 文件后重新安装依赖
VS Code 插件冲突
如果安装了 uni-app-enhance 插件导致类型错误,可以先卸载 uni-app-enhance,再卸载其依赖的 V2 扩展插件,最后重启 VS Code。uniCloud 的类型定义已内置在项目的 @dcloudio/types 包中,无需额外扩展。
参考资源
- uniCloud 云函数/云对象 - 官方文档
- uniCloud 开发环境 - 快速上手
↑