在前面的章節(jié)，我們已經(jīng)創(chuàng)建了一個(gè)云開發(fā)QuickStart小程序項(xiàng)目，這個(gè)項(xiàng)目是云開發(fā)默認(rèn)的Demo小程序，通過這個(gè)小程序我們可以來體驗(yàn)云開發(fā)的的一些能力，比如云存儲(chǔ)、云函數(shù)、數(shù)據(jù)庫、云調(diào)用等多方面的能力。

1.5.1 體驗(yàn)云存儲(chǔ)的能力

1、上傳圖片到云存儲(chǔ)

使用模擬器以及手機(jī)端點(diǎn)擊云開發(fā)QuickStart小程序的上傳圖片按鈕，選擇一張圖片并打開，如果在文件存儲(chǔ)指引頁面顯示上傳成功和文件的路徑以及圖片的縮略圖，說明你的圖片就上傳到云開發(fā)服務(wù)器里啦。

點(diǎn)擊云開發(fā)控制臺(tái)的存儲(chǔ)圖標(biāo)，就可以進(jìn)入到存儲(chǔ)管理頁查看到你之前上傳的圖片啦，點(diǎn)擊該圖片名稱可以看到這張圖片的一些信息，如：文件大小、格式、上傳者的OpenID以及存儲(chǔ)位置、下載地址和File ID。復(fù)制下載地址鏈接，在瀏覽器就能查看到這張圖片啦。

值得注意的是由于QuickStart小程序?qū)ⅰ吧蟼鲌D片”這個(gè)按鈕上傳的所有圖片都命名為my-image，所以上傳同一格式的圖片就會(huì)被覆蓋掉，也就是無論你上傳多少張相同格式的圖片，只會(huì)在后臺(tái)里看到最后更新的那張圖片。以后我們會(huì)教大家怎么修改代碼，讓圖片不會(huì)被覆蓋。

2、安全便捷的fileID

每一個(gè)上傳到云存儲(chǔ)的文件都有一個(gè)全網(wǎng)唯一的fileID（也就是云文件ID，以cloud://開頭），fileID只能用于小程序的內(nèi)部，比如將fileID傳入到SDK就可以對(duì)文件進(jìn)行下載、刪除、獲取文件信息等操作，非常方便。

部分小程序組件（如image、video、cover-image等）和接口，支持直接傳入云文件的fileID，當(dāng)然也只有部分組件的部分屬性支持，把鏈接粘貼到瀏覽器也是打不開的。

比如我們?cè)趇ndex頁面的index.wxml里輸入以下代碼，在image組件的src屬性里輸入你的云存儲(chǔ)圖片的FileID，它是可以顯示出來的。

<image src="你的圖片的FileID"></image>

3、https鏈接與CDN加速

如果我們想在瀏覽器中可以直接下載云存儲(chǔ)里的文件，或?qū)⒃拼鎯?chǔ)作為圖床，可以使用文件的下載地址或使用fileID獲取私有權(quán)限文件的https臨時(shí)鏈接（這個(gè)在后面的章節(jié)會(huì)介紹），也就是我們可以把圖片的https鏈接如下載地址復(fù)制粘貼到瀏覽器，或者放到其他網(wǎng)頁，圖片是可以顯示的。

云存儲(chǔ)無需進(jìn)行繁雜的配置，https鏈接默認(rèn)支持CDN加速，并提供免費(fèi)的CDN域名。CDN會(huì)將云存儲(chǔ)的內(nèi)容分發(fā)至最接近用戶的節(jié)點(diǎn)，直接由服務(wù)節(jié)點(diǎn)快速響應(yīng)，可以有效降低用戶訪問延遲。

4、云存儲(chǔ)與openid

在云開發(fā)控制臺(tái)的存儲(chǔ)里，我們可以看到每張圖片的詳細(xì)信息都有上傳者 Open ID，無論你是使用開發(fā)者工具在模擬器的小程序里上傳還是預(yù)覽在手機(jī)的小程序里上傳，只要你用的是同一個(gè)微信賬號(hào)，這個(gè)上傳者openid都是一致的，云存儲(chǔ)會(huì)自動(dòng)記錄上傳者的openid。

要注意的是，如果你不經(jīng)過小程序端，直接使用云開發(fā)控制臺(tái)的云存儲(chǔ)管理界面上傳文件，是沒有openid的，這是小程序端與管理端（控制臺(tái)、云函數(shù)）的區(qū)別。

1.5.2 體驗(yàn)云函數(shù)的調(diào)用

1、獲取用戶的openid

當(dāng)我們把云函數(shù)login部署上傳成功后，就可以在模擬器以及手機(jī)（需要重新點(diǎn)擊預(yù)覽圖標(biāo)并掃描二維碼）里點(diǎn)擊獲取openid了。

1、點(diǎn)擊獲取openid

openid是小程序用戶的唯一標(biāo)識(shí)，也就是每一個(gè)小程序用戶都有一個(gè)唯一的openid。點(diǎn)擊“點(diǎn)擊獲取openid”，在用戶管理指引頁面如果顯示“用戶id獲取成功”以及一串字母+數(shù)字，那么表示你login云函數(shù)部署并上傳成功啦。如果獲取openid失敗，你則需要解決login云函數(shù)的部署上傳，才能進(jìn)行下面的步驟哦。

2、調(diào)用云函數(shù)的解讀

小程序的首頁是”pages/index/index”，我們可以從app.json的配置項(xiàng)或者模擬器左下角的頁面路徑可以看出來。在index.wxml里有這段代碼：

<button class="userinfo-nickname" bindtap="onGetOpenid">點(diǎn)擊獲取openid</button>

也就是當(dāng)點(diǎn)擊“點(diǎn)擊獲取openid”按鈕時(shí)，會(huì)觸發(fā)bindtap綁定的事件處理函數(shù)onGetOpenid，在index.js里可以看到onGetOpenid事件處理函數(shù)（在index.js里找到事件處理函數(shù)onGetOpenid對(duì)比理解）調(diào)用了wx.cloud.callFunction()接口（在技術(shù)文檔搜索找到這個(gè)接口對(duì)比理解），如下所示：

