云開發(fā) Web端云開發(fā)

2020-07-22 15:32 更新

云開發(fā)的環(huán)境還可以開發(fā)網(wǎng)站應(yīng)用，包括普通的 PC 網(wǎng)頁或者公眾號中的網(wǎng)頁等，在開發(fā)過程中即便需要后臺服務(wù)也無需搭建服務(wù)器，可以直接使用云開發(fā)提供的云端能力。開發(fā)者無需關(guān)心具體的后臺資源及運維，只需使用平臺提供的 API 進(jìn)行核心業(yè)務(wù)開發(fā)，即可實現(xiàn)產(chǎn)品快速上線和迭代。

一、創(chuàng)建初始項目

在前面我們已經(jīng)用Cloudbase Cli工具在電腦本地用Cloudbase init創(chuàng)建了一個云開發(fā)項目，以及開通了靜態(tài)網(wǎng)站托管，那我們應(yīng)該如何在靜態(tài)的網(wǎng)頁里初始化云開發(fā)呢？

1、項目文件結(jié)構(gòu)

使用編輯器比如 Visual Studio Code，打開前面創(chuàng)建好的項目文件夾tcbweb，然后使用VS Code來新建一個public文件夾，并在public文件夾里面新建

  • index.html；

  • js文件夾，js文件夾里再新建一個main.js；

  • css文件夾，css文件夾里再新建一個style.css；

  • assert文件夾，assert文件夾里主要用于存放圖片等資源；

