微信小游戏 (Cocos) 快速开始

AI 快速开始
完整开发指引

准备工作

在开始之前，请确保您已完成以下准备：

开通云开发环境：开通云开发环境
开发工具：下载并安装微信开发者工具
小程序账号：注册微信小程序，获取小程序的 AppID

Client

配置你的 AI 工具以连接 CloudBase 能力支持本地与托管两种连接方式，详见连接方式。

步骤 1：安装 / 配置 CloudBase

步骤 2：和 AI 对话

在 AI 对话中依次输入以下内容:

prompt

安装 CloudBase Skills：命令 npx skills add tencentcloudbase/cloudbase-skills -y

使用 CloudBase Skills： 使用 CloudBase Skills：在微信小游戏 (Cocos)中集成云开发，包括数据库和云存储功能

准备工作

在开始之前，请确保您已完成以下准备：

开通云开发环境：开通云开发环境
开发工具：下载并安装微信开发者工具
小程序账号：注册微信小程序，获取小程序的 AppID

更多详情请参考：微信小游戏 (Cocos) 完整文档

安装 SDK

@cloudbase/js-sdk 配合 @cloudbase/adapter-cocos_native 可以让您在 Cocos 项目中访问 CloudBase 服务和资源。

npm

npm i @cloudbase/js-sdk @cloudbase/adapter-cocos_native

yarn

yarn add @cloudbase/js-sdk @cloudbase/adapter-cocos_native

pnpm

pnpm add @cloudbase/js-sdk @cloudbase/adapter-cocos_native

初始化 SDK

新增如下代码到您的 Cocos 项目

scripts/services/CloudbaseService.js

import cloudbaseSDK from "@cloudbase/js-sdk";
import adapter from "@cloudbase/adapter-cocos_native";

// 注册适配器
cloudbaseSDK.useAdapters(adapter);

const cloudbase = cloudbaseSDK.init({
  // 环境 ID
  env: "{%ENV_ID%}",
  // 地域
  region: "{%REGION%}",
  // 匿名访问令牌
  accessKey: "{%PUBLISHABLE_KEY%}"
});

export default cloudbase;

身份认证

使用 短信验证码注册 请先前往身份认证/登录方式开启 短信验证码

调用方式：

import cloudbase from "./services/CloudbaseService";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ phone_number: phone });
const verificationId = res.verification_id;

// 验证验证码
const verifyRes = await auth.verify({
  verification_id: verificationId,
  verification_code: code
});

// 注册
await auth.signUp({
  phone_number: `+86 ${phone}`,
  verification_code: code,
  verification_token: verifyRes.verification_token,
  name: `user_${phone.slice(-4)}`,
  password: "admin@123"
});

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('SmsRegister')
export class SmsRegister extends Component {
  @property(EditBox)
  phoneInput: EditBox = null;

  @property(EditBox)
  codeInput: EditBox = null;

  @property(Label)
  messageLabel: Label = null;

  private verificationId: string = '';

  // 发送验证码
  async onSendCodeButtonClick() {
    const phone = this.phoneInput.string;
    if (!phone) {
      this.messageLabel.string = '请输入手机号';
      return;
    }

    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ phone_number: phone });
      this.verificationId = res.verification_id;
      this.messageLabel.string = '验证码已发送！';
    } catch (error) {
      this.messageLabel.string = `发送失败: ${error.message}`;
    }
  }

  // 注册
  async onRegisterButtonClick() {
    const phone = this.phoneInput.string;
    const code = this.codeInput.string;

    if (!this.verificationId || !code) {
      this.messageLabel.string = '请先发送验证码';
      return;
    }

    try {
      const auth = cloudbase.auth();
      // 验证验证码
      const verifyRes = await auth.verify({
        verification_id: this.verificationId,
        verification_code: code,
      });
      // 注册（如用户已存在则自动登录）
      await auth.signUp({
        phone_number: `+86 ${phone}`,
        verification_code: code,
        verification_token: verifyRes.verification_token,
        name: `user_${phone.slice(-4)}`,
        password: "admin@123"
      });
      this.messageLabel.string = '注册成功！';
      console.log('注册成功');
    } catch (error) {
      this.messageLabel.string = `注册失败: ${error.message}`;
      console.error('注册失败：', error);
    }
  }
}

