Web 快速开始

最近更新时间:2021-01-21 09:59:03

准备工作

  1. 拥有 腾讯云账号
  2. 务必 创建云开发环境,获得 环境 ID
  3. 安装 Node.js
  4. 安装 Cloudbase CLI
npm install -g @cloudbase/cli
说明:

如果 npm install -g @cloudbase/cli 失败,您可能需要 修改 npm 权限,或者以系统管理员身份运行:

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.htmlcloudbaserc.json

├── cloudbaserc.json
└── index.html

Windows

  1. 创建 my-cloudbase-app 文件夹。
  2. 在此文件夹下,创建两个空白文件 index.htmlcloudbaserc.json

以下是 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 控制台,在 安全配置 页面中,将域名添加到 Web 安全域名中。

说明:

这里我们把 localhost:5000 加入到安全域名中,让此域名下的页面可以使用 SDK 访问云开发服务。

第 3 步:开启匿名登录

请参考:开启匿名登录授权

第 4 步:开启本地开发环境

在项目根目录运行:

npx serve

即可打开一个本地静态服务器,然后访问 http://localhost:5000

说明:

如果 SDK 成功使用匿名身份登录,那么您应该可以看到一个弹窗。

登录成功后,便可以访问和使用云开发的各类资源,详情请参看 Web SDK 文档

第 5 步(可选):使用云开发部署静态页面

  1. 开通 静态网站服务

  2. 在项目根目录下运行以下命令,上传网站文件:

    cloudbase hosting deploy index.html
    说明:

    在运行 cloudbase hosting deploy 之前,请先登录命令行工具:

    cloudbase login
  3. 使用 envId-instanceId.tcloudbaseapp.com 访问您的网站,其中 envIdinstanceId 是您 CloudBase 环境的标识符。
    详情请参考 静态网站托管 相关文档。

查看更多示例

目录