• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

web快速开始

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

准备工作

  1. 注册腾讯云账号
  2. 务必 创建云开发环境,获得 环境 ID
  3. 安装 Node.js
  4. 安装 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.htmlcloudbaserc.json

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

Windows

  1. 创建 my-cloudbase-app 文件夹
  2. 在此文件夹下,创建两个空白文件 index.htmlcloudbaserc.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 步(可选):使用云开发部署静态页面

  1. 开通 静态网站服务
  2. 在项目根目录下运行以下命令,上传网站文件:

cloudbase hosting:deploy index.html

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

sh
cloudbase login

  1. 使用 envId.tcloudbaseapp.com 访问您的网站

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

查看更多示例

1、示例:登录与用户 2、示例:云函数 3、示例:云数据库 4、示例:云存储


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
实例教程-5步搭建个人博客发布时间:2022-02-03
下一篇:
安装 CLI 工具发布时间:2022-02-03
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap