介紹

在完成了界面的實現(xiàn)后，接下來可以開始進(jìn)行和云開發(fā)相關(guān)的數(shù)據(jù)對接。完成數(shù)據(jù)對接后，應(yīng)用基礎(chǔ)就打好了，接下來的就是發(fā)布上線以及一些小的功能的加入。

配置

在進(jìn)行相關(guān)的配置調(diào)用的時候，你需要先登錄騰訊云控制臺，進(jìn)行一些配置。使用你的小程序賬號登錄騰訊云，并在其中找到“云開發(fā)”產(chǎn)品。進(jìn)入到“產(chǎn)品控制臺”。

在“產(chǎn)品控制臺”中找到你的環(huán)境，點擊進(jìn)入“詳情頁”：

在環(huán)境“詳情頁面”選擇“用戶管理”->“登錄設(shè)置”->“匿名登錄”：

啟用匿名登錄。

云開發(fā)的數(shù)據(jù)查詢目前必須登錄后才可以查詢，因為希望給用戶提供的是免登錄的解決方案，因此，必須開通匿名登錄，確?？梢赃M(jìn)行數(shù)據(jù)查詢。

由于需要在網(wǎng)頁中調(diào)用相應(yīng)的函數(shù)，因此，也需要在同一個頁面的 WEB 安全域名中添加應(yīng)用的上線域名（本地調(diào)試用的 localhost 無需添加）。

為應(yīng)用程序添加匿名登錄的邏輯

此部分代碼位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js

由于希望用戶可以打開網(wǎng)頁就可以查詢數(shù)據(jù)，因此，必須在用戶無感的情況下，完成匿名登錄邏輯。

根據(jù)對 Vue 生命周期的預(yù)研，將相應(yīng)的邏輯放在了 beforeCreate 中，確保在應(yīng)用初始化完成后，就可以自動完成匿名登錄。

具體實現(xiàn)代碼如下：

// main.js
new Vue({
  router,
  vuetify,
  render: h => h(App),
  beforeCreate: function(){                   // 新增匿名登陸邏輯
        const auth = this.$tcb.auth();        // 新增匿名登陸邏輯
        auth.signInAnonymously();             // 新增匿名登陸邏輯
  }                                           // 新增匿名登陸邏輯
}).$mount('#app')

加入完成后，你可以使用云開發(fā)的數(shù)據(jù)庫等命令，來完成相應(yīng)的數(shù)據(jù)庫調(diào)用，驗證自己的調(diào)用是否正常。

在這里需要注意，由于 Vue 默認(rèn)的 ESLint 規(guī)則限制，默認(rèn)是無法在 Vue 項目代碼中使用 console.log 的，你需要使用一些命令來跳過相應(yīng)的檢查 只需要在你需要打印變量的前一行加入 // eslint-disable-next-line 就可以避免對應(yīng)的檢查了。

調(diào)用數(shù)據(jù)

此部分代碼位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/views/Result.vue

完成初始化后，就需要完成相應(yīng)的數(shù)據(jù)調(diào)用，這里不再針對每一個進(jìn)行講解，選擇一個例子來說明。

const db = this.$tcb.database();
const cmd = db.collection('command');
if(this.id){ // 這里的 id 是 props 傳入的參數(shù)，為命令對應(yīng)的 doc id
    cmd.doc(this.id).get().then(res => {
      this.command = res.data
    })
    }else{
    cmd.where({
      name: this.$route.params.cmd // 命令可以從 Route 中獲取，但實際場景下，因為開啟了 `props: true`，也可以直接從 props 中獲取。
    }).limit(1).get().then(res => {
      this.command = res.data[0]
    }).catch((err) => {
      alert("命令查詢出錯，請聯(lián)系我們")
      // eslint-disable-next-line
      console.error(err)
    })
}

在這段代碼中，首先是前期掛載的 $tcb 中抽取 database() 對象，并基于 database() 對象構(gòu)建 collection() 對象。 然后就是使用 collection() 對象進(jìn)行查詢。

由于這里涉及到不同的頁面邏輯，使用了一個 if 來判斷數(shù)據(jù)。上下兩種分別是獲取單個數(shù)據(jù)和使用多個數(shù)據(jù)的方法。獲取到數(shù)據(jù)以后，將數(shù)據(jù)更新，同步到 Vue 的 Data 中，完成相應(yīng)的邏輯的調(diào)用。

云開發(fā)登錄的坑

此部分代碼位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js

由于為用戶提供的是快速查詢功能，因此希望用戶無論何時都是無感進(jìn)行查詢的。但實際測試的時候，發(fā)現(xiàn)用戶如果直接通過命令行登錄的時候，會導(dǎo)致報錯。根據(jù)控制臺返回的信息來看，是用戶登錄狀態(tài)尚未完成，就進(jìn)行了數(shù)據(jù)查詢。

通過查詢云開發(fā)的文檔，發(fā)現(xiàn)云開發(fā)的 auth 對象在登錄的時候，可以傳入一個 persistence 參數(shù)來控制身份信息的持久化。

由于默認(rèn)使用的是會話 ，所以導(dǎo)致用戶的登錄態(tài)丟失。為了確保應(yīng)用的狀態(tài)正常進(jìn)行，將 persistence 設(shè)置為 local，確保應(yīng)用在一次登錄后可以將用戶登錄狀態(tài)下放到用戶的存儲 中，這樣可以避免用戶總是會遭遇請求失敗的問題。

// main.js
new Vue({
  router,
  vuetify,
  render: h => h(App),
  beforeCreate: async function(){
        const auth = this.$tcb.auth({ persistence: 'local' });
        await auth.signInAnonymously();
  }
}).$mount('#app')

總結(jié)

在實際開發(fā)中，如果你需要通過云開發(fā)的 Web SDK 調(diào)用相應(yīng)的數(shù)據(jù)，則需要先行開啟云開發(fā)的匿名登錄并配置 Web 安全域名；在數(shù)據(jù)調(diào)用的部分和在小程序端調(diào)用云開發(fā)沒有太大的區(qū)別；并通過設(shè)置 presistence 設(shè)置搞定了登錄狀態(tài)丟失的問題。