使用 邮箱验证码注册 请先前往身份认证/登录方式开启 邮箱验证码

调用方式：

import cloudbase from "./services/CloudbaseService";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ email });
const verificationId = res.verification_id;

// 验证验证码
const verifyRes = await auth.verify({
  verification_id: verificationId,
  verification_code: code
});

// 注册
await auth.signUp({
  email,
  verification_code: code,
  verification_token: verifyRes.verification_token,
  name: `user_${email.slice(-4)}`,
  password: "admin@123"
});

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('EmailRegister')
export class EmailRegister extends Component {
  @property(EditBox)
  emailInput: EditBox = null;

  @property(EditBox)
  codeInput: EditBox = null;

  @property(Label)
  messageLabel: Label = null;

  private verificationId: string = '';

  // 发送验证码
  async onSendCodeButtonClick() {
    const email = this.emailInput.string;
    if (!email) {
      this.messageLabel.string = '请输入邮箱';
      return;
    }

    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ email });
      this.verificationId = res.verification_id;
      this.messageLabel.string = '验证码已发送！';
    } catch (error) {
      this.messageLabel.string = `发送失败: ${error.message}`;
    }
  }

  // 注册
  async onRegisterButtonClick() {
    const email = this.emailInput.string;
    const code = this.codeInput.string;

    if (!this.verificationId || !code) {
      this.messageLabel.string = '请先发送验证码';
      return;
    }

    try {
      const auth = cloudbase.auth();
      // 验证验证码
      const verifyRes = await auth.verify({
        verification_id: this.verificationId,
        verification_code: code,
      });
      // 注册（如用户已存在则自动登录）
      await auth.signUp({
        email,
        verification_code: code,
        verification_token: verifyRes.verification_token,
        name: `user_${email.slice(-4)}`,
        password: "admin@123"
      });
      this.messageLabel.string = '注册成功！';
      console.log('注册成功');
    } catch (error) {
      this.messageLabel.string = `注册失败: ${error.message}`;
      console.error('注册失败：', error);
    }
  }
}

使用 账号密码登录 请先前往身份认证/登录方式开启 用户名密码登录

调用方式：

import cloudbase from "./services/CloudbaseService";

const auth = cloudbase.auth();
await auth.signIn({
  username, // 可以是用户名、手机号或邮箱
  password
});

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('PasswordLogin')
export class PasswordLogin extends Component {
  @property(EditBox)
  usernameInput: EditBox = null;

  @property(EditBox)
  passwordInput: EditBox = null;

  @property(Label)
  messageLabel: Label = null;

  async onLoginButtonClick() {
    const username = this.usernameInput.string;
    const password = this.passwordInput.string;

    if (!username || !password) {
      this.messageLabel.string = '请输入账号和密码';
      return;
    }

    try {
      const auth = cloudbase.auth();
      await auth.signIn({
        username, // 可以是用户名、手机号或邮箱
        password,
      });
      this.messageLabel.string = '登录成功！';
      console.log('登录成功');
    } catch (error) {
      this.messageLabel.string = `登录失败: ${error.message}`;
      console.error('登录失败：', error);
    }
  }
}

使用 短信验证码登录 请先前往身份认证/登录方式开启 短信验证码登录

调用方式：

import cloudbase from "./services/CloudbaseService";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ phone_number: `+86 ${phone}` });
const verificationInfo = res;

// 登录
await auth.signInWithSms({
  verificationInfo: verificationInfo,
  verificationCode: code,
  phoneNum: `+86 ${phone}`
});

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('SmsLogin')
export class SmsLogin extends Component {
  @property(EditBox)
  phoneInput: EditBox = null;

  @property(EditBox)
  codeInput: EditBox = null;

  @property(Label)
  messageLabel: Label = null;

  private verificationInfo: any = null;

