建站
咨詢
售后
建站咨詢
新聞中心
如果你想免費(fèi)、快速的開發(fā)出一個完整的項目，用小程序的云開發(fā)可能是最好的選擇。小程序的云開發(fā)所用到的主要是前端開發(fā)的知識。
五華網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),五華網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為五華上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個售后服務(wù)好的五華做網(wǎng)站的公司定做！
注冊微信小程序
小程序的注冊非常方便，打開小程序注冊頁面，按照要求填入個人的信息，驗證郵箱和手機(jī)號，掃描二維碼綁定你的微信號即可，3分鐘左右的時間即可搞定。
注冊頁面：小程序注冊頁面
注冊小程序時不能使用注冊過微信公眾號、微信開放平臺的郵箱哦，也就是需要你使用一個其他郵箱才行。
當(dāng)我們注冊成功后，就可以自動登入到小程序的后臺管理頁面啦，如果你不小心關(guān)掉了后臺頁面，也可以點(diǎn)擊小程序后臺管理登錄頁進(jìn)行登錄。
后臺管理頁：小程序后臺管理登錄頁
小程序和微信公眾號的登錄頁都是同一個頁面，他們會根據(jù)你的不同的注冊郵箱來進(jìn)行跳轉(zhuǎn)。
進(jìn)入到小程序的后臺管理頁后，點(diǎn)擊左側(cè)菜單的開發(fā)進(jìn)入設(shè)置頁，然后再點(diǎn)擊開發(fā)設(shè)置，在開發(fā)者ID里就可以看到AppID(小程序ID)，這個待會我們有用。
注意小程序的ID（AppID）不是你注冊的郵箱和用戶名，你需要到后臺查看才行哦~
必備工具與云開發(fā)文檔
大家可以根據(jù)自己的電腦操作系統(tǒng)來下載相應(yīng)的版本，注意要選擇穩(wěn)定版 Stable Build的開發(fā)者工具。
開發(fā)者工具：小程序開發(fā)者工具下載地址
和學(xué)習(xí)任何編程一樣，官方技術(shù)文檔都是最值得閱讀的參考資料。技術(shù)文檔大家先只需要花五分鐘左右的時間了解大致的結(jié)構(gòu)即可，先按照我們的教學(xué)步驟學(xué)完之后再來看也不遲哦。
技術(shù)文檔：云開發(fā)文檔
由于小程序的云開發(fā)在不斷新增功能，更新非常頻繁，所以要確保自己的開發(fā)者工具是最新的哦（不然會報很多奇奇怪怪的錯誤），比如你之前下載過要先同步到最新才行~
體驗云開發(fā)模板小程序
安裝完開發(fā)者工具之后，我們使用微信掃碼登錄開發(fā)者工具，然后使用開發(fā)者工具新建一個小程序的項目：
- 項目名稱：這個可以根據(jù)自己的需要任意填寫；
- 目錄：大家可以先在電腦上新建一個空文件夾，然后選擇它；
- AppID：就是之前我們找到的AppID(小程序ID)（也可以下拉選擇AppID）
- 開發(fā)模式為小程序（默認(rèn)），
- 后端服務(wù)選擇小程序·云開發(fā)
點(diǎn)擊新建確認(rèn)之后就能在開發(fā)者工具的模擬器里看到云開發(fā)QuickStart小程序，在編輯器里看到這個小程序的源代碼。
接下來，我們點(diǎn)擊開發(fā)者工具的工具欄里的預(yù)覽圖標(biāo)，就會彈出一個二維碼，使用微信掃描這個二維碼就能在手機(jī)里看到這個小程序啦。
如果你沒有使用微信登錄開發(fā)者工具，以及你的微信不是該小程序的開發(fā)者是沒法預(yù)覽的哦。
在手機(jī)里（或模擬器）操作這個小程序，把小程序里的每個按鍵都點(diǎn)一遍，看看會有什么反應(yīng)。我們會發(fā)現(xiàn)很多地方都會顯示“調(diào)用失敗”等，這非常正常，我們接下來會通過一系列的操作讓小程序不報錯。
開通云開發(fā)服務(wù)
點(diǎn)擊微信開發(fā)者工具的“云開發(fā)”圖標(biāo)，在彈出框里點(diǎn)擊“開通”，同意協(xié)議后，會彈出創(chuàng)建環(huán)境的對話框。這時會要求你輸入環(huán)境名稱和環(huán)境ID，以及當(dāng)前云開發(fā)的基礎(chǔ)環(huán)境配額（基礎(chǔ)配額免費(fèi)，而且足夠你使用哦）。
建議你環(huán)境名稱可以使用 xly、環(huán)境ID自動生成即可，當(dāng)你的云開發(fā)環(huán)境出現(xiàn)問題的時候，你可以提供你的環(huán)境ID，云開發(fā)團(tuán)隊會有專人為你解答。
按照對話框提示的要求填寫完之后，點(diǎn)擊創(chuàng)建，會初始化環(huán)境，環(huán)境初始化成功后會自動彈出云開發(fā)控制臺，這樣我們的云開發(fā)服務(wù)就開通啦。大家可以花兩分鐘左右的時間熟悉一下云開發(fā)控制臺的界面。
找到云開發(fā)的環(huán)境ID
點(diǎn)擊云開發(fā)控制臺窗口里的設(shè)置圖標(biāo)，在環(huán)境變量的標(biāo)簽頁找到環(huán)境名稱和環(huán)境ID。
當(dāng)云開發(fā)服務(wù)開通后，我們可以在小程序源代碼cloudfunctions文件夾名看到你的環(huán)境名稱。如果在cloudfunctions文件夾名顯示的不是環(huán)境名稱，而是“未指定環(huán)境”，可以鼠標(biāo)右鍵該文件夾，選擇“更多設(shè)置”，然后再點(diǎn)擊“設(shè)置”小圖標(biāo)，選擇環(huán)境并確定。
指定小程序的云開發(fā)環(huán)境
在開發(fā)者工具中打開源代碼文件夾miniprogram里的app.js，找到如下代碼：
wx.cloud.init({
// 此處請?zhí)钊氕h(huán)境 ID, 環(huán)境 ID 可打開云控制臺查看
env: 'my-env-id',
traceUser: true,
})在 env: 'my-env-id'處改成你的環(huán)境ID，如 env: 'xly-snoop'
下載Nodejs
NodeJS是在服務(wù)端運(yùn)行JavaScript的運(yùn)行環(huán)境，云開發(fā)所使用的服務(wù)端環(huán)境就是NodeJS。npm是Node包管理器，通過npm，我們可以非常方便的安裝云開發(fā)所需要的依賴包。
npm是前端開發(fā)必不可少的包（模塊）管理器，它的主要功能就是來管理包package，包括安裝、卸載、更新、查看、搜索、發(fā)布等，其他編程語言也有類似的包管理器，比如Python的pip，PHP的composer、Java的maven。我們可以把包管理器看成是windows的軟件管理中心或手機(jī)的應(yīng)用中心，只是它們用的是可視化界面，包管理器用的是命令行Command Line。
下載地址：Nodejs下載地址
大家可以根據(jù)電腦的操作系統(tǒng)下載相應(yīng)的NodeJS安裝包并安裝（安裝時不要修改安裝目錄，啥也別管直接next安裝即可）。打開電腦終端（Windows電腦為cmd命令提示符，Mac電腦為終端Terminal），然后逐行輸入并按Enter執(zhí)行下面的代碼：
node --version
npm --version如果顯示為v10.15.0以及6.11.3（可能你的版本號會有所不同），表示你的Nodejs環(huán)境已經(jīng)安裝成功。
學(xué)編程要仔細(xì)，一個字母，一個單詞，一個標(biāo)點(diǎn)符號都不要出錯哦。注意輸上面的命令時node、npm的后面有一個空格，而且是兩個短橫杠–。
部署并上傳云函數(shù)
部署并上傳云函數(shù)
cloudfuntions文件夾圖標(biāo)里有朵小云，表示這就是云函數(shù)根目錄。展開cloudfunctions，我們可以看到里面有l(wèi)ogin、openapi、callback、echo文件夾，這些就是云函數(shù)目錄。而miniprogram文件夾則放置的是小程序的頁面文件。
cloudfunctions里放的是云函數(shù)，miniprogram放的是小程序的頁面，這并不是一成不變的，也就是說你也可以修改這些文件夾的名稱，這取決于項目配置文件project.config.json里的如下配置項：
"miniprogramRoot": "miniprogram/",
"cloudfunctionRoot": "cloudfunctions/",但是你最好是讓放小程序頁面的文件夾以及放云函數(shù)的文件夾處于平級關(guān)系且都在項目的根目錄下，便于管理。使用鼠標(biāo)右鍵其中的一個云函數(shù)目錄比如login，在右鍵菜單中選擇在終端中打開，打開后在終端中輸入以下代碼并按Enter回車執(zhí)行：
npm install如果顯示“npm不是內(nèi)部或外部命令”，你需要關(guān)閉微信開發(fā)者工具啟動的終端，而是重新打開一個終端窗口，并在里面輸入 cd /D 你的云函數(shù)目錄進(jìn)入云函數(shù)目錄，比如 cd /D C:\download\tcb-project\cloudfunctions\login進(jìn)入login的云函數(shù)目錄，然后再來執(zhí)行npm install命令。這時候會下載云函數(shù)的依賴模塊，下載完成后，再右鍵login云函數(shù)目錄，點(diǎn)擊“創(chuàng)建并部署：所有文件”，這時會把本地的云函數(shù)上傳到云端，上傳成功后在login云函數(shù)目錄圖標(biāo)會變成一朵小云。
在開發(fā)者工具的工具欄上點(diǎn)擊“云開發(fā)”圖標(biāo)會打開云開發(fā)控制臺，在云開發(fā)控制臺點(diǎn)擊云函數(shù)圖標(biāo)，就能在云函數(shù)列表里看到我們上傳好的“l(fā)ogin”云函數(shù)啦。
上傳所有云函數(shù)
接下來我們按照這樣的流程把其他所有云函數(shù)（如openapi）都部署都上傳，也就是要執(zhí)行和上面相同的步驟，總結(jié)如下：
右鍵云函數(shù)目錄，選擇在終端中打開，輸入 npm install命令下載依賴文件； 然后再右鍵云函數(shù)目錄，點(diǎn)擊“創(chuàng)建并部署：所有文件” 在云開發(fā)控制臺–云函數(shù)–云函數(shù)列表查看云函數(shù)是否部署成功。
login、openapi、echo、callback這些云函數(shù)在后面都會用到的哦，一定要確定自己部署上傳成功，不然后面會報錯的哦。npm包管理器與依賴模塊
為什么要在云函數(shù)目錄執(zhí)行npm install，而不是其他地方？這是因為npm install會下載云函數(shù)目錄下的配置文件package.json里的dependencies，它表示的是當(dāng)前云函數(shù)需要依賴的模塊。package.json在哪里，就在哪里執(zhí)行npm install，沒有package.json，沒有dependencies，就沒法下載啊。
執(zhí)行npm install命令下載的依賴模塊會放在node_modules文件夾里，大家可以在執(zhí)行了npm install命令之后，在電腦里打開查看一下node_modules文件夾里下載了哪些模塊。
既然npm install是下載模塊，那它是從哪里下載的呢？就以wx-server-sdk為例，我們可以在以下鏈接看到wx-server-sdk的情況：
https://www.npmjs.com/package/wx-server-sdk為什么package.json里依賴的是一個模塊wx-server-sdk，但是node_modules文件夾里卻下載了那么多模塊？這是因為wx-server-sdk也依賴三個包tcb-admin-node、protobuf、jstslib，而這三個包又會依賴其他包，子子孫孫的，于是就有了很多模塊。
node_modules文件夾這么大（幾十M~幾百M(fèi)都可能），會不會影響小程序的大小？小程序的大小只與miniprogram文件夾有關(guān)，當(dāng)你把云函數(shù)都部署上傳到服務(wù)器之后，你把整個cloudfuntions文件夾刪掉都沒有關(guān)系。相同的依賴（比如都依賴wx-server-sdk）一旦部署到云函數(shù)之后，你可以選擇不上傳node_modules時，因為已經(jīng)上傳過了。
獲取openid與云函數(shù)login
當(dāng)我們把云函數(shù)login部署上傳成功后，就可以在模擬器以及手機(jī)（需要重新點(diǎn)擊預(yù)覽圖標(biāo)并掃描二維碼）里點(diǎn)擊獲取openid了。
點(diǎn)擊獲取openid
openid是小程序用戶的唯一標(biāo)識，也就是每一個小程序用戶都有一個唯一的openid。點(diǎn)擊“點(diǎn)擊獲取openid”，在用戶管理指引頁面如果顯示“用戶id獲取成功”以及一串字母+數(shù)字，那么表示你login云函數(shù)部署并上傳成功啦。如果獲取openid失敗，你則需要解決login云函數(shù)的部署上傳，才能進(jìn)行下面的步驟哦。
調(diào)用云函數(shù)的解讀
小程序的首頁是”pages/index/index”，我們可以從app.json的配置項或者模擬器左下角的頁面路徑可以看出來。在index.wxml里有這段代碼：
也就是當(dāng)點(diǎn)擊“點(diǎn)擊獲取openid”按鈕時，會觸發(fā)bindtap綁定的事件處理函數(shù)onGetOpenid，在index.js里可以看到onGetOpenid事件處理函數(shù)（在index.js里找到事件處理函數(shù)onGetOpenid對比理解）調(diào)用了wx.cloud.callFunction()接口（打開技術(shù)文檔對比理解）
技術(shù)文檔：調(diào)用云函數(shù)wx.cloud.callFunction
調(diào)用云函數(shù)的方法很簡單，只需要填寫云函數(shù)的名稱name（這里為login），以及需要傳遞的參數(shù)（這里并沒有上傳參數(shù)），就可以進(jìn)行調(diào)用。在success回調(diào)函數(shù)里添加以下代碼打印res對象：
console.log('調(diào)用login云函數(shù)返回的res',res)添加完成之后記得保存代碼哦，文件修改沒有保存會在標(biāo)簽頁有一個小的綠點(diǎn)?？梢允褂每旖萱I（同時按）Ctrl和S來保存（Mac電腦為Command和S）。編譯之后，再點(diǎn)擊“點(diǎn)擊獲取openid”按鈕，就能看到完整的res對象，res對象有三個參數(shù)：
- requestID：云函數(shù)執(zhí)行 ID，可用于在云開發(fā)控制臺查找日志，打開云開發(fā)控制臺–云函數(shù)–日志，可以在這里根據(jù)云函數(shù)函數(shù)名以及requestID來篩選查看云函數(shù)的調(diào)用日志（含返回結(jié)果）；
- result：云函數(shù)返回的結(jié)果，login云函數(shù)返回的結(jié)果里包含appid、event對象，我們可以通過res.result.appid以及res.result.event訪問它們；
- errMsg：顯示云函數(shù)是否調(diào)用成功
事件處理函數(shù)onGetOpenid調(diào)用云函數(shù)成功之后，干了三件事情：
- 使用console.log打印openid，可以在點(diǎn)擊按鈕觸發(fā)云函數(shù)在控制臺看到該打印結(jié)果；
- 把獲取到的appid賦值給app.js文件里的globalData全局對象；
- 跳轉(zhuǎn)到userConsole頁面；
而userConsole頁面就只是從globalData里將openid取出來通過setData渲染到頁面。
小任務(wù)：你明白為啥wx.cloud.callFunction()是小程序端的API了么？思考一下為啥云開發(fā)會有小程序端的API和服務(wù)端API的區(qū)別？能理解多少是多少，不清楚也沒有關(guān)系，后面會有更多內(nèi)容助你理解。
云函數(shù)login解讀
為什么調(diào)用云函數(shù)login返回的res的result對象里會包含event對象、appid、userInfo這些結(jié)果？這就取決于云函數(shù)是怎么寫的了。使用開發(fā)者工具打開login云函數(shù)（在cloudfuntions文件夾里）的index.js。
exports.main = (event, context) => {}這是一個箭頭函數(shù)的寫法，其中event和context是參數(shù)。我們將兩個打印日志修改為以下代碼，相當(dāng)于備注一下到底打印到哪里去了：
console.log('服務(wù)端打印的event',event)
console.log('服務(wù)端打印的context',context)保存之后，右鍵點(diǎn)擊index.js文件，選擇云函數(shù)增量上傳:（更新文件），更新login云函數(shù)，我們再來點(diǎn)擊“點(diǎn)擊獲取openid”按鈕，打印的結(jié)果在哪里呢？在云開發(fā)控制臺的云函數(shù)日志里面（注意不是開發(fā)者工具的控制臺）。打開云開發(fā)控制臺–云函數(shù)–日志，按函數(shù)名篩選，選擇login云函數(shù)，可以看到云函數(shù)被調(diào)用的日志記錄，我們可以在日志里發(fā)現(xiàn)：
- event對象包含程序用戶的 openid 和小程序的 appid，而openid就相當(dāng)于用戶的身份證，我們可以根據(jù)openid獲取到用戶的昵稱、頭像等信息（后面會說明）；
- 而context對象則是云函數(shù)的調(diào)用信息和運(yùn)行狀態(tài)。
在返回結(jié)果里我們可以看到return返回的數(shù)據(jù)
小任務(wù)：比較一下云開發(fā)控制臺的云函數(shù)日志打印的結(jié)果和開發(fā)者工具控制臺打印的結(jié)果，深入了解event對象、context對象、result對象與返回結(jié)果，這是云函數(shù)的比較重要的知識點(diǎn)。
云函數(shù)的打印日志會顯示在云開發(fā)控制臺的日志里面，這一點(diǎn)非常重要，要多加利用。只要是打印日志，無論是顯示在開發(fā)者工具控制臺還是顯示在云開發(fā)控制臺的就沒有不重要的。
getWXContext()
getWXContext()API是云開發(fā)服務(wù)端的工具類API，會返回小程序用戶的openid、小程序appid、小程序用戶的unionid等。說這么多不如直接打印，在下面添加一行打印信息：
const wxContext = cloud.getWXContext()
console.log('getWXContext返回的結(jié)果',wxContext)保存之后，右鍵點(diǎn)擊index.js文件，選擇云函數(shù)增量上傳:（更新文件），更新login云函數(shù)，我們再來點(diǎn)擊“點(diǎn)擊獲取openid”按鈕，然后去云開發(fā)控制臺的云函數(shù)日志里看到底返回了什么結(jié)果。
技術(shù)文檔：getWXContext()
對照技術(shù)文檔來理解返回的結(jié)果。
注意小程序用戶 unionid只有在開發(fā)者帳號下存在同主體的公眾號或移動應(yīng)用，并且該用戶已經(jīng)授權(quán)登錄過該公眾號或移動應(yīng)用才能獲得。
return
return語句是終止函數(shù)的執(zhí)行，并返回一個指定的值給函數(shù)調(diào)用者。這里返回了4個值，而前面我們就調(diào)用過login云函數(shù)，就是函數(shù)的調(diào)用者，所以我們打印的事件處理函數(shù)onGetOpenid的回調(diào)函數(shù)的res對象正是這個return返回的結(jié)果。那既然如此，我們在return多加一些內(nèi)容看看，比如我們之前的一些數(shù)據(jù)結(jié)構(gòu)案例，將return函數(shù)改為如下代碼：
let lesson = "云開發(fā)技術(shù)訓(xùn)練營";
let enname = "CloudBase Camp";
let x = 3, y = 4, z = 5.001, a = -3, b = -4, c = -5;
let now = new Date();
return {
movie: { name: "霸王別姬", img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp", desc: "風(fēng)華絕代。" },
movielist:["肖申克的救贖", "霸王別姬", "這個殺手不太冷", "阿甘正傳", "美麗人生"],
charat: lesson.charAt(4),
concat: enname.concat(lesson),
uppercase: enname.toUpperCase(),
abs: Math.abs(b),
pow: Math.pow(x, y),
sign: Math.sign(a),
now: now.toString(),
fullyear: now.getFullYear(),
date: now.getDate(),
day: now.getDay(),
hours: now.getHours(),
minutes: now.getMinutes(),
seconds: now.getSeconds(),
time: now.getTime(),
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}保存之后，右鍵點(diǎn)擊index.js文件，選擇云函數(shù)增量上傳:（更新文件），更新login云函數(shù)，我們再來點(diǎn)擊“點(diǎn)擊獲取openid”按鈕，然后去云開發(fā)控制臺的云函數(shù)日志里看到底返回了什么結(jié)果。
這里我們多次反復(fù)提及更新了index.js文件之后就要選擇云函數(shù)增量上傳:（更新文件），更新login云函數(shù)，希望大家平時的時候注意，這也是小程序云開發(fā)服務(wù)端和小程序端一個非常大的區(qū)別。
新建云函數(shù)
鼠標(biāo)右鍵cloudfunctions云函數(shù)根目錄，在彈出的窗口選擇新建Node.js云函數(shù)，比如輸入sum，按Enter確認(rèn)后，微信開發(fā)者工具會在本地（你的電腦）創(chuàng)建出sum云函數(shù)目錄，同時也會在線上環(huán)境中創(chuàng)建出對應(yīng)的云函數(shù)（也就是自動部署好了，可以到云開發(fā)控制臺云函數(shù)列表里看到）
打開sum云函數(shù)目錄下的index.js，添加 sum:event.a+event.b,到return函數(shù)里（把多余的內(nèi)容可以刪掉了），然后記得選擇云函數(shù)增量上傳:（更新文件），更新sum云函數(shù)。
return {
sum:event.a+event.b,
}這個a和b是變量，但是和前面不一樣的是，在服務(wù)端我們并沒有聲明a和b啊，這是因為我們可以在小程序端聲明變量。
點(diǎn)擊開發(fā)者工具模擬器的“快速新建云函數(shù)”，會跳轉(zhuǎn)到addFunction頁面，打開addFunction.wxml，我們看到測試云函數(shù)綁定的是testFunction事件處理函數(shù)。
測試云函數(shù)
我們?nèi)タ碼ddFunction.js里的testFunction，看變量a和b這兩個小程序端的變量是怎么和服務(wù)端的變量關(guān)聯(lián)起來的，而又是如何把結(jié)果渲染到頁面的。testFunction調(diào)用云函數(shù)sum同樣是通過wx.cloud.callFunction，不同的是在data里有a和b：
data: {
a: 1,
b: 2
},data里填寫的是傳遞給云函數(shù)的參數(shù)，也就是先把小程序端的參數(shù)傳遞給云函數(shù)，然后云函數(shù)處理之后再返回res對象，我們可以在success回調(diào)函數(shù)里打印res對象：
console.log("sum云函數(shù)返回的對象",res)編譯之后，我們再點(diǎn)擊測試云函數(shù)，在控制臺就能看到打印的結(jié)果，res.result.sum就是3。直接把res.result.sum通過setData賦值到result就能渲染出數(shù)字，那這個res.result是什么？JSON.stringify()又是什么？
result: JSON.stringify(res.result)我們可以打印一下res.result，以及JSON.stringify(res.result)
console.log("res.result是啥", res.result)
console.log("JSON.stringify(res.result)是啥", JSON.stringify(res.result))res.result是對象，而JSON.stringify(res.result)是json格式， JSON.stringify() 方法是將一個JavaScript值(對象或者數(shù)組)轉(zhuǎn)換為一個 JSON字符串，因為對象如果直接渲染到頁面是會顯示 [object Object]的。
小任務(wù)：將小程序的參數(shù)傳遞給云端，有沒有一點(diǎn)wx.request的感覺？相當(dāng)于我們通過云函數(shù)寫好了一個數(shù)據(jù)API，然后在小程序端調(diào)用。新建一個云函數(shù)，把各種數(shù)學(xué)運(yùn)算都部署到云端，然后通過傳遞參數(shù)，調(diào)用這些算法，并將結(jié)果渲染到頁面。
體驗上傳圖片
上傳圖片到云存儲
使用模擬器以及手機(jī)端點(diǎn)擊云開發(fā)QuickStart小程序的上傳圖片按鈕，選擇一張圖片并打開，如果在文件存儲指引頁面顯示上傳成功和文件的路徑以及圖片的縮略圖，說明你的圖片就上傳到云開發(fā)服務(wù)器里啦。
點(diǎn)擊云開發(fā)控制臺的存儲圖標(biāo)，就可以進(jìn)入到存儲管理頁查看到你之前上傳的圖片啦，點(diǎn)擊該圖片名稱可以看到這張圖片的一些信息，如：文件大小、格式、上傳者的OpenID以及存儲位置、下載地址和File ID。復(fù)制下載地址鏈接，在瀏覽器就能查看到這張圖片啦。
值得注意的是由于QuickStart小程序?qū)ⅰ吧蟼鲌D片”這個按鈕上傳的所有圖片都命名為my-image，所以上傳同一格式的圖片就會被覆蓋掉，也就是無論你上傳多少張相同格式的圖片，只會在后臺里看到最后更新的那張圖片。以后我們會教大家怎么修改代碼，讓圖片不會被覆蓋。
組件支持
我們可以把下載地址作為圖床來使用的，也就是你可以把圖片的下載地址放到其他網(wǎng)頁圖片是可以顯示的。云存儲的圖片還有一個FileID（既云文件ID，以cloud://開頭）則只能用于小程序的特定場景，也只有部分組件的部分屬性支持，把鏈接粘貼到瀏覽器也是打不開的。
技術(shù)文檔：組件支持
比如我們在index頁面的index.wxml里輸入以下代碼，在image組件的src屬性里輸入你的云存儲圖片的FileID，它是可以顯示出來的。
但是如果你退出登錄開發(fā)者工具，圖片就不會顯示，而且還會報錯，所以不要把圖片的FileID當(dāng)做圖床用，F(xiàn)ileID另有它用。 體驗云調(diào)用之服務(wù)端調(diào)用
重新點(diǎn)擊開發(fā)者工具的預(yù)覽圖標(biāo)，然后用手機(jī)掃描二維碼，在手機(jī)端點(diǎn)擊云開發(fā)QuickStart的云調(diào)用里的服務(wù)端調(diào)用，就可以發(fā)送模板消息和獲取小程序碼。
點(diǎn)擊獲取小程序碼，如果顯示調(diào)用失敗，說明你的openapi云函數(shù)沒有部署成功，需要你先部署成功才行哦。調(diào)用成功，就能獲取到你的小程序碼啦，這個小程序碼也會保存到云開發(fā)的存儲里。
發(fā)送模板消息，只能在手機(jī)微信里預(yù)覽測試哦，使用微信開發(fā)者工具是發(fā)送不了模板消息，而且控制臺還會報錯
點(diǎn)擊發(fā)送模板消息，你的微信就會收到一則服務(wù)通知，該通知是由你的小程序發(fā)出的購買成功通知。這就是微信的模板消息啦，很多微信公眾號、小程序都會有這樣的功能，使用小程序云開發(fā)，我們也可以輕松定制自己的服務(wù)通知（后面會教大家如何定制）。
體驗前端操作數(shù)據(jù)庫
點(diǎn)擊微信開發(fā)者工具的云開發(fā)圖標(biāo)，打開云開發(fā)控制臺，點(diǎn)擊數(shù)據(jù)庫圖標(biāo)進(jìn)入到數(shù)據(jù)庫管理頁，點(diǎn)擊集合名稱右側(cè)的+號圖標(biāo)，就可以創(chuàng)建一個數(shù)據(jù)集合了，這里我們只需要添加一個counters的集合（不需添加數(shù)據(jù)）即可。
在開發(fā)者工具的編輯器里展開miniprogram文件夾，打開pages文件下databaseGuide里的databaseGuide.js文件，在這里找到 onAdd: function (){}、 onQuery: function (){}、 onCounterInc: function (){}、 onCounterDec: function (){}、 onRemove: function (){}分別選中綠色的代碼塊，然后同時按快捷鍵Ctrl和/（Mac電腦的快捷鍵為Command和/），就可以批量取消代碼的注釋。
//是前端編程語言JavaScript的單行注釋，位于 // 這一行的代碼都不會執(zhí)行，我們使用快捷鍵就是批量取消這些代碼的注釋，讓整段代碼生效。之所以顯示為綠色，是微信開發(fā)者工具為了讓我們看得更清晰而做的語法高亮。
前端操作數(shù)據(jù)庫的頁面邏輯
以上的函數(shù)是在小程序的前端頁面來操作數(shù)據(jù)庫，點(diǎn)擊開發(fā)者工具模擬器云開發(fā)QuickStart里的前端操作數(shù)據(jù)庫，
在第1步（數(shù)據(jù)庫指引有標(biāo)注），我們會獲取到用戶的openid，也就是說你沒有獲取到openid是沒法通過小程序的前端來操作數(shù)據(jù)庫的哦 第2步，需要我們在云開發(fā)控制臺里的數(shù)據(jù)庫管理頁創(chuàng)建一個counters的集合（不需添加數(shù)據(jù)）； 第3步，點(diǎn)擊按鈕頁面的按鈕“新增記錄”（按鈕就在這個頁面的第4條與第5條之間，看起來不是那么明顯），這時會調(diào)用 onAdd方法，往counters集合新增一個記錄（之前手動添加有木有很辛苦？），我們可以去云開發(fā)控制臺的數(shù)據(jù)庫管理頁查看一下counters集合是不是有了一條記錄；大家可以多點(diǎn)擊幾下新增記錄按鈕，然后去云開發(fā)控制臺看數(shù)據(jù)庫又有什么變化。也就是小程序前端頁面通過 onAdd方法，在數(shù)據(jù)庫新增了記錄。 第4步，點(diǎn)擊按鈕查詢記錄，這時調(diào)用的是 onQuery方法就能在小程序里獲取到第3步我們存儲到數(shù)據(jù)庫里的數(shù)據(jù)啦 第5步，點(diǎn)擊計數(shù)器按鈕+號和-號，可以更新count的值，點(diǎn)擊+號按鈕會調(diào)用 onCounterInc方法，而點(diǎn)擊-號 onCounterDec方法，比如我們點(diǎn)擊加號到7，再去數(shù)據(jù)庫管理頁查看最新的一條記錄（也就是最后一條），它的count由原來的1更新到了7（先點(diǎn)刷新按鈕），我們再點(diǎn)擊-號按鈕到5，再來數(shù)據(jù)庫管理頁查看有什么變化變化（先點(diǎn)刷新按鈕） 第6步，點(diǎn)擊刪除記錄按鈕，會調(diào)用 onRemove方法，這時會刪掉數(shù)據(jù)庫里最新的記錄（也就是第5步里的那一條記錄）。
通過實戰(zhàn)我們了解到，databaseGuide.js文件里的 onAdd、 onQuery、 onCounterInc、 onCounterDec、 onRemove可以實現(xiàn)小程序的前端頁面來操作數(shù)據(jù)庫。
這些函數(shù)大家可以結(jié)合databaseGuide.js文件和云開發(fā)技術(shù)文檔關(guān)于數(shù)據(jù)庫的內(nèi)容來理解。（關(guān)于前端是如何操作數(shù)據(jù)庫的，我們之后還會深入講解，這里只需要了解大致的邏輯即可）
在前面JavaScript的章節(jié)里我們了解到數(shù)據(jù)以及數(shù)據(jù)的存儲是非常重要的，而有了數(shù)據(jù)庫，用函數(shù)生成的數(shù)據(jù)能夠比緩存存儲的更加持久，而且在上面我們實現(xiàn)了對數(shù)據(jù)進(jìn)行增(添加)、刪(刪除)、改(修改、更新)、查(查詢并渲染到頁面)，不僅如此，緩存的容量也比較有限，最多不過10M，而數(shù)據(jù)庫可以存幾百G以上，可見它的重要性。
開始一個新的云開發(fā)項目
基于云開發(fā)QuickStart模板小程序
云開發(fā)QuickStart模板小程序有很多多余的頁面，這個我們只需要把miniprogram文件夾下的pages、images、components、style文件夾里的文件清空，以及app.json的pages配置項里的頁面刪除，把a(bǔ)pp.wxss里的樣式代碼都刪掉就是一個全新的開始啦。這是方法之一，也可以使用下面的方法（推薦學(xué)習(xí)時使用下面的方法）。
基于沒有使用云開發(fā)的項目改造 當(dāng)然我們也可以把前面章節(jié)沒有使用云開發(fā)的項目改造成使用云服務(wù)，首先在小程序的根目錄下新建一個文件夾，比如cloudfunctions，然后在project.config.json添加云函數(shù)文件夾的路徑配置即可，
"cloudfunctionRoot": "cloudfunctions/",然后新建一個miniprogram文件夾，把小程序除了project.config.json以外的其他文件，比如pages、utils、images、app.js、app.json等文件都放到miniprogram文件夾里，再在project.config.json添加miniprogramRoot配置:
"cloudfunctionRoot": "cloudfunctions/",
"miniprogramRoot":"miniprogram/",值得一提的是，云函數(shù)部署上傳成功，我們就可以一直調(diào)用，只要你的小程序的appid以及環(huán)境ID沒有變，你創(chuàng)建再多的小程序項目，都可以直接調(diào)用部署好的云函數(shù)，比如前面的login、echo、callback、sum等云函數(shù)。也就是說云函數(shù)一旦部署成功，它就一直在云端服務(wù)器里，哪怕你把小程序本地的云函數(shù)都刪掉也沒有關(guān)系。當(dāng)新建了并配置了云函數(shù)根目錄為cloudfunctions文件夾之后，云函數(shù)根目錄里并沒有云函數(shù)，我們可以右鍵點(diǎn)擊云函數(shù)根目錄cloudfunctions文件夾選擇同步云函數(shù)列表，可以把所有云端的云函數(shù)列表都列舉出來（這只是列舉了列表），而要修改云函數(shù)里面的內(nèi)容，我們可以右鍵點(diǎn)擊其中的一個云函數(shù)目錄選擇下載云函數(shù)即可。
除此之外，我們需要小程序的app.js的生命周期函數(shù)onLaunch里使用wx.cloud.init()來初始化云開發(fā)能力：
onLaunch: function () {
if (!wx.cloud) {
console.error('請使用 2.2.3 或以上的基礎(chǔ)庫以使用云能力')
} else {
wx.cloud.init({
env: '你的環(huán)境ID',
traceUser: true,
})
}
},云開發(fā)能力全局只需要初始化一次即可，這里的traceUser屬性設(shè)置為true，會將用戶訪問記錄到用戶管理中，在云開發(fā)控制臺的運(yùn)營分析—用戶訪問里可以看到訪問記錄。
基礎(chǔ)庫與wx.cloud
在小程序端初始化云開發(fā)能力的代碼里，涉及到wx.cloud以及基礎(chǔ)庫版本的知識。關(guān)于wx.cloud，我們可以和之前在控制臺了解wx對象一樣，直接在開發(fā)者工具的控制臺里輸入：
wx.cloud來了解對象有哪些屬性與方法。我們可以看到有如下方法：
CloudID: ? () //用于云調(diào)用獲取開放數(shù)據(jù)
callFunction: ? () //調(diào)用云函數(shù)
database: ? () //獲取數(shù)據(jù)庫的引用
deleteFile: ? () //從云存儲空間刪除文件
downloadFile: ? () //從云存儲空間下載文件
getTempFileURL: ? () //用云文件 ID 換取真實鏈接
init: ? () //初始化云開發(fā)能力
uploadFile: ? () //上傳文件至云存儲空間而關(guān)于基礎(chǔ)庫，有三個地方需要注意它的存在，平時開發(fā)的時候需要留意
開發(fā)者工具的project.config.json里有這樣一個屬性libVersion，這個也可以在開發(fā)者工具工具欄右上角的詳情里的本地設(shè)置里的調(diào)試基礎(chǔ)庫，建議切換到最新，切換后libVersion的值也會修改到切換的版本； 官方文檔基礎(chǔ)庫的更新日志，小程序更新非常頻繁，而更新的核心就是基礎(chǔ)庫：所以基礎(chǔ)庫更新日志要經(jīng)常留意 每個API，技術(shù)文檔都會標(biāo)明它的基礎(chǔ)庫支持的最低版本，而小程序·云開發(fā) SDK是2.2.3以上的基礎(chǔ)庫才開始支持的。
當(dāng)前題目：創(chuàng)新互聯(lián)小程序云教程：云開發(fā) 云開發(fā)快速入門
分享鏈接：http://fisionsoft.com.cn/article/cdhdcde.html
