小程序雲開發基本結構: 1.cloudfunctions:指定騰訊雲項目的目錄 2.miniprogarm:小程序端的代碼 3.project.config.json:對小程序項目的配置
tabBar項:底部通欄,通常須要本身添加,與window是同級,tabBar中list數組中的每個對象表明tabBar中的每個Tabhtml
不須要搭建服務器,只須要小程序調用原生的接口,就能夠實現雲數據庫,雲函數,雲存儲的操做,釋放開發者的手腳,專一的業務需求的開發前端
- 雲開發提供了一個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 })