在此只做雲開發簡單使用的總結，深入使用，請參考官方文檔
創建小程序和代碼結構
目錄結構
- AppID在微信公眾平台，在左邊的開發中開發設置里有
-
小程序雲開發基本結構： 1.cloudfunctions：指定騰訊雲項目的目錄 2.miniprogarm：小程序端的代碼 3.project.config.json：對小程序項目的配置
配置JSON文件
- project.config.json 對一個項目的整體配置
- app.json:項目的全局配置
- pages項：對應的是一個數組，小程序有幾個界面就配置幾個
- window項：對TopBar窗口的配置
- tabBar項:底部通欄，一般需要自己添加，與window是同級，tabBar中list數組中的每一個對象代表tabBar中的每一個Tab
WXML
- 與html類似，但是WXML中定義了一些自己的組件
WXSS
- 新定義像素單位rpx，規定不管屏幕大小,都為750rpx。使用rpx，能夠實現手機端自適應布局
- 在WXSS中如何引用公共樣式：@import '相對路徑'
- 第三方樣式庫推薦： WeUI ，iView ，Vant （后兩者包含了pc端的組件）
JS
- 給data中的值賦值的時候，必須用this.setData({ count : this.data.count +1 })
- 微信小程序里的點擊事件由bind ， catch來綁定，bindtap(點擊事件)， bind允許事件冒泡，catch不允許事件冒泡
雲小程序
- 前端(組件化開發)⇔后端（雲開發）⇔后台管理系統（訪問小程序雲資源）
- 傳統小程序：
- 有前端和后端兩部分：需要兩個工程師不斷溝通，確認接口等
- 上線部署需要考慮：服務器，域名，備案（后端）網絡防護，負載均衡，監控警告（運維）
- 雲小程序：
- 不需要搭建服務器，只需要小程序調用原生的接口，就可以實現雲數據庫，雲函數，雲存儲的操作，釋放開發者的手腳，專注的業務需求的開發
2019熱詞：serverless
- serverless⇔無服務開發⇔小程序的雲開發
- 函數即服務，后端服務，只是一個函數
- 通常，我們前端時需要通過HTTP協議向后端發送一個數據請求，在請求回數據，但是serverless提出的函數即服務的概念，在前端中直接使用函數即可，而函數即使代碼的一部分，不需要去關心是什么ip地址了
- serverless模式不代表沒有服務器，只是把服務器部署在雲上了，開發者不用直接的感知服務器的存在
雲開發提供的五大基礎能力
- 雲函數 :獲取appid,獲取openid，生成分享圖，調用騰訊雲SDK
- 雲調用
- 雲數據庫 :數據增加，數據刪除，數據修改，數據查詢
- HTTP API
- 雲存儲 ：管理文件，上傳文件，下載文件 ，分享文件
雲數據庫
-
- 雲開發提供了一個JSON數據庫，提供2GB免費存儲空間 - 操作雲數據庫 + 小程序控制(讀寫數據庫受權限控制限制) + 雲函數控制(擁有所有讀寫數據庫的權限) + 控制台控制(擁有所有讀寫數據庫的權限) - 數據庫初始化: + 初始化：const db = wx.cloud.database() + 切換環境： const testDB = wx.cloud.database({ env:'test' }) - 插入數據： + 先在雲數據庫中創建一個user集合 + 在小程序中插入： db.collection('user').add({ data:{ name：'jerry', age:18 }, success:res=>{ //插入成功后的回調函數 console.log(res); }, fail:err=>{ //插入失敗后 console.log(err); } }) //這是原生寫法，在實際開發中推薦使用Promise來寫 - 數據更新： 根據每條數據的唯一標識（id）來更改 db.collection('user').doc('數據id值').updata({ data:{ age:21 } }) - 數據查找： db.collection('user').where({ name:'jerry' }).get().then(res=>{}).catch(err=>{}) - 數據刪除： db.collection('user').doc('數據id值').remove().then(res=>{}) 在小程序當中，是不能批量刪除數據的，必須在雲函數中來實現
雲函數
-
一段運行再雲端的代碼，相當於服務端的后台代碼，通過一鍵的上傳部署，就可以運行這些代碼 小程序的雲函數運行環境是node.js 如何新建雲函數： 右擊cloudfunction，創建node.js雲函數 每次修改雲函數，都需要重新上傳並部署 如果運行的時候，報錯wx-server-sdk，代表我們需要安裝sdk： 在終端打開cloudfunction，運行npm install --save wx-serve-sdk@latest 雲函數(求和案例)： //入口 exports.main = async (event,context)=>{ return { //event參數包含小程序端調用傳入的data sum: event.a + event.b } } 在小程序端調用雲函數： wx.cloud.callFunction({ //調用一個叫sum的雲函數 name:'sum', data:{ a:2, b:3 } }).then(res=>{ console.log(res) }).catch(err=>{ }) 獲取用戶的openid wx.cloud.callFunction({ name:'login' }).then(res=>{ console.log(res) }).catch(err=>{ }) 在雲函數中操作雲數據庫： //先獲取數據庫對象 const db = cloud.database() //然后再雲函數的入口中調用數據庫對象進行操作 exports.main=async(event,context)=>{ db.collection('user').where({ name:'jerry' }).remove(); }
雲存儲
- 文件上傳流程圖：
- 文件下載流程圖：
-
1. 定義一個按鈕，點擊，讓用戶選擇圖片 2. 在小程序點擊事件中，完成選擇圖片，上傳文件的API的使用 upload:function(){ //選擇圖片功能 wx.chooseImage({ count: 1,//上傳一張圖片，最多九張 sizeType: ['original', 'compressed'], //圖片選擇原圖還是壓縮后的 sourceType: ['album', 'camera'],//調用相冊還是相機 //選擇成功后的回調函數 success (res) { // tempFilePath可以作為img標簽的src屬性顯示圖片 const tempFilePaths = res.tempFilePaths //調用上傳圖片API wx.cloud.uploadFile({ //為了防止圖片名稱一樣，圖片被覆蓋，所以用時間戳來代替 cloudPath:new Date().getTime()+'.png', //上傳至雲端的路徑 filePath：tempFilePaths[0] //小程序臨時文件路徑 success：res>{ //返回文件的id console.log(res.fileID) //在此回調函數中，在講上傳圖片的fileID傳入到數據庫中 db.collection('img').add({ data:{ fileID:res.fileID } }).then().catch(2 ) } fail:console.error }) } }) } 3.將上傳的圖片展示出來 通過雲存儲中的數據，去查到當前用戶的所管理的圖片 因為不可能去看到別的用戶上傳的圖片 首先應該獲取當前用戶的信息（知道當前用戶的openid是什么） wx.cloud.callFunction({ name:'login', }).then(res=>{ //根據login返回值中的openid來查詢當前用戶上傳的圖片 db.collection('image').where({ _openid:res.result.openid }).get().then(res2=>{ console.log(res2) //在data中定義一個images數組用來接收上傳的圖片路勁 this.setData({ //images圖片對象數組，每個對象中的fileID就是圖片的路徑 //在小程序中只要用img中src="{{item.fileID}}"就可以將圖片展示出來 images:res2.data }) }) }); 4. 文件下載 需要調用小程序雲存儲的API接口 在下載按鈕的點擊事件中使用API wx.cloud.downloadFile({ //通過事件對象，獲取之前在button按鈕中自定義的fileid數據 fileID: event.target.dataset.fileid //文件id }).then(res => { //根據圖片路徑，將圖片保存至相冊 wx.saveImageToPhotosAlbum({ filePath:res.tempFilePatg success(res) { //成功后調用showTost，顯示下載成功 wx.showToast({ title:'保存成功', }) } }) }).catch(error => { // handle error })
小程序中的組件化開發
- 組件：在用戶界面開發領域，組件是一種面向用戶，獨立的,可復用的交互元素的封裝
- 組件化開發的意義：
- 並不是代碼的復用就用組件，即使某一個組件只要一次，只要他的功能比較獨立，就可以使用組件來開發這個功能
- 組件化是對資源的重組和優化，從而使項目資源管理更合理
- 組件化有利於單元測試
- 組件化對重構比較友好
- 設計原理：
- 高內聚：組件設計上，能歸為一個單元的代碼封裝到一起，盡量保證一個段的代碼，實現的是一個需求
- 低耦合：組件和組件之間，盡量減少關聯，減少耦合性
- 單一職責
- 避免過多參數