onGetOpenid: function() { ?// 調(diào)用云函數(shù) ?wx.cloud.callFunction({ ? ?name: 'login', ? ?data: {}, ? ?success: res => { ? ? ?console.log('[云函數(shù)] [login] user openid: ', res.result.openid) ? ? ?app.globalData.openid = res.result.openid ? ? ?wx.navigateTo({ ? ? ? ?url: '../userConsole/userConsole', ? ? ?}) ? ?}, ? ?fail: err => { ? ? ?console.error('[云函數(shù)] [login] 調(diào)用失敗', err) ? ? ?wx.navigateTo({ ? ? ? ?url: '../deployFunctions/deployFunctions', ? ? ?}) ? ?} ?})},

調(diào)用云函數(shù)的方法很簡(jiǎn)單，只需要填寫云函數(shù)的名稱name（這里為login），以及需要傳遞的參數(shù)（這里并沒有上傳參數(shù)），就可以進(jìn)行調(diào)用。事件處理函數(shù)onGetOpenid調(diào)用云函數(shù)成功之后，干了三件事情：

• 使用console.log打印openid，可以在點(diǎn)擊按鈕觸發(fā)云函數(shù)在開發(fā)者工具調(diào)試器的console控制臺(tái)看到該打印結(jié)果；

• 把獲取到的appid賦值給app.js文件里的globalData全局對(duì)象；

• 跳轉(zhuǎn)到userConsole頁面；

而userConsole頁面就只是從globalData里將openid取出來通過setData渲染到頁面。代碼的具體含義，在后面的章節(jié)我們也會(huì)一一講解。

3、云函數(shù)與openid

當(dāng)我們?cè)谛〕绦蚨苏{(diào)用login云函數(shù)的時(shí)候，就能返回用戶的openid，這個(gè)openid的值和我們之前在云存儲(chǔ)看到的也是一樣的。那云函數(shù)是通過什么方法獲取到這個(gè)值的呢？我們可以打開login云函數(shù)下面的index.js文件，看到有類似下面的代碼：

const wxContext = cloud.getWXContext()return { ?openid: wxContext.OPENID,}

它使用到了Cloud.getWXContext()的接口，用來獲取小程序端調(diào)用云函數(shù)的上下文context，也就是說只有用戶在小程序端調(diào)用這個(gè)接口，才會(huì)返回相應(yīng)用戶的openid。

1.5.3 體驗(yàn)前端操作數(shù)據(jù)庫

1、創(chuàng)建集合并修改權(quán)限

點(diǎn)擊微信開發(fā)者工具的云開發(fā)圖標(biāo)，打開云開發(fā)控制臺(tái)，點(diǎn)擊數(shù)據(jù)庫圖標(biāo)進(jìn)入到數(shù)據(jù)庫管理頁，點(diǎn)擊集合名稱右側(cè)的+號(hào)圖標(biāo)，就可以創(chuàng)建一個(gè)數(shù)據(jù)集合了，這里我們只需要添加一個(gè)counters的集合（不需添加數(shù)據(jù)）。

同時(shí)建議修改一下counters集合的權(quán)限，使用控制臺(tái)創(chuàng)建的集合默認(rèn)的權(quán)限為“僅創(chuàng)建者可讀寫”，在學(xué)習(xí)時(shí)可能會(huì)出現(xiàn)一些新手不太容易理解的問題，可以暫時(shí)修改為“所有用戶可讀，僅創(chuàng)建者可讀寫”，具體含義后面的章節(jié)會(huì)有詳細(xì)介紹。

2、取消注釋代碼

在開發(fā)者工具的編輯器里展開miniprogram文件夾，打開pages文件下databaseGuide里的databaseGuide.js文件，在這里找到onAdd: function (){}、?onQuery: function (){}、?onCounterInc: function (){}、?onCounterDec: function (){}、?onRemove: function (){}分別選中綠色的代碼塊，然后同時(shí)按快捷鍵Ctrl和/（Mac電腦的快捷鍵為Command和/），就可以批量取消代碼的注釋。

//是前端編程語言JavaScript的單行注釋，位于?//這一行的代碼都不會(huì)執(zhí)行，我們使用快捷鍵就是批量取消這些代碼的注釋，讓整段代碼生效。之所以顯示為綠色，是微信開發(fā)者工具為了讓我們看得更清晰而做的語法高亮。

2、前端操作數(shù)據(jù)庫的頁面邏輯

以上的函數(shù)是在小程序的前端頁面來操作數(shù)據(jù)庫，點(diǎn)擊開發(fā)者工具模擬器云開發(fā)QuickStart里的前端操作數(shù)據(jù)庫，

• 在第1步（數(shù)據(jù)庫指引有標(biāo)注），我們會(huì)獲取到用戶的openid，也就是說你沒有獲取到openid是沒法通過小程序的前端來操作數(shù)據(jù)庫的哦

• 第2步，需要我們?cè)?strong>云開發(fā)控制臺(tái)里的數(shù)據(jù)庫管理頁創(chuàng)建一個(gè)counters的集合（不需添加數(shù)據(jù)）；

• 第3步，點(diǎn)擊按鈕頁面的按鈕“新增記錄”（按鈕就在這個(gè)頁面的第4條與第5條之間，看起來不是那么明顯），這時(shí)會(huì)調(diào)用 onAdd方法，往counters集合新增一個(gè)記錄（之前手動(dòng)添加有木有很辛苦？），我們可以去云開發(fā)控制臺(tái)的數(shù)據(jù)庫管理頁查看一下counters集合是不是有了一條記錄；大家可以多點(diǎn)擊幾下新增記錄按鈕，然后去云開發(fā)控制臺(tái)看數(shù)據(jù)庫又有什么變化。也就是小程序前端頁面通過 onAdd方法，在數(shù)據(jù)庫新增了記錄。

• 第4步，點(diǎn)擊按鈕查詢記錄，這時(shí)調(diào)用的是 onQuery方法就能在小程序里獲取到第3步我們存儲(chǔ)到數(shù)據(jù)庫里的數(shù)據(jù)啦

• 第5步，點(diǎn)擊計(jì)數(shù)器按鈕+號(hào)和-號(hào)，可以更新count的值，點(diǎn)擊+號(hào)按鈕會(huì)調(diào)用 onCounterInc方法，而點(diǎn)擊-號(hào) onCounterDec方法，比如我們點(diǎn)擊加號(hào)到7，再去數(shù)據(jù)庫管理頁查看最新的一條記錄（也就是最后一條），它的count由原來的1更新到了7（先點(diǎn)刷新按鈕），我們?cè)冱c(diǎn)擊-號(hào)按鈕到5，再來數(shù)據(jù)庫管理頁查看有什么變化變化（先點(diǎn)刷新按鈕）

