免費(fèi)AI編程助手
云開發(fā) Web端云開發(fā)
云開發(fā)的環(huán)境還可以開發(fā)網(wǎng)站應(yīng)用，包括普通的 PC 網(wǎng)頁(yè)或者公眾號(hào)中的網(wǎng)頁(yè)等，在開發(fā)過(guò)程中即便需要后臺(tái)服務(wù)也無(wú)需搭建服務(wù)器，可以直接使用云開發(fā)提供的云端能力。開發(fā)者無(wú)需關(guān)心具體的后臺(tái)資源及運(yùn)維，只需使用平臺(tái)提供的 API 進(jìn)行核心業(yè)務(wù)開發(fā)，即可實(shí)現(xiàn)產(chǎn)品快速上線和迭代。
一、創(chuàng)建初始項(xiàng)目
在前面我們已經(jīng)用Cloudbase Cli工具在電腦本地用Cloudbase init創(chuàng)建了一個(gè)云開發(fā)項(xiàng)目，以及開通了靜態(tài)網(wǎng)站托管，那我們應(yīng)該如何在靜態(tài)的網(wǎng)頁(yè)里初始化云開發(fā)呢？
1、項(xiàng)目文件結(jié)構(gòu)
使用編輯器比如 Visual Studio Code，打開前面創(chuàng)建好的項(xiàng)目文件夾tcbweb，然后使用VS Code來(lái)新建一個(gè)public文件夾，并在public文件夾里面新建
- index.html；
- js文件夾，js文件夾里再新建一個(gè)main.js；
- css文件夾，css文件夾里再新建一個(gè)style.css；
- assert文件夾，assert文件夾里主要用于存放圖片等資源；
最終文件夾的目錄結(jié)構(gòu)如下，一個(gè)清晰的項(xiàng)目文件結(jié)構(gòu)便于我們有序的開發(fā)管理：
.
├── _gitignore
├── functions // 云函數(shù)目錄
│ └── app
│ └── index.js
├── public // 用于存放應(yīng)用程序的靜態(tài)文件
│ └── index.html
│ └── js
│ └── main.js
│ └── css
│ └── style.css
│ └── assert
└── cloudbaserc.js // 項(xiàng)目配置文件
在前面我們已經(jīng)介紹過(guò)電腦的終端，Visual Studio Code也有終端，也可以在這個(gè)終端里面進(jìn)行終端的命令行操作，和電腦的終端略有不同，大家也可以根據(jù)習(xí)慣自行選擇。
2、在網(wǎng)頁(yè)中引入Web端SDK
然后使用VS Code打開index.html文件，VS Code編輯器內(nèi)置一套emmet語(yǔ)法，可以大大提高我們書寫HTML代碼的效率，在index.html里輸入一個(gè)英文狀態(tài)下的感嘆號(hào)!，之后按一下tab鍵，就會(huì)出現(xiàn)以下代碼，并修改一下title和body標(biāo)簽里面的內(nèi)容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web端云開發(fā)</title>
</head>
<body>
Web端云開發(fā)頁(yè)面內(nèi)容
</body>
</html>
然后將head標(biāo)簽里添加如下內(nèi)容，把云開發(fā)web端SDK也就是tcb.js添加到Web應(yīng)用中：
<head>
<!-- 省略-->
<script src="https://imgcache.qq.com/qcloud/tcbjs/1.7.0/tcb.js" rel="external nofollow" ></script>
<script src="./js/main.js"></script>
</head>
注意上面的版本號(hào)
1.7.0，這個(gè)不一定是最新的，建議tcb-js-sdk npm包地址獲取最新的版本號(hào)，尤其是需要使用新功能的時(shí)候，要注意修改版本號(hào)。我們還可以通過(guò)npm install --save tcb-js-sdk@latest引入npm包tcb-js-sdk的方式來(lái)下載最新版的Web端SDK，而在模塊化開發(fā)時(shí)用const tcb = require("tcb-js-sdk");將Web端SDK引入到項(xiàng)目中，這里就不多介紹啦。
3、初始化Web端環(huán)境
使用VS Code打開js文件夾下main.js文件，在里面輸入以下代碼就可以完成云開發(fā)環(huán)境的初始化，和小程序云開發(fā)一樣，要調(diào)用云開發(fā)環(huán)境里的資源，就需要進(jìn)行初始化，init 用于設(shè)置調(diào)用云函數(shù)、數(shù)據(jù)庫(kù)、文件存儲(chǔ)時(shí)要訪問的環(huán)境。
const app = tcb.init({
env: '你的環(huán)境ID' // 此處填入你的環(huán)境ID
});
我們知道在項(xiàng)目根目錄下的配置文件cloudbaserc.js或cloudbaserc.json里也需要填入環(huán)境ID，這個(gè)配置文件主要用于項(xiàng)目管理，這個(gè)和初始化Web端環(huán)境是有一定的區(qū)別的哦，留意一下。
也就是說(shuō)我們要初始化云開發(fā)能力，一是要引入Web端SDK tcb.js文件，二是要初始化Web端的環(huán)境，這兩個(gè)是必不可少的哦，引入這兩個(gè)之后，云開發(fā)能力就算完成初始化了。
二、本地調(diào)試與云端調(diào)試Web端云開發(fā)
要在本地電腦里調(diào)試Web端云開發(fā)，除了前面已經(jīng)做過(guò)的在電腦里安裝Nodejs環(huán)境、安裝Cloudbase Cli工具、初始化云開發(fā)項(xiàng)目之外，還需要執(zhí)行以下操作。
使用小程序云開發(fā)的賬號(hào)登錄到騰訊云云開發(fā)控制臺(tái)，也就是登錄時(shí)選擇微信公眾號(hào)登錄，然后用小程序云開發(fā)管理員的微信掃碼，在云開發(fā)控制臺(tái)選擇其中一個(gè)環(huán)境，進(jìn)入到該環(huán)境的管理頁(yè)，點(diǎn)擊環(huán)境-環(huán)境設(shè)置菜單，選擇登錄方式標(biāo)簽頁(yè)，然后：
1、開啟匿名登錄
在登錄方式里可以選擇啟動(dòng)匿名登錄，匿名登錄有點(diǎn)類似于游戲里的游客訪問模式，用戶不需要注冊(cè)就可以獲取并存儲(chǔ)數(shù)據(jù)，這種方式比較方便我們進(jìn)行本地調(diào)試。
每個(gè)設(shè)備同時(shí)只存在一個(gè)匿名用戶，并且此用戶永不過(guò)期（如果用戶手動(dòng)清除了設(shè)備或?yàn)g覽器的本地?cái)?shù)據(jù)，那么匿名用戶的數(shù)據(jù)便會(huì)被同步清除，再次調(diào)用匿名登錄API會(huì)產(chǎn)生一個(gè)新的匿名用戶）。每個(gè)環(huán)境的匿名用戶數(shù)量不超過(guò)1000萬(wàn)個(gè)。
打開前面創(chuàng)建的main.js文件，在環(huán)境初始化后面添加如下代碼，實(shí)現(xiàn)匿名登錄的功能。window.onload類似于小程序生命周期的onLoad生命周期函數(shù)，當(dāng)包括樣式、圖像和其他資源的頁(yè)面被全部加載時(shí)，window 對(duì)象上的 load 事件就會(huì)被觸發(fā)。
window.onload = function(){
app.auth({
persistence: 'session' //在窗口關(guān)閉時(shí)清除身份驗(yàn)證狀態(tài)
})
.anonymousAuthProvider()
.signIn() //AnonymousAuthProvider.signIn() 匿名登錄云開發(fā)
.then(() => {
console.log("登錄成功") //登錄成功
}).catch(err => {
console.log("登錄失敗",err) //登錄失敗
})
env: 'xly-xrlur' // 此處填入你的環(huán)境ID
});
2、添加安全域名
在WEB安全域名處把 localhost:5000加入到安全域名的白名單中，這樣這個(gè)域名下的頁(yè)面才可以使用 SDK 訪問到云開發(fā)的服務(wù)。如果你希望通過(guò)localhost的其他端口或域名地址來(lái)訪問你的靜態(tài)托管網(wǎng)站，你需要將這些它們都添加到安全域名的列表里面。
3、開啟本地開發(fā)環(huán)境
打開終端，我們先全局安裝依賴包serve（注意前面說(shuō)過(guò)的安裝權(quán)限解決方案，Mac電腦命令前加sudo，Windows要用管理員身份打開終端）：
npm install -g serve
然后在項(xiàng)目根目錄（注意前面說(shuō)過(guò)的cloudbaserc.js所在的目錄即為根目錄）執(zhí)行以下命令運(yùn)行serve，即可打開一個(gè)本地靜態(tài)服務(wù)器：
npx serve
成功后就會(huì)顯示服務(wù)開啟，以及可以在本地電腦的瀏覽器訪問的localhost端口地址，以及ip地址。在瀏覽器里輸入http://localhost:5000/public/就能打開index.html了。打開瀏覽器的開發(fā)者工具，在Console標(biāo)簽頁(yè)看到登錄成功的log，就表示匿名登錄成功啦
建議使用Chrome瀏覽器，在index.html頁(yè)面空白處鼠標(biāo)右鍵點(diǎn)擊”審查元素”(MacBook 為”檢查”)，我們就可以打開Chrome的開發(fā)者工具，在Console標(biāo)簽頁(yè)我們就可以調(diào)試代碼。
為了調(diào)試方便，我們可以不要關(guān)閉npx serve的終端窗口，要執(zhí)行其他任務(wù)可以重新開一個(gè)終端窗口。當(dāng)我們更新public文件夾下的index.html、main.js文件時(shí)，直接刷新瀏覽器里的頁(yè)面即可。
4、部署本地文件到靜態(tài)托管
我們?cè)匍_一個(gè)終端窗口，然后通過(guò)cd 命令進(jìn)入到項(xiàng)目根目錄，之后在終端輸入以下命令，將public文件夾下面的所有文件上傳到靜態(tài)托管網(wǎng)站的文件夾內(nèi)，比如上傳到web文件夾到環(huán)境id為xly-xrlur的環(huán)境里：
cloudbase hosting:deploy ./public web -e xly-xrlur
然后我們就可以在瀏覽器通過(guò)打開靜態(tài)托管網(wǎng)站的二級(jí)域名/web或你的域名/web訪問到這個(gè)頁(yè)面了，同樣可以使用瀏覽器的開發(fā)者工具的控制臺(tái)查看頁(yè)面的打印日志。
調(diào)用Web端SDK并不局限于云開發(fā)自帶的靜態(tài)托管服務(wù)，我們也可以使用Github Pages等其他靜態(tài)托管服務(wù)，也可以是傳統(tǒng)開發(fā)的web頁(yè)，也就是說(shuō)只要是web也引入sdk，并添加安全域名等之后，也能使用云開發(fā)的服務(wù)。
三、創(chuàng)建并調(diào)用云函數(shù)
1、云函數(shù)的創(chuàng)建與部署
Web端云開發(fā)不僅可以調(diào)用你在小程序云開發(fā)里創(chuàng)建的云函數(shù)，我們也可以在本地創(chuàng)建云函數(shù)并部署到云開發(fā)環(huán)境里供Web端和小程序端來(lái)調(diào)用，也就是云開發(fā)環(huán)境里的云函數(shù)是Web端和小程序端共用的，小程序端怎么創(chuàng)建并部署云函數(shù)大家應(yīng)該比較熟悉，web端使用vscode來(lái)創(chuàng)建并部署云函數(shù)和使用微信開發(fā)者工具是一樣的道理。
2、本地云函數(shù)目錄結(jié)構(gòu)
我們可以在web端云開發(fā)項(xiàng)目根目錄里的functions文件夾下面建和小程序云開發(fā)云函數(shù)根目錄一樣的文件夾表示為云函數(shù)目錄，以及一樣新建三個(gè)文件并copy里面的內(nèi)容（每次創(chuàng)建一個(gè)云函數(shù)的時(shí)候都這么做），比如我們新建一個(gè)webtest的云函數(shù)，它的目錄結(jié)構(gòu)如下：
├── _gitignore
├── functions // 云函數(shù)根目錄
│ └── app //app云函數(shù)目錄
│ └── index.js
│ └── config.json
│ └── package.json
│ └── webtest //webtest云函數(shù)目錄
│ └── index.js //主體結(jié)構(gòu)和小程序云開發(fā)云函數(shù)里的index.js一樣
│ └── config.json //copy小程序云開發(fā)云函數(shù)里的config.json
│ └── package.json //copy小程序云開發(fā)云函數(shù)里的package.json
├── public // 用于存放應(yīng)用程序的靜態(tài)文件
│ └── index.html
│ └── js
│ └── main.js
│ └── css
│ └── style.css
│ └── assert
└── cloudbaserc.js // 項(xiàng)目配置文件
在index.js里我們可以輸入以下代碼，引入服務(wù)端sdk，初始化服務(wù)端的環(huán)境，以及在main函數(shù)里返回?cái)?shù)據(jù):
const tcb = require('@cloudbase/node-sdk')
const app = tcb.init({
env: '你的環(huán)境ID'
})
const auth = app.auth()
exports.main = async (event, context) => {
const ip = auth.getClientIP() //獲取客戶端ip
const {
openId, //微信openId，非微信授權(quán)登錄則空
appId, //微信appId，非微信授權(quán)登錄則空
uid, //用戶唯一ID
customUserId //開發(fā)者自定義的用戶唯一id，非自定義登錄則空
} = auth.getUserInfo()
return {"event對(duì)象":event,
"context對(duì)象":context,
"客戶端ip":ip,
"openId":openId,
"appId":appId,
"uid":uid,
"customUserId":customUserId
}
}
web端創(chuàng)建的云函數(shù)這里，我們既可以只用 Web端SDK @cloudbase/node-sdk，也可以沿用小程序云開發(fā)的寫法，使用wx-server-sdk，如果是跨端開發(fā)建議后者。
3、安裝依賴并部署上傳云函數(shù)
然后使用終端打開云函數(shù)目錄，使用npm install來(lái)安裝依賴package.json的依賴之后，在cloudbaserc.js的配置文件的functions里添加webtest云函數(shù)的配置，比如：
{
name: "webtest",
timeout: 5,
envVariables: {},
runtime: "Nodejs10.15",
handler: "index.main"
},
使用Cloudbase Cli工具將云函數(shù)部署上傳到云端：
cloudbase functions:deploy webtest
這里有幾個(gè)需要注意一下，小程序端云開發(fā)與Web端云開發(fā)的相同與不同之處：
- 如果你的云函數(shù)不需要給小程序使用而只在web端使用，你可以只引入
@cloudbase/node-sdk，而如果要在小程序端使用，你引入的wx-server-sdk，@cloudbase/node-sdk是云開發(fā)的服務(wù)端sdk，wx-server-sdk是小程序云開發(fā)的SDK；所以最好是用變量tcb表示引入@cloudbase/node-sdk，變量cloud表示wx-server-sdk；
- Web端云開發(fā)的云函數(shù)和小程序云開發(fā)的使用方法大致相同，也要注意web端/小程序端和服務(wù)端的不同用法與權(quán)限；
- 將Web端云函數(shù)部署上傳到小程序創(chuàng)建的云開發(fā)環(huán)境，在小程序開發(fā)者工具的云開發(fā)控制臺(tái)是可以看到該云函數(shù)的，同時(shí)調(diào)用這個(gè)云函數(shù)的日志也在云開發(fā)控制臺(tái)的日志里看到。
- 如果沒有在cloudbaserc.js配置，會(huì)顯示
未找到函數(shù)發(fā)布配置，是否使用默認(rèn)配置（僅適用于 Node.js 云函數(shù)）的提示
4、web端調(diào)用云函數(shù)
在web端調(diào)用云函數(shù)，則是使用web端sdk，也就是tcb-js-sdk模塊或前面引入tcb.js文件，我們可以在main.js文件里將函數(shù)的調(diào)用寫到app.auth()的回調(diào)函數(shù)里，當(dāng)頁(yè)面加載時(shí)匿名用戶登錄后，就能調(diào)用云函數(shù)
window.onload= function(){
app.auth({
persistence: 'session' //在窗口關(guān)閉時(shí)清除身份驗(yàn)證狀態(tài)
})
.anonymousAuthProvider()
.signIn()
.then(() => {
app.callFunction({
name: 'webtest',
data: { "name": "李東bbsky", "title": "雜役"}
})
.then((res) => {
console.log(res)
});
}).catch(err => {
console.log("登錄失敗",err)
})
使用瀏覽器打開（或刷新頁(yè)面）http://localhost:5000/public/index.html，然后在瀏覽器開發(fā)者工具的控制臺(tái)就能看到本地調(diào)用云函數(shù)的結(jié)果啦。我們?cè)賵?zhí)行以下命令將public的靜態(tài)頁(yè)面更新到靜態(tài)存儲(chǔ)，再來(lái)打開二級(jí)域名/web下的網(wǎng)頁(yè)，在瀏覽器開發(fā)者工具的控制臺(tái)也能調(diào)試代碼啦：
cloudbase hosting:deploy ./public web -e xly-xrlur
通過(guò)打印我們可以了解到，web端上傳的參數(shù)會(huì)在event對(duì)象里，且event對(duì)象會(huì)返回用戶的userInfo，其中包含微信appId，而context對(duì)象則包含關(guān)于該云函數(shù)的一些信息。
有了web端SDK，我們就能調(diào)用云開發(fā)環(huán)境里的云函數(shù)，而云函數(shù)也是可以調(diào)用云函數(shù)、可以對(duì)數(shù)據(jù)庫(kù)、云存儲(chǔ)進(jìn)行增刪改查，還能使用云調(diào)用（需要openid的云函數(shù)例外），因此我們也可以沿用小程序云開發(fā)的云函數(shù)的用法。我們也要留意使用CLoudbase Cli觸發(fā)云函數(shù)，以及web端觸發(fā)云函數(shù)和后面使用云接入的方式獲取到的云函數(shù)的信息會(huì)有所不同。
四、web端操作數(shù)據(jù)庫(kù)
和小程序觸發(fā)事件處理函數(shù)一樣，我們既可以使用通過(guò)頁(yè)面的生命周期函數(shù)，也可以通過(guò)點(diǎn)擊的方式，比如在web頁(yè)面的標(biāo)簽上綁定事件處理函數(shù)來(lái)觸發(fā)事件處理函數(shù)，來(lái)對(duì)云函數(shù)、數(shù)據(jù)庫(kù)、云存儲(chǔ)進(jìn)行一系列的操作。
比如我們可以在public文件夾下的index.html<body>標(biāo)簽內(nèi)輸入以下代碼，一個(gè)button標(biāo)簽里，綁定getData()事件處理程序，
<button onclick="getData()">點(diǎn)擊獲取數(shù)據(jù)</button>
然后在main.js里添加getData()事件處理函數(shù)，保存頁(yè)面之后，點(diǎn)擊button按鈕就能觸發(fā)事件處理程序，對(duì)數(shù)據(jù)發(fā)起請(qǐng)求，這里還是獲取以前在小程序云開發(fā)創(chuàng)建的集合china：
function getData(){
const db = app.database();
const _ = db.command
const $ = db.command.aggregate
db.collection("china")
.where({
gdp: _.gt(3000)
})
.field({
_id:false,
city: true,
province: true,
gdp:true
})
.orderBy('gdp', 'desc')
.skip(0)
.limit(10)
.get()
.then(res => {
console.log(res.data)
})
.catch(err => {
console.error(err)
})
}
無(wú)論是查詢數(shù)據(jù)，還是對(duì)數(shù)據(jù)庫(kù)的添加記錄、刪除數(shù)據(jù)以及指令、聚合等都和小程序云開發(fā)保持了很強(qiáng)的一致性，注意哦，數(shù)據(jù)庫(kù)的實(shí)時(shí)推送也是和小程序端的用法一樣。
值得注意的是當(dāng)匿名用戶往數(shù)據(jù)庫(kù)里添加數(shù)據(jù)時(shí)，云數(shù)據(jù)庫(kù)也會(huì)默認(rèn)生成_openid的字段，這個(gè)openid是臨時(shí)的，在前面已經(jīng)說(shuō)過(guò)它的機(jī)制啦。
一、web端操作云存儲(chǔ)
1、web端上傳文件
和小程序云開發(fā)一樣，要在前端上傳文件，首先我們需要建一個(gè)上傳文件的標(biāo)簽，在public文件夾下的index.html里再輸入以下代碼，我們只允許上傳圖片，并綁定
<input type="file" id="file" accept="image/*" onchange="uploadFile()">
然后我們繼續(xù)在main.js里輸入以下代碼。被選擇的文件以 HTMLInputElement.files 屬性返回，它是一個(gè)包含一列 File 對(duì)象的 FileList 對(duì)象。FileList 的行為像一個(gè)數(shù)組，所以你可以檢查 length 屬性來(lái)獲得已選擇文件的數(shù)量。
function uploadFile() {
const filetemp = document.getElementById("file").files[0]
console.log("file對(duì)象",filetemp) //打印文件對(duì)象
const fileName = filetemp.name //從打印對(duì)象知道，這就是文件的名稱
app.uploadFile({
filePath: filetemp, //本地文件
cloudPath: `tcb/${fileName}`, //云存儲(chǔ)的路徑
onUploadProgress: (progressEvent) => { //上傳進(jìn)度回調(diào)
let percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log('上傳進(jìn)度: ' + percentCompleted, progressEvent);
}
}, function (err, res) {
console.log({err,res})
});
}
注意，這個(gè)云存儲(chǔ)的路徑前面不要有
/，也不能直接是根目錄，否則會(huì)沒有上傳權(quán)限；盡管云存儲(chǔ)可能并沒有tcb這個(gè)文件夾，但是會(huì)自動(dòng)創(chuàng)建。
2、web端刪除文件
在public文件夾下的index.html里再輸入以下代碼，我們寫一個(gè)綁定了deleteFile事件的button按鈕：
<button onclick="deleteFile()">刪除文件</button>
然后我們繼續(xù)在main.js里輸入deleteFile事件處理函數(shù)，當(dāng)點(diǎn)擊按鈕時(shí)刪除云存儲(chǔ)里指定fileID的文件：
async function deleteFile() {
const result = await app.deleteFile({
fileList: ['cloud://xly-xrlur.786c-xly-xrlur-1300446086/tcb/WX20200401-144620@2x.png']
})
result.fileList.forEach(item => {
if (item.code === 'SUCCESS') {
alert("文件刪除成功")
}
})
}
云開發(fā)的登錄還支持自定義登錄、微信公眾平臺(tái)、微信開放平臺(tái)登錄，這個(gè)在后面會(huì)介紹。
更多建議：