web快速开始
准备工作
- 注册腾讯云账号;
- 务必 创建云开发环境,获得 环境 ID;
- 安装 Node.js;
- 安装 Cloudbase CLI。
npm install -g @cloudbase/cli
? 如果
npm install -g @cloudbase/cli
失败,您可能需要修改 npm 权限,或者以系统管理员身份运行:
sh
sudo npm install -g @cloudbase/cli
第 1 步:创建初始项目
"MacOS 或 Linux"
使用命令行创建目录 my-cloudbase-app,和其下的两个文件。
mkdir my-cloudbase-app && cd my-cloudbase-app && touch index.html && touch cloudbaserc.json
该目录下存在两个文件:index.html
与 cloudbaserc.json
├── cloudbaserc.json
└── index.html
Windows
- 创建
my-cloudbase-app
文件夹 - 在此文件夹下,创建两个空白文件
index.html
与cloudbaserc.json
以下是 index.html
内容,我们尝试登录云开发,如果成功,那么产生一个弹窗:
<html>
<head>
<script src="https://imgcache.qq.com/qcloud/tcbjs/1.3.5/tcb.js" rel="external nofollow" ></script>
<script>
const app = tcb.init({
env: "您的环境ID" // 此处填入您的环境ID
});
app
.auth()
.signInAnonymously()
.then(() => {
alert("登录云开发成功!");
});
</script>
</head>
<body>
Hello Cloudbase!
</body>
</html>
以下是 cloudbaserc.json
的内容:
{
"envId": "此处填入您的环境ID"
}
第 2 步:添加安全域名
登录腾讯云 云开发控制台,选择左侧菜单栏【环境】>【环境设置】,单击【安全配置】,将域名添加到【Web 安全域名】中。
? 这里我们把
localhost:5000
加入到安全域名中,让此域名下的页面可以使用 SDK 访问云开发服务。
第 3 步:开启匿名登录
请参考:开启匿名登录授权
第 4 步:开启本地开发环境
在项目根目录运行:
npx serve
即可打开一个本地静态服务器,然后访问 http://localhost:5000
? 如果 SDK 成功使用匿名身份登录,那么您应该可以看到一个弹窗。
登录成功后,便可以访问和使用云开发的各类资源,详情请参看 Web SDK 文档
第 5 步(可选):使用云开发部署静态页面
- 开通 静态网站服务
- 在项目根目录下运行以下命令,上传网站文件:
cloudbase hosting:deploy index.html
? 在运行
cloudbase hosting:deploy
之前,请先登录命令行工具:
sh
cloudbase login
- 使用 envId.tcloudbaseapp.com 访问您的网站
详情请参考静态网站托管相关文档
更多建议: