介紹
在完成了 UI 界面的實作後,接下來可以開始進行和雲開發相關的資料對接。完成資料對接後,應用基礎就打好了,接下來的就是釋出上線以及一些小的 feature 的加入。
配置
在進行相關的配置調用的時候,你需要先登陸騰訊雲控制台,進行一些配置。
使用你的小程式賬号登陸騰訊雲,并在其中找到雲開發産品。進入到産品控制台。
在産品控制台中找到你的環境,點選進入詳情頁
在環境詳情頁面選擇使用者管理、登陸設定、匿名登陸
啟用匿名登陸。
雲開發的資料查詢目前必須登陸後才可以查詢,因為希望給使用者提供的是免登陸的解決方案,是以,必須開通匿名登陸,確定可以進行資料查詢。
由于需要在網頁中調用相應的函數,是以,也需要在同一個頁面的 WEB 安全域名中添加應用的上線域名(本地調試用的 localhost 無需添加)。
為應用程式添加匿名登陸的邏輯
此部分代碼位置:https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js
由于希望使用者可以打開網頁就可以查詢資料,是以,必須在使用者無感的情況下,完成匿名登陸邏輯。
根據對 Vue 生命周期的預研,将相應的邏輯放在了 beforeCreate 中,確定在應用初始化完成後,就可以自動完成匿名登陸。
具體實作代碼如下
// main.js
new Vue({
router,
vuetify,
render: h => h(App),
beforeCreate: function(){ // 新增匿名登陸邏輯
const auth = this.$tcb.auth(); // 新增匿名登陸邏輯
auth.signInAnonymously(); // 新增匿名登陸邏輯
} // 新增匿名登陸邏輯
}).$mount('#app')
複制
加入完成後,你可以使用雲開發的資料庫等指令,來完成相應的資料庫調用,驗證自己的調用是否正常。
在這裡需要注意,由于 Vue 預設的 ESLint 規則限制,預設是無法在 Vue 項目代碼中使用
console.log
的,你需要使用一些指令來跳過相應的檢查
隻需要在你需要列印變量的前一行加入
就可以避免對應的檢查了。
// eslint-disable-next-line
調用資料
此部分代碼位置:https://github.com/LCTT/tldr.linux.cn/blob/master/src/views/Result.vue
完成初始化後,就需要完成相應的資料調用,這裡不再針對每一個進行講解,選擇一個例子來說明。
const db = this.$tcb.database();
const cmd = db.collection('command');
if(this.id){ // 這裡的 id 是 props 傳入的參數,為指令對應的 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("指令查詢出錯,請聯系我們")
// eslint-disable-next-line
console.error(err)
})
}
複制
在這段代碼中,首先是前期挂載的 $tcb 中抽取 database ,并基于 database 建構 collection.
然後就是使用 collection 進行查詢。
由于這裡涉及到不同的頁面邏輯,使用了一個 if 來判斷資料。上下兩種分别是擷取單個資料和使用多個資料的方法。擷取到資料以後,将資料更新,同步到 Vue 的 Data 中,完成相應的邏輯的調用。
雲開發登陸的坑
此部分代碼位置:https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js
由于為使用者提供的是快速查詢功能,是以希望使用者無論何時都是無感進行查詢的。但實際測試的時候,發現使用者如果直接通過指令行登陸的時候,會導緻報錯。根據控制台傳回的資訊來看,是使用者登陸狀态尚未完成,就進行了資料查詢。
通過查詢雲開發的文檔,發現雲開發的 auth 對象在登陸的時候,可以傳入一個 persistence 來控制身份資訊的持久化。
由于預設使用的是 session ,是以導緻使用者的登陸态丢失。為了確定應用的狀态正常進行,将
persistence
設定為
local
,確定應用在一次登陸後可以将使用者登陸狀态下放到使用者的 storage 中,這樣可以避免使用者總是會遭遇請求失敗的問題。
// 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')
複制
總結
在實際開發中,如果你需要通過雲開發的 Web SDK 調用相應的資料,則需要先行開啟雲開發的匿名登陸并配置 Web 安全域名;在資料調用的部分和在小程式端調用雲開發沒有太大的差別;并通過設定 presistence 設定搞定了登陸狀态丢失的問題。