• 第6步，點(diǎn)擊刪除記錄按鈕，會(huì)調(diào)用 onRemove方法，這時(shí)會(huì)刪掉數(shù)據(jù)庫里最新的記錄（也就是第5步里的那一條記錄）。

通過實(shí)戰(zhàn)我們了解到，databaseGuide.js文件里的 onAdd、 onQuery、 onCounterInc、 onCounterDec、 onRemove可以實(shí)現(xiàn)小程序的前端頁面來操作數(shù)據(jù)庫。

這些函數(shù)大家可以結(jié)合databaseGuide.js文件和云開發(fā)技術(shù)文檔關(guān)于數(shù)據(jù)庫的內(nèi)容來理解。（關(guān)于前端是如何操作數(shù)據(jù)庫的，我們之后還會(huì)深入講解，這里只需要了解大致的邏輯即可）

3、云數(shù)據(jù)庫與openid

在云開發(fā)控制臺(tái)的數(shù)據(jù)庫標(biāo)簽里，留意一下通過點(diǎn)擊小程序端新增記錄的按鈕在counters集合里創(chuàng)建的記錄，在這個(gè)集合里我們可以看到每條記錄除了有_id字段以外，還有一個(gè)**_openid字段**，這個(gè)字段就存儲(chǔ)著小程序用戶的openid，用來標(biāo)志每條記錄的創(chuàng)建者（也就是小程序的用戶）。

我們可以自定義??_id（也就是給數(shù)據(jù)添加一個(gè)_id字段并填入任意值），但不可自定義和修改??_openid。?_openid是在文檔創(chuàng)建時(shí)由系統(tǒng)根據(jù)小程序用戶默認(rèn)創(chuàng)建的，可以用來標(biāo)識(shí)和定位文檔。和云存儲(chǔ)一樣，數(shù)據(jù)庫的記錄也和openid有著緊密的聯(lián)系。

4、openid與云開發(fā)

總結(jié)一下，用戶在小程序里有著獨(dú)一無二的openid，相同的用戶在不同的小程序openid也不同，因此我們完全可以用openid來區(qū)分用戶，而且openid貫穿于小程序端、云存儲(chǔ)、云函數(shù)、數(shù)據(jù)庫等之中：

• 使用云開發(fā)時(shí)，用戶在小程序端上傳文件到云存儲(chǔ)，這個(gè)openid會(huì)被記錄在文件信息里；

• 添加數(shù)據(jù)到數(shù)據(jù)庫這個(gè)openid會(huì)被保存在_openid的字段里；

• 我們還可以使用云函數(shù)的Cloud.getWXContext()來獲取用戶的openid；

1.5.4 用戶信息與登錄

在小程序端，我們無需維護(hù)復(fù)雜的鑒權(quán)機(jī)制，即可獲取天然可信任的用戶登錄態(tài)openid，openid貫穿于小程序端、云存儲(chǔ)、云函數(shù)、數(shù)據(jù)庫等之中，這也就讓小程序云開發(fā)在處理用戶登錄以及用戶操作云開發(fā)資源相比傳統(tǒng)方式要方便很多。

1、獲取用戶信息

在云開發(fā)QuickStart小程序有一個(gè)獲取用戶信息（如頭像）的功能，點(diǎn)擊該按鈕會(huì)首先彈出授權(quán)彈窗，是否允許小程序獲取你的公開信息（昵稱、頭像、地區(qū)及性別），確認(rèn)允許之后，你的頭像就顯示在小程序上了。

這個(gè)功能實(shí)現(xiàn)的源代碼大致來自兩個(gè)部分，一個(gè)是index.wxml里的button組件，以及與button組件綁定的事件處理函數(shù)onGetUserInfo和調(diào)用了wx.getUserInfo這個(gè)API。

//下面的代碼在index.wxml里可以找到<button ?open-type="getUserInfo" ?bindgetuserinfo="onGetUserInfo" ?class="userinfo-avatar" ?style="background-image: url({{avatarUrl}})" ?size="default"></button>//下面的事件處理函數(shù)在index.js里可以找到onLoad: function() { ?// 獲取用戶信息 ?wx.getSetting({ ? ?success: res => { ? ? ?if (res.authSetting['scope.userInfo']) { ? ? ? ?// 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會(huì)彈框 ? ? ? ?wx.getUserInfo({ ? ? ? ? ?success: res => { ? ? ? ? ? ?this.setData({ ? ? ? ? ? ? ?avatarUrl: res.userInfo.avatarUrl, ? ? ? ? ? ? ?userInfo: res.userInfo ? ? ? ? ? ?}) ? ? ? ? ?} ? ? ? ?}) ? ? ?} ? ?} ?})},onGetUserInfo: function(e) { ?if (!this.data.logged && e.detail.userInfo) { ? ?this.setData({ ? ? ?logged: true, ? ? ?avatarUrl: e.detail.userInfo.avatarUrl, ? ? ?userInfo: e.detail.userInfo ? ?}) ?}},

使用onGetUserInfo來獲取用戶信息的作用和?wx.getUserInfo?API基本效果是一樣的，區(qū)別在于wx.getUserInfo 這種方式最好是在用戶允許獲取公開信息（也就是res.authSetting[‘scope.userInfo’]的值為true）之后再調(diào)用，如果用戶拒絕了授權(quán)就不會(huì)再有彈窗（除非用戶刪掉了你的小程序再使用），調(diào)用就會(huì)失敗，而使用組件的方式是用戶主動(dòng)點(diǎn)擊，用戶即使拒絕了，再點(diǎn)擊仍會(huì)彈出授權(quán)彈窗。所以推薦先使用組件來獲取用戶授權(quán)，然后再來使用wx.getUserInfo來獲取用戶信息。

2、openid、用戶信息與登錄

就代碼而言，上面的案例你可以不必懂，只需要明白獲取用戶信息與登錄是有很大的區(qū)別的。也就是說盡管我們已經(jīng)獲取到了用戶的頭像、昵稱等信息，但是這不能稱之為真正意義的登錄，因?yàn)橛脩舻年欠Q、頭像、性別、地區(qū)這些信息都不是用戶唯一的憑證，而且用戶可以隨意修改。

上面的案例也僅僅只是獲取了用戶信息的授權(quán)，以及獲取了用戶信息并顯示在小程序上，并沒有將用戶的信息存儲(chǔ)到數(shù)據(jù)庫、也沒有將用戶的頭像存儲(chǔ)到云存儲(chǔ)，因此當(dāng)我們點(diǎn)擊開發(fā)者工具“清除緩存”的按鈕，將所有信息清除之后，小程序就無法識(shí)別這個(gè)用戶了。

只有獲取到了用戶身份的唯一ID也就是openid，我們才能把用戶行為比如點(diǎn)贊、評(píng)論、發(fā)布文章、收藏等與用戶掛鉤，用戶這些行為都與數(shù)據(jù)庫有關(guān)，而能夠確定點(diǎn)贊、評(píng)論、文章、收藏這些數(shù)據(jù)與用戶關(guān)系的就是openid，也就是說只要獲取到了openid就意味著用戶已經(jīng)登錄，而獲取用戶信息（如頭像、昵稱）不過是一個(gè)附加服務(wù)，這兩個(gè)是可以完全獨(dú)立的。沒有openid，我們也無法把用戶信息給存儲(chǔ)到數(shù)據(jù)庫，也就沒法讓用戶自定義用戶信息。無論是用戶行為，還是用戶的信息，openid都是一個(gè)重要的橋梁。

值得一提的是，獲取用戶信息和顯示用戶信息也是兩個(gè)不同的概念，小程序的open-data就可以用于展示微信用戶的信息，比如我們可以直接在miniprogram目錄index文件夾下的index.wxml文件里添加如下代碼：

<open-data type="userAvatarUrl"></open-data><open-data type="userNickName"></open-data><open-data type="userGender" lang="zh_CN"></open-data><open-data type="userCity" lang="zh_CN"></open-data><open-data type="userProvince" lang="zh_CN"></open-data><open-data type="userCountry" lang="zh_CN"></open-data>

在無需用戶授權(quán)的情況下，open-data組件可以直接將用戶的信息顯示在小程序上，但是小程序的開發(fā)者卻并不能獲取到用戶的信息，open-data只能用于顯示用戶信息。顯示用戶信息、獲取用戶信息以及獲取用戶的openid這三者是不同的概念，所以不要弄混哦。

關(guān)于云調(diào)用的體驗(yàn)，可以按照QuickStart給的案例說明按照步驟體驗(yàn)就可以了，這里就不多做介紹了，在后面的學(xué)習(xí)中，我們都會(huì)一一實(shí)現(xiàn)。