  // 发送验证码
  async onSendCodeButtonClick() {
    const phone = this.phoneInput.string;
    if (!phone) {
      this.messageLabel.string = '请输入手机号';
      return;
    }

    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ phone_number: `+86 ${phone}` });
      this.verificationInfo = res;
      this.messageLabel.string = '验证码已发送！';
    } catch (error) {
      this.messageLabel.string = `发送失败: ${error.message}`;
    }
  }

  // 登录
  async onLoginButtonClick() {
    const phone = this.phoneInput.string;
    const code = this.codeInput.string;

    if (!this.verificationInfo || !code) {
      this.messageLabel.string = '请先发送验证码';
      return;
    }

    try {
      const auth = cloudbase.auth();
      await auth.signInWithSms({
        verificationInfo: this.verificationInfo,
        verificationCode: code,
        phoneNum: `+86 ${phone}`
      });
      this.messageLabel.string = '登录成功！';
      console.log('登录成功');
    } catch (error) {
      this.messageLabel.string = `登录失败: ${error.message}`;
      console.error('登录失败：', error);
    }
  }
}

使用 邮箱验证码登录 请先前往身份认证/登录方式开启 邮箱验证码

调用方式：

import cloudbase from "./services/CloudbaseService";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ email });
const verificationInfo = res;

// 登录
await auth.signInWithEmail({
  verificationInfo: verificationInfo,
  verificationCode: code,
  email
});

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('EmailLogin')
export class EmailLogin extends Component {
  @property(EditBox)
  emailInput: EditBox = null;

  @property(EditBox)
  codeInput: EditBox = null;

  @property(Label)
  messageLabel: Label = null;

  private verificationInfo: any = null;

  // 发送验证码
  async onSendCodeButtonClick() {
    const email = this.emailInput.string;
    if (!email) {
      this.messageLabel.string = '请输入邮箱';
      return;
    }

    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ email });
      this.verificationInfo = res;
      this.messageLabel.string = '验证码已发送！';
    } catch (error) {
      this.messageLabel.string = `发送失败: ${error.message}`;
    }
  }

  // 登录
  async onLoginButtonClick() {
    const email = this.emailInput.string;
    const code = this.codeInput.string;

    if (!this.verificationInfo || !code) {
      this.messageLabel.string = '请先发送验证码';
      return;
    }

    try {
      const auth = cloudbase.auth();
      await auth.signInWithEmail({
        verificationInfo: this.verificationInfo,
        verificationCode: code,
        email
      });
      this.messageLabel.string = '登录成功！';
      console.log('登录成功');
    } catch (error) {
      this.messageLabel.string = `登录失败: ${error.message}`;
      console.error('登录失败：', error);
    }
  }
}

调用方式：

import cloudbase from "./services/CloudbaseService";

const auth = cloudbase.auth();
await auth.signInAnonymously();

完整示例：

