web快速開始

2020-08-04 08:00 更新

準(zhǔn)備工作

  1. 注冊騰訊云賬號(hào);
  2. 務(wù)必 創(chuàng)建云開發(fā)環(huán)境,獲得 環(huán)境 ID;
  3. 安裝 Node.js;
  4. 安裝 Cloudbase CLI。

  1. npm install -g @cloudbase/cli

? 如果 npm install -g @cloudbase/cli 失敗,您可能需要修改 npm 權(quán)限,或者以系統(tǒng)管理員身份運(yùn)行:

sh
sudo npm install -g @cloudbase/cli

第 1 步:創(chuàng)建初始項(xiàng)目

"MacOS 或 Linux"

使用命令行創(chuàng)建目錄 my-cloudbase-app,和其下的兩個(gè)文件。

  1. mkdir my-cloudbase-app && cd my-cloudbase-app && touch index.html && touch cloudbaserc.json

該目錄下存在兩個(gè)文件:index.htmlcloudbaserc.json

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

Windows

  1. 創(chuàng)建 my-cloudbase-app 文件夾
  2. 在此文件夾下,創(chuàng)建兩個(gè)空白文件 index.htmlcloudbaserc.json

以下是 index.html 內(nèi)容,我們嘗試登錄云開發(fā),如果成功,那么產(chǎn)生一個(gè)彈窗:

  1. <html>
  2. <head>
  3. <script src="https://imgcache.qq.com/qcloud/tcbjs/1.3.5/tcb.js" rel="external nofollow" ></script>
  4. <script>
  5. const app = tcb.init({
  6. env: "您的環(huán)境ID" // 此處填入您的環(huán)境ID
  7. });
  8. app
  9. .auth()
  10. .signInAnonymously()
  11. .then(() => {
  12. alert("登錄云開發(fā)成功!");
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. Hello Cloudbase!
  18. </body>
  19. </html>

以下是 cloudbaserc.json 的內(nèi)容:

  1. {
  2. "envId": "此處填入您的環(huán)境ID"
  3. }

第 2 步:添加安全域名

登錄騰訊云 云開發(fā)控制臺(tái),選擇左側(cè)菜單欄【環(huán)境】>【環(huán)境設(shè)置】,單擊【安全配置】,將域名添加到【W(wǎng)eb 安全域名】中。

? 這里我們把 localhost:5000 加入到安全域名中,讓此域名下的頁面可以使用 SDK 訪問云開發(fā)服務(wù)。

第 3 步:開啟匿名登錄

請參考:開啟匿名登錄授權(quán)

第 4 步:開啟本地開發(fā)環(huán)境

在項(xiàng)目根目錄運(yùn)行:

  1. npx serve

即可打開一個(gè)本地靜態(tài)服務(wù)器,然后訪問 http://localhost:5000

? 如果 SDK 成功使用匿名身份登錄,那么您應(yīng)該可以看到一個(gè)彈窗。

登錄成功后,便可以訪問和使用云開發(fā)的各類資源,詳情請參看 Web SDK 文檔

第 5 步(可選):使用云開發(fā)部署靜態(tài)頁面

  1. 開通 靜態(tài)網(wǎng)站服務(wù)
  2. 在項(xiàng)目根目錄下運(yùn)行以下命令,上傳網(wǎng)站文件:

  1. cloudbase hosting:deploy index.html

? 在運(yùn)行 cloudbase hosting:deploy 之前,請先登錄命令行工具:

sh
cloudbase login

  1. 使用 envId.tcloudbaseapp.com 訪問您的網(wǎng)站

詳情請參考靜態(tài)網(wǎng)站托管相關(guān)文檔

查看更多示例

1、示例:登錄與用戶 2、示例:云函數(shù) 3、示例:云數(shù)據(jù)庫 4、示例:云存儲(chǔ)

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)