本文結合一個案例說明雲開發的開發步驟，並介紹雲開發相關知識的應用。
1
準備工作
1
●
通過雲開發控制台增加
集合city和記錄、上傳文件
通過雲開發控制台新建集合city、添加一條記錄，結果如圖13-1所示。通過雲開發控制台將集合的權限設置為「所有用戶可讀，僅創建者可讀寫」，結果如圖12-8所示。
■圖13-1通過雲開發控制台新建集合city、添加一條記錄的結果
上傳一個城市信息文件，以便於後面的測試。
2
●
實現雲函數addcityinfomationfun
在參考書11章項目secondcloud的基礎上繼續後續的開發。
實現雲函數addcityinfomationfun，修改後的文件index.js代碼示例13-1所示。
【例13-1】雲函數addcityinfomationfun修改後的文件index.js代碼示例。
3
●
實現雲函數deleteacityfun
實現雲函數deleteacityfun，修改後的文件index.js代碼示例13-2所示。
4
●
修改文件app.json
在項目secondcloud的基礎上繼續後續的開發。
修改文件app.json，在上一篇例12-19語句「 "pages/homeofwxmpcloud/homeo-fwxmpcloud",」之前增加4條語句，增加代碼如例13-3所示。
修改代碼後編譯程序，自動在目錄pages下生成homeofcitycloud、listcities、cityoperation、tellerror 4個子目錄，且在這4個子目錄(每個子目錄對應一個頁面)下分別自動生成對應頁面的4個文件(如homeofcitycloud.wxml等)。
1
4個頁面的實現
1
●
修改homeofcitycloud
頁面的wxml、js文件
修改文件homeofcitycloud.wxml和homeofcitycloud.js。文件homeofcitycloud.wxml修改後的代碼如例13-4所示。
【例13-4】文件homeofcitycloud.wxml修改後的代碼示例。
文件homeofcitycloud.js修改後的代碼如例13-5所示。
2
●
修改listcities頁面的
wxml、js和wxss文件
修改文件listcities.wxml、listcities.js和listcities.wxss。文件listcities.wxml修改後的代碼如例13-6所示。
【例13-6】文件listcities.wxml修改後的代碼示例。
【例13-7】文件listcities.js修改後的代碼示例。
3
●
修改cityoperation頁面的
wxml、js和wxss文件
修改文件cityoperation.wxml、cityoperation.js和cityoperation.wxss。文件cityoperation.wxml修改後的代碼如例13-9所示。
【例13-9】文件cityoperation.wxml修改後的代碼示例。
【例13-10】文件cityoperation.js修改後的代碼示例。
4
●
修改tellerror頁面的wxml和js文件
修改文件tellerror.wxml和tellerror.js。文件tellerror.wxml修改後的代碼如例13-12所示。
【例13-12】文件tellerror.wxml修改後的代碼示例。
3
運行程序
1
●
首頁
編譯程序後模擬器中的輸出結果如圖13-2所示。單擊圖13-2中的「下載城市信息文件」按鈕，控制台中的輸出結果如圖13-3所示。
■圖13-2編譯程序後模擬器中的輸出結果
■圖13-3單擊圖13-2中的「下載城市信息文件」按鈕後控制台中的輸出結果
2
●
顯示頁
單擊圖13-2中的「顯示城市信息」按鈕，跳轉到顯示頁(與頁面listcities對應)，模擬器中的輸出結果如圖13-4所示。
■圖13-4單擊圖13-2中「顯示城市信息」按鈕後模擬器中的輸出結果
3
●
添加頁
單擊圖13-4中的「添加城市」按鈕，跳轉到添加頁(與頁面cityoperation對應)，模擬器中的輸出結果如圖13-5所示。在圖13-5中，輸入有效城市信息，如圖13-6所示，單擊「提交」按鈕後，成功增加了一條城市信息。
■圖13-5單擊圖13-4中「添加城市」按鈕後
■圖13-6輸入有效城市信息界面
4
●
錯誤提示頁
在圖13-5中，輸入無效城市信息(輸入城市id與已有的城市id衝突)，如圖13-7所示，單擊「提交」按鈕，跳轉到錯誤提示頁(和頁面tellerror對應)，如圖13-8所示。
■圖13-7輸入無效城市信息界面(輸入城市id與已有的城市id衝突)
■圖13-8錯誤提示頁結果
5
●
操作相關頁
在圖13-4中，單擊第4條記錄(無錫)後的「編輯」超鏈接，結果如圖13-9所示。單擊「刪除」超鏈接，結果如圖13-10所示。單擊「確定」按鈕，成功刪除一條記錄。
■圖13-9單擊圖13-4中第4條記錄後的「編輯」超鏈接後模擬器中的輸出結果
■圖13-10單擊圖13-4中第4條記錄後的「刪除」超鏈接後模擬器中的輸出結果
掃碼觀看視頻講解，限免三天
項目實戰
微信小程序雲開發
Spring Boot+Node.js
精彩回顧
綜合案例：微信小程序與Spring Boot整合開發（限免視頻）
綜合案例2：微信小程序雲開發
下期預告
案例：微信小程序與Spring Boot整合開發
案例：插件的微信小程序雲開發
4
參考書籍
《微信小程序雲開發——Spring Boot+Node.js項目實戰》
ISBN：9787302550792
作者：吳勝
定價：59.9元
閱讀本書後，你將
通過實例，掌握微信小程序開發、雲開發控制台的應用、雲開發中小程序端數據庫開發、存儲開發，雲開發中雲函數開發，雲開發中服務端存儲開發、數據庫開發、SpringBoot訪問雲開發API、Node.js訪問雲開發API、小程序與Spring Boot整合開發及雲開發對比等內容。
本書有什麼不同？
零基礎知識點精講，以學習難度由小到大和開發步驟來組織章節內容
簡單易懂
適合用於教學，提供教學課件、源代碼、教案、教學大綱、教學進度表、習題、試卷及答案
有輔助視頻，配有240分鐘實戰開發視頻講解
前後端分離與雲開發對比：Spring Boot + 微信小程序/微信小程序雲開發
其他特色
本書採用以基礎知識點精講與實戰開發案例相結合的方式，逐步地帶讀者實現微信小程序雲開發從入門到實戰。
實戰開發案例豐富，涵蓋53個知識點案例和4個完整項目案例。
代碼詳盡,規避了重複的代碼。
各個章節前後連貫,操作步驟容易掌握與實現。
5
精彩推薦
留言列表