import { _decorator, Component, Node, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('AnonymousLogin')
export class AnonymousLogin extends Component {
  @property(Label)
  messageLabel: Label = null;

  async onLoginButtonClick() {
    try {
      const auth = cloudbase.auth();
      await auth.signInAnonymously();
      this.messageLabel.string = '匿名登录成功！';
      console.log('匿名登录成功');
    } catch (error) {
      this.messageLabel.string = `登录失败: ${error.message}`;
      console.error('登录失败：', error);
    }
  }
}

文档型数据库

查询数据
新增数据
更新数据
删除数据

调用方式：

import cloudbase from "./services/CloudbaseService";

const db = cloudbase.database();
const res = await db.collection("{%TABLE_NAME%}").limit(10).get();

完整示例：

import { _decorator, Component, Node, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('QueryDocData')
export class QueryDocData extends Component {
  @property(Label)
  resultLabel: Label = null;

  async onLoad() {
    try {
      const db = cloudbase.database();
      const res = await db.collection("{%TABLE_NAME%}").limit(10).get();

      this.resultLabel.string = `查询成功：${JSON.stringify(res.data)}`;
      console.log('查询结果：', res.data);
    } catch (error) {
      this.resultLabel.string = `查询失败: ${error.message}`;
      console.error('查询失败：', error);
    }
  }
}

调用方式：

import cloudbase from "./services/CloudbaseService";

const db = cloudbase.database();
const res = await db.collection("{%TABLE_NAME%}").add({ title: "示例标题" });

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('AddDocData')
export class AddDocData extends Component {
  @property(EditBox)
  titleInput: EditBox = null;

  @property(Label)
  resultLabel: Label = null;

  async onAddButtonClick() {
    const title = this.titleInput.string;
    if (!title) {
      this.resultLabel.string = '请输入标题';
      return;
    }

    try {
      const db = cloudbase.database();
      const res = await db.collection("{%TABLE_NAME%}").add({ title });

      this.resultLabel.string = `新增成功! id: ${res.id}`;
      this.titleInput.string = '';
      console.log('新增成功：', res);
    } catch (error) {
      this.resultLabel.string = `新增失败: ${error.message}`;
      console.error('新增失败：', error);
    }
  }
}

调用方式：

import cloudbase from "./services/CloudbaseService";

const db = cloudbase.database();
await db.collection("{%TABLE_NAME%}").doc(dataId).update({ title: "新标题" });

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('UpdateDocData')
export class UpdateDocData extends Component {
  @property(EditBox)
  idInput: EditBox = null;

  @property(EditBox)
  titleInput: EditBox = null;

  @property(Label)
  resultLabel: Label = null;

  async onUpdateButtonClick() {
    const dataId = this.idInput.string;
    const newTitle = this.titleInput.string;

    if (!dataId || !newTitle) {
      this.resultLabel.string = '请输入数据ID和新标题';
      return;
    }

    try {
      const db = cloudbase.database();
      await db.collection("{%TABLE_NAME%}").doc(dataId).update({ title: newTitle });

      this.resultLabel.string = '更新成功';
      this.idInput.string = '';
      this.titleInput.string = '';
      console.log('更新成功');
    } catch (error) {
      this.resultLabel.string = `更新失败: ${error.message}`;
      console.error('更新失败：', error);
    }
  }
}

调用方式：

import cloudbase from "./services/CloudbaseService";

const db = cloudbase.database();
await db.collection("{%TABLE_NAME%}").doc(dataId).remove();

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('DeleteDocData')
export class DeleteDocData extends Component {
  @property(EditBox)
  idInput: EditBox = null;

  @property(Label)
  resultLabel: Label = null;

  async onDeleteButtonClick() {
    const dataId = this.idInput.string;

    if (!dataId) {
      this.resultLabel.string = '请输入要删除的数据ID';
      return;
    }

    try {
      const db = cloudbase.database();
      await db.collection("{%TABLE_NAME%}").doc(dataId).remove();

      this.resultLabel.string = '删除成功';
      this.idInput.string = '';
      console.log('删除成功');
    } catch (error) {
      this.resultLabel.string = `删除失败: ${error.message}`;
      console.error('删除失败：', error);
    }
  }
}

云存储

上传文件
获取文件链接
下载文件
删除文件

调用方式：

import cloudbase from "./services/CloudbaseService";

const res = await cloudbase.uploadFile({
  cloudPath: `images/${Date.now()}.png`,
  filePath: filePath
});

完整示例：

import { _decorator, Component, Node, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('UploadFile')
export class UploadFile extends Component {
  @property(Label)
  resultLabel: Label = null;

  async onUploadButtonClick() {
    try {
      // 注意：实际使用中需要从用户选择或游戏资源中获取文件路径
      const filePath = 'path/to/your/file.png';
      const cloudPath = `images/${Date.now()}-${Math.random()}.png`;

      const res = await cloudbase.uploadFile({
        cloudPath: cloudPath,
        filePath: filePath
      });

      this.resultLabel.string = `上传成功！文件ID: ${res.fileID}`;
      console.log('上传成功：', res);
    } catch (error) {
      this.resultLabel.string = `上传失败: ${error.message}`;
      console.error('上传失败：', error);
    }
  }
}

调用方式：

import cloudbase from "./services/CloudbaseService";

const res = await cloudbase.getTempFileURL({
  fileList: [fileId]
});

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('GetFileUrl')
export class GetFileUrl extends Component {
  @property(EditBox)
  fileIdInput: EditBox = null;

  @property(Label)
  resultLabel: Label = null;

  async onGetUrlButtonClick() {
    const fileId = this.fileIdInput.string;

    if (!fileId) {
      this.resultLabel.string = '请输入文件ID';
      return;
    }

    try {
      const res = await cloudbase.getTempFileURL({
        fileList: [fileId]
      });

      const fileUrl = res.fileList[0].tempFileURL;
      this.resultLabel.string = `文件链接：${fileUrl}`;
      console.log('文件链接：', fileUrl);
    } catch (error) {
      this.resultLabel.string = `获取失败: ${error.message}`;
      console.error('获取失败：', error);
    }
  }
}

调用方式：

import cloudbase from "./services/CloudbaseService";

const res = await cloudbase.downloadFile({
  fileID: fileId
});

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('DownloadFile')
export class DownloadFile extends Component {
  @property(EditBox)
  fileIdInput: EditBox = null;

  @property(Label)
  resultLabel: Label = null;

  async onDownloadButtonClick() {
    const fileId = this.fileIdInput.string;

    if (!fileId) {
      this.resultLabel.string = '请输入文件ID';
      return;
    }

    try {
      const res = await cloudbase.downloadFile({
        fileID: fileId
      });

      this.resultLabel.string = `下载成功！本地路径: ${res.tempFilePath}`;
      console.log('下载成功：', res);
    } catch (error) {
      this.resultLabel.string = `下载失败: ${error.message}`;
      console.error('下载失败：', error);
    }
  }
}

调用方式：

import cloudbase from "./services/CloudbaseService";

const res = await cloudbase.deleteFile({
  fileList: [fileId]
});

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('DeleteFile')
export class DeleteFile extends Component {
  @property(EditBox)
  fileIdInput: EditBox = null;

  @property(Label)
  resultLabel: Label = null;

  async onDeleteButtonClick() {
    const fileId = this.fileIdInput.string;

    if (!fileId) {
      this.resultLabel.string = '请输入文件ID';
      return;
    }

    try {
      const res = await cloudbase.deleteFile({
        fileList: [fileId]
      });

      if (res.fileList[0].code === "SUCCESS") {
        this.resultLabel.string = '删除成功';
        this.fileIdInput.string = '';
        console.log('删除成功');
      } else {
        this.resultLabel.string = '删除失败';
        console.error('删除失败');
      }
    } catch (error) {
      this.resultLabel.string = `删除失败: ${error.message}`;
      console.error('删除失败：', error);
    }
  }
}

云函数

调用方式：

import cloudbase from "./services/CloudbaseService";

const res = await cloudbase.callFunction({
  name: "{%FUNCTION_NAME%}",
  data: {}
});

完整示例：

import { _decorator, Component, Node, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('CallFunction')
export class CallFunction extends Component {
  @property(Label)
  resultLabel: Label = null;

  async onCallButtonClick() {
    try {
      const res = await cloudbase.callFunction({
        name: "{%FUNCTION_NAME%}",
        data: {}
      });

      this.resultLabel.string = `调用成功：${JSON.stringify(res.result)}`;
      console.log('调用结果：', res.result);
    } catch (error) {
      this.resultLabel.string = `调用失败: ${error.message}`;
      console.error('调用失败：', error);
    }
  }
}

大模型

生文模型
生图模型

调用方式：

import cloudbase from "./services/CloudbaseService";

const ai = cloudbase.ai();
const model = ai.createModel("{%AI_MODEL_NAME%}");

// 确保已登录
const loginState = await cloudbase.auth().getLoginState();
if (!loginState) {
  await cloudbase.auth().signInAnonymously();
}

const res = await model.streamText({
  model: "{%AI_SUB_MODEL_NAME%}",
  messages: [
    { role: "system", content: "系统提示词" },
    { role: "user", content: "用户输入" }
  ]
});

for await (let str of res.textStream) {
  // 处理流式响应
}

完整示例：

import { _decorator, Component, Node, EditBox, Label } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('CallAIModel')
export class CallAIModel extends Component {
  @property(EditBox)
  inputBox: EditBox = null;

  @property(Label)
  resultLabel: Label = null;

  @property(Label)
  statusLabel: Label = null;

  async onGenerateButtonClick() {
    const input = this.inputBox.string;
    if (!input) {
      this.statusLabel.string = '请输入主题';
      return;
    }

    this.statusLabel.string = '生成中...';
    this.resultLabel.string = '';

    try {
      const ai = cloudbase.ai();
      const model = ai.createModel("{%AI_MODEL_NAME%}");

      // 确保已登录
      const loginState = await cloudbase.auth().getLoginState();
      if (!loginState) {
        await cloudbase.auth().signInAnonymously();
      }

      const res = await model.streamText({
        model: "{%AI_SUB_MODEL_NAME%}",
        messages: [
          { role: "system", content: "请严格按照七言绝句或七言律诗的格律要求创作，平仄需符合规则，押韵要和谐自然，韵脚字需在同一韵部。" },
          { role: "user", content: input }
        ]
      });

      let fullText = '';
      for await (let str of res.textStream) {
        fullText += str;
        this.resultLabel.string = fullText;
      }

      this.statusLabel.string = '生成完成';
      console.log('生成完成：', fullText);
    } catch (err) {
      this.statusLabel.string = '生成失败';
      this.resultLabel.string = `错误: ${err.message}`;
      console.error('生成失败：', err);
    }
  }
}

生图模型通过调用云函数来实现，在生图模型页面点击「一键创建云函数」，函数调用示例如下：

调用方式：

import cloudbase from "./services/CloudbaseService";

// 调用生图云函数
const res = await cloudbase.callFunction({
  name: "<YOUR_FUNCTION_NAME>",
  data: {
    prompt: "一只可爱的猫咪在阳光下玩耍"
  }
});

const result = res.result;

if (result.success) {
  // 生成成功
  console.log("生成成功!");
  console.log("图片URL:", result.imageUrl);
  console.log("优化后的提示词:", result.revised_prompt);

  // 使用图片
  // 注意：图片URL有效期为24小时，请及时保存或转存
} else {
  // 生成失败
  console.error("生成失败:", result.code, result.message);
}

完整示例：

import { _decorator, Component, Node, EditBox, Label, Sprite } from 'cc';
import cloudbase from './services/CloudbaseService';

const { ccclass, property } = _decorator;

@ccclass('GenerateImage')
export class GenerateImage extends Component {
  @property(EditBox)
  promptInput: EditBox = null;

  @property(Label)
  statusLabel: Label = null;

  @property(Sprite)
  imageSprite: Sprite = null;

  async onGenerateButtonClick() {
    const prompt = this.promptInput.string;
    if (!prompt) {
      this.statusLabel.string = '请输入图片描述';
      return;
    }

    this.statusLabel.string = '生成中...';

    try {
      // 调用生图云函数
      const res = await cloudbase.callFunction({
        name: "<YOUR_FUNCTION_NAME>",
        data: {
          prompt: prompt
        }
      });

      const result = res.result;

      if (result.success) {
        this.statusLabel.string = '生成成功！';
        console.log('图片URL:', result.imageUrl);
        console.log('优化后的提示词:', result.revised_prompt);

        // 加载图片到 Sprite
        // 注意：需要使用网络加载图片的方式
        // 具体实现可根据 Cocos Creator 版本调整
      } else {
        this.statusLabel.string = `生成失败：${result.message}`;
        console.error('生成失败:', result.code, result.message);
      }
    } catch (err) {
      this.statusLabel.string = '调用失败';
      console.error('调用失败:', err);
    }
  }
}

准备工作​

步骤 1：安装 / 配置 CloudBase

步骤 2：和 AI 对话

准备工作​

安装 SDK​

npm​

yarn​

pnpm​

初始化 SDK​

scripts/services/CloudbaseService.js​

身份认证​

文档型数据库​

云存储​

云函数​

大模型​

准备工作

准备工作

安装 SDK

npm

yarn

pnpm

初始化 SDK

scripts/services/CloudbaseService.js

身份认证

文档型数据库

云存储

云函数

大模型