# Web 快速开始
# 准备工作
- 拥有腾讯云账号;
- 务必创建云开发环境,获得 环境 ID;
- 安装 Node.js (opens new window);
- 安装 Cloudbase CLI。
npm install -g @cloudbase/cli
注意
如果 npm install -g @cloudbase/cli
失败,您可能需要修改 npm 权限 (opens new window),或者以系统管理员身份运行:
sudo npm install -g @cloudbase/cli
# 第 1 步:创建初始项目
以下是 index.html
内容,我们尝试登录云开发,如果成功,那么产生一个弹窗:
<html>
<head>
<meta charset="utf-8" />
<script src="https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.3.3/cloudbase.full.js"></script>
<script>
const app = cloudbase.init({
env: "您的环境ID" // 此处填入您的环境ID
});
app
.auth()
.signInAnonymously()
.then(() => {
alert("登录云开发成功!");
});
</script>
</head>
<body>
Hello Cloudbase!
</body>
</html>
以下是 cloudbaserc.json
的内容:
{
"envId": "此处填入您的环境ID"
}
# 第 2 步:添加安全域名
登录云开发 CloudBase 控制台 (opens new window),在安全配置 (opens new window)页面中,将域名添加到 Web 安全域名中。
提示
这里我们把 localhost:5000
加入到安全域名中,让此域名下的页面可以使用 SDK 访问云开发服务。
# 第 3 步:开启匿名登录
请参考:开启匿名登录授权
# 第 4 步:开启本地开发环境
在项目根目录运行:
npx serve
即可打开一个本地静态服务器,然后访问 http://localhost:5000 (opens new window)
提示
如果 SDK 成功使用匿名身份登录,那么您应该可以看到一个弹窗。
登录成功后,便可以访问和使用云开发的各类资源,详情请参看 Web SDK 文档
# 第 5 步(可选):使用云开发部署静态页面
- 开通 静态网站服务 (opens new window)
- 在项目根目录下运行以下命令,上传网站文件:
cloudbase hosting deploy index.html
注意
在运行 cloudbase hosting deploy
之前,请先登录命令行工具:
cloudbase login
- 使用 envId-instanceId.tcloudbaseapp.com 访问您的网站,其中
envId
与instanceId
是您 CloudBase 环境的标识符。
详情请参考静态网站托管相关文档
# 查看更多示例
← 概述 Flutter 快速开始 →