最終文件夾的目錄結(jié)構(gòu)如下，一個清晰的項目文件結(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 // 項目配置文件

在前面我們已經(jīng)介紹過電腦的終端，Visual Studio Code也有終端，也可以在這個終端里面進(jìn)行終端的命令行操作，和電腦的終端略有不同，大家也可以根據(jù)習(xí)慣自行選擇。

2、在網(wǎng)頁中引入Web端SDK

然后使用VS Code打開index.html文件，VS Code編輯器內(nèi)置一套emmet語法，可以大大提高我們書寫HTML代碼的效率，在index.html里輸入一個英文狀態(tài)下的感嘆號!，之后按一下tab鍵，就會出現(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ā)頁面內(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>

注意上面的版本號1.7.0，這個不一定是最新的，建議tcb-js-sdk npm包地址獲取最新的版本號，尤其是需要使用新功能的時候，要注意修改版本號。我們還可以通過npm install --save tcb-js-sdk@latest引入npm包tcb-js-sdk的方式來下載最新版的Web端SDK，而在模塊化開發(fā)時用const tcb = require("tcb-js-sdk");將Web端SDK引入到項目中，這里就不多介紹啦。

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ù)庫、文件存儲時要訪問的環(huán)境。

  const app = tcb.init({
    env: '你的環(huán)境ID'  // 此處填入你的環(huán)境ID
  });

我們知道在項目根目錄下的配置文件cloudbaserc.js或cloudbaserc.json里也需要填入環(huán)境ID，這個配置文件主要用于項目管理，這個和初始化Web端環(huán)境是有一定的區(qū)別的哦，留意一下。

也就是說我們要初始化云開發(fā)能力，一是要引入Web端SDK tcb.js文件，二是要初始化Web端的環(huán)境，這兩個是必不可少的哦，引入這兩個之后，云開發(fā)能力就算完成初始化了。

二、本地調(diào)試與云端調(diào)試Web端云開發(fā)

要在本地電腦里調(diào)試Web端云開發(fā)，除了前面已經(jīng)做過的在電腦里安裝Nodejs環(huán)境、安裝Cloudbase Cli工具、初始化云開發(fā)項目之外，還需要執(zhí)行以下操作。

使用小程序云開發(fā)的賬號登錄到騰訊云云開發(fā)控制臺，也就是登錄時選擇微信公眾號登錄，然后用小程序云開發(fā)管理員的微信掃碼，在云開發(fā)控制臺選擇其中一個環(huán)境，進(jìn)入到該環(huán)境的管理頁，點擊環(huán)境-環(huán)境設(shè)置菜單，選擇登錄方式標(biāo)簽頁，然后：

1、開啟匿名登錄

在登錄方式里可以選擇啟動匿名登錄，匿名登錄有點類似于游戲里的游客訪問模式，用戶不需要注冊就可以獲取并存儲數(shù)據(jù)，這種方式比較方便我們進(jìn)行本地調(diào)試。

每個設(shè)備同時只存在一個匿名用戶，并且此用戶永不過期（如果用戶手動清除了設(shè)備或瀏覽器的本地數(shù)據(jù)，那么匿名用戶的數(shù)據(jù)便會被同步清除，再次調(diào)用匿名登錄API會產(chǎn)生一個新的匿名用戶）。每個環(huán)境的匿名用戶數(shù)量不超過1000萬個。

打開前面創(chuàng)建的main.js文件，在環(huán)境初始化后面添加如下代碼，實現(xiàn)匿名登錄的功能。window.onload類似于小程序生命周期的onLoad生命周期函數(shù)，當(dāng)包括樣式、圖像和其他資源的頁面被全部加載時，window 對象上的 load 事件就會被觸發(fā)。

window.onload = function(){
  app.auth({
      persistence: 'session' //在窗口關(guā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加入到安全域名的白名單中，這樣這個域名下的頁面才可以使用 SDK 訪問到云開發(fā)的服務(wù)。如果你希望通過localhost的其他端口或域名地址來訪問你的靜態(tài)托管網(wǎng)站，你需要將這些它們都添加到安全域名的列表里面。

3、開啟本地開發(fā)環(huán)境

打開終端，我們先全局安裝依賴包serve（注意前面說過的安裝權(quán)限解決方案，Mac電腦命令前加sudo，Windows要用管理員身份打開終端）：

npm install -g serve

然后在項目根目錄（注意前面說過的cloudbaserc.js所在的目錄即為根目錄）執(zhí)行以下命令運行serve，即可打開一個本地靜態(tài)服務(wù)器：

npx serve

成功后就會顯示服務(wù)開啟，以及可以在本地電腦的瀏覽器訪問的localhost端口地址，以及ip地址。在瀏覽器里輸入http://localhost:5000/public/就能打開index.html了。打開瀏覽器的開發(fā)者工具，在Console標(biāo)簽頁看到登錄成功的log，就表示匿名登錄成功啦

建議使用Chrome瀏覽器，在index.html頁面空白處鼠標(biāo)右鍵點擊”審查元素”(MacBook 為”檢查”)，我們就可以打開Chrome的開發(fā)者工具，在Console標(biāo)簽頁我們就可以調(diào)試代碼。

為了調(diào)試方便，我們可以不要關(guān)閉npx serve的終端窗口，要執(zhí)行其他任務(wù)可以重新開一個終端窗口。當(dāng)我們更新public文件夾下的index.html、main.js文件時，直接刷新瀏覽器里的頁面即可。

4、部署本地文件到靜態(tài)托管

我們再開一個終端窗口，然后通過cd 命令進(jìn)入到項目根目錄，之后在終端輸入以下命令，將public文件夾下面的所有文件上傳到靜態(tài)托管網(wǎng)站的文件夾內(nèi)，比如上傳到web文件夾到環(huán)境id為xly-xrlur的環(huán)境里：

cloudbase hosting:deploy ./public web -e xly-xrlur

然后我們就可以在瀏覽器通過打開靜態(tài)托管網(wǎng)站的二級域名/web或你的域名/web訪問到這個頁面了，同樣可以使用瀏覽器的開發(fā)者工具的控制臺查看頁面的打印日志。

調(diào)用Web端SDK并不局限于云開發(fā)自帶的靜態(tài)托管服務(wù)，我們也可以使用Github Pages等其他靜態(tài)托管服務(wù)，也可以是傳統(tǒng)開發(fā)的web頁，也就是說只要是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端和小程序端來調(diào)用，也就是云開發(fā)環(huán)境里的云函數(shù)是Web端和小程序端共用的，小程序端怎么創(chuàng)建并部署云函數(shù)大家應(yīng)該比較熟悉，web端使用vscode來創(chuàng)建并部署云函數(shù)和使用微信開發(fā)者工具是一樣的道理。

2、本地云函數(shù)目錄結(jié)構(gòu)

我們可以在web端云開發(fā)項目根目錄里的functions文件夾下面建和小程序云開發(fā)云函數(shù)根目錄一樣的文件夾表示為云函數(shù)目錄，以及一樣新建三個文件并copy里面的內(nèi)容（每次創(chuàng)建一個云函數(shù)的時候都這么做），比如我們新建一個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 // 項目配置文件

在index.js里我們可以輸入以下代碼，引入服務(wù)端sdk，初始化服務(wù)端的環(huán)境，以及在main函數(shù)里返回數(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對象":event,
  "context對象":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來安裝依賴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

這里有幾個需要注意一下，小程序端云開發(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ā)控制臺是可以看到該云函數(shù)的，同時調(diào)用這個云函數(shù)的日志也在云開發(fā)控制臺的日志里看到。

  • 如果沒有在cloudbaserc.js配置，會顯示未找到函數(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)頁面加載時匿名用戶登錄后，就能調(diào)用云函數(shù)

window.onload= function(){
  app.auth({
    persistence: 'session' //在窗口關(guān)閉時清除身份驗證狀態(tài)
  })
    .anonymousAuthProvider()
    .signIn()
    .then(() => {
      app.callFunction({
        name: 'webtest',
        data: { "name": "李東bbsky", "title": "雜役"}
        })
        .then((res) => {
          console.log(res)
        });
    }).catch(err => {
      console.log("登錄失敗",err)
    })

使用瀏覽器打開（或刷新頁面）http://localhost:5000/public/index.html，然后在瀏覽器開發(fā)者工具的控制臺就能看到本地調(diào)用云函數(shù)的結(jié)果啦。我們再執(zhí)行以下命令將public的靜態(tài)頁面更新到靜態(tài)存儲，再來打開二級域名/web下的網(wǎng)頁，在瀏覽器開發(fā)者工具的控制臺也能調(diào)試代碼啦：

cloudbase hosting:deploy ./public web -e xly-xrlur

通過打印我們可以了解到，web端上傳的參數(shù)會在event對象里，且event對象會返回用戶的userInfo，其中包含微信appId，而context對象則包含關(guān)于該云函數(shù)的一些信息。

有了web端SDK，我們就能調(diào)用云開發(fā)環(huán)境里的云函數(shù)，而云函數(shù)也是可以調(diào)用云函數(shù)、可以對數(shù)據(jù)庫、云存儲進(jìn)行增刪改查，還能使用云調(diào)用（需要openid的云函數(shù)例外），因此我們也可以沿用小程序云開發(fā)的云函數(shù)的用法。我們也要留意使用CLoudbase Cli觸發(fā)云函數(shù)，以及web端觸發(fā)云函數(shù)和后面使用云接入的方式獲取到的云函數(shù)的信息會有所不同。

四、web端操作數(shù)據(jù)庫

和小程序觸發(fā)事件處理函數(shù)一樣，我們既可以使用通過頁面的生命周期函數(shù)，也可以通過點擊的方式，比如在web頁面的標(biāo)簽上綁定事件處理函數(shù)來觸發(fā)事件處理函數(shù)，來對云函數(shù)、數(shù)據(jù)庫、云存儲進(jìn)行一系列的操作。

比如我們可以在public文件夾下的index.html<body>標(biāo)簽內(nèi)輸入以下代碼，一個button標(biāo)簽里，綁定getData()事件處理程序，

<button onclick="getData()">點擊獲取數(shù)據(jù)</button>

然后在main.js里添加getData()事件處理函數(shù)，保存頁面之后，點擊button按鈕就能觸發(fā)事件處理程序，對數(shù)據(jù)發(fā)起請求，這里還是獲取以前在小程序云開發(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)
    })
}

無論是查詢數(shù)據(jù)，還是對數(shù)據(jù)庫的添加記錄、刪除數(shù)據(jù)以及指令、聚合等都和小程序云開發(fā)保持了很強的一致性，注意哦，數(shù)據(jù)庫的實時推送也是和小程序端的用法一樣。

值得注意的是當(dāng)匿名用戶往數(shù)據(jù)庫里添加數(shù)據(jù)時，云數(shù)據(jù)庫也會默認(rèn)生成_openid的字段，這個openid是臨時的，在前面已經(jīng)說過它的機(jī)制啦。

一、web端操作云存儲

1、web端上傳文件

和小程序云開發(fā)一樣，要在前端上傳文件，首先我們需要建一個上傳文件的標(biāo)簽，在public文件夾下的index.html里再輸入以下代碼，我們只允許上傳圖片，并綁定

<input type="file" id="file" accept="image/*" onchange="uploadFile()">

然后我們繼續(xù)在main.js里輸入以下代碼。被選擇的文件以 HTMLInputElement.files 屬性返回，它是一個包含一列 File 對象的 FileList 對象。FileList 的行為像一個數(shù)組，所以你可以檢查 length 屬性來獲得已選擇文件的數(shù)量。

function uploadFile() {
    const filetemp = document.getElementById("file").files[0]
    console.log("file對象",filetemp)  //打印文件對象
    const fileName = filetemp.name //從打印對象知道，這就是文件的名稱
    app.uploadFile({
        filePath: filetemp,   //本地文件
        cloudPath: `tcb/${fileName}`,  //云存儲的路徑
        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})
    });
}

注意，這個云存儲的路徑前面不要有/，也不能直接是根目錄，否則會沒有上傳權(quán)限；盡管云存儲可能并沒有tcb這個文件夾，但是會自動創(chuàng)建。

2、web端刪除文件

在public文件夾下的index.html里再輸入以下代碼，我們寫一個綁定了deleteFile事件的button按鈕：

 <button onclick="deleteFile()">刪除文件</button>

然后我們繼續(xù)在main.js里輸入deleteFile事件處理函數(shù)，當(dāng)點擊按鈕時刪除云存儲里指定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ā)的登錄還支持自定義登錄、微信公眾平臺、微信開放平臺登錄，這個在后面會介紹。

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號