免費(fèi)AI編程助手
web快速開始
準(zhǔn)備工作
- 注冊(cè)騰訊云賬號(hào)；
- 務(wù)必 創(chuàng)建云開發(fā)環(huán)境，獲得 環(huán)境 ID；
- 安裝 Node.js；
- 安裝 Cloudbase CLI。
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è)文件。
mkdir my-cloudbase-app && cd my-cloudbase-app && touch index.html && touch cloudbaserc.json
該目錄下存在兩個(gè)文件：index.html 與 cloudbaserc.json
├── cloudbaserc.json
└── index.htmlWindows
- 創(chuàng)建
my-cloudbase-app文件夾 - 在此文件夾下，創(chuàng)建兩個(gè)空白文件
index.html與cloudbaserc.json
以下是 index.html 內(nèi)容，我們嘗試登錄云開發(fā)，如果成功，那么產(chǎn)生一個(gè)彈窗：
<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: "您的環(huán)境ID" // 此處填入您的環(huán)境ID
});
app
.auth()
.signInAnonymously()
.then(() => {
alert("登錄云開發(fā)成功！");
});
</script>
</head>
<body>
Hello Cloudbase!
</body>
</html>
以下是 cloudbaserc.json 的內(nèi)容：
{
"envId": "此處填入您的環(huán)境ID"
}第 2 步：添加安全域名
登錄騰訊云 云開發(fā)控制臺(tái)，選擇左側(cè)菜單欄【環(huán)境】>【環(huán)境設(shè)置】，單擊【安全配置】，將域名添加到【W(wǎng)eb 安全域名】中。
? 這里我們把
localhost:5000加入到安全域名中，讓此域名下的頁(yè)面可以使用 SDK 訪問云開發(fā)服務(wù)。
第 3 步：開啟匿名登錄
請(qǐng)參考：開啟匿名登錄授權(quán)
第 4 步：開啟本地開發(fā)環(huán)境
在項(xiàng)目根目錄運(yùn)行：
npx serve即可打開一個(gè)本地靜態(tài)服務(wù)器，然后訪問 http://localhost:5000
? 如果 SDK 成功使用匿名身份登錄，那么您應(yīng)該可以看到一個(gè)彈窗。
登錄成功后，便可以訪問和使用云開發(fā)的各類資源，詳情請(qǐng)參看 Web SDK 文檔
第 5 步（可選）：使用云開發(fā)部署靜態(tài)頁(yè)面
- 開通 靜態(tài)網(wǎng)站服務(wù)
- 在項(xiàng)目根目錄下運(yùn)行以下命令，上傳網(wǎng)站文件：
cloudbase hosting:deploy index.html? 在運(yùn)行
cloudbase hosting:deploy之前，請(qǐng)先登錄命令行工具：
sh
cloudbase login
- 使用 envId.tcloudbaseapp.com 訪問您的網(wǎng)站
詳情請(qǐng)參考靜態(tài)網(wǎng)站托管相關(guān)文檔
查看更多示例
1、示例：登錄與用戶 2、示例：云函數(shù) 3、示例：云數(shù)據(jù)庫(kù) 4、示例：云存儲(chǔ)
更多建議：