# Web 快速开始

# 准备工作

  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 步:创建初始项目

    以下是 index.html 内容,我们尝试登录云开发,如果成功,那么产生一个弹窗:

    <html>
      <head>
        <meta charset="utf-8" />
        <script src="https://imgcache.qq.com/qcloud/tcbjs/1.3.5/tcb.js"></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 步:添加安全域名

    登录云开发 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
    
    1. 使用 envId-instanceId.tcloudbaseapp.com 访问您的网站,其中 envIdinstanceId 是您 CloudBase 环境的标识符。

    详情请参考静态网站托管相关文档

    # 查看更多示例