小程序雲開發是什麼?怎麼用!

在此只作雲開發簡單使用的總結,深刻使用,請參考官方文檔

建立小程序和代碼結構

目錄結構

  • AppID在微信公衆平臺,在左邊的開發中開發設置裏有
  • 小程序雲開發基本結構:
      1.cloudfunctions:指定騰訊雲項目的目錄
      2.miniprogarm:小程序端的代碼
      3.project.config.json:對小程序項目的配置

    配置JSON文件

  1. project.config.json 對一個項目的總體配置
  2. app.json:項目的全局配置
    • pages項:對應的是一個數組,小程序有幾個界面就配置幾個
    • window項:對TopBar窗口的配置
    • tabBar項:底部通欄,通常須要本身添加,與window是同級,tabBar中list數組中的每個對象表明tabBar中的每個Tabhtml

      WXML

  3. 與html相似,可是WXML中定義了一些本身的組件

WXSS

  1. 新定義像素單位rpx,規定無論屏幕大小,都爲750rpx。使用rpx,可以實現手機端自適應佈局
  2. 在WXSS中如何引用公共樣式:@import '相對路徑'
  3. 第三方樣式庫推薦: WeUI ,iView ,Vant (後二者包含了pc端的組件)

JS

  1. 給data中的值賦值的時候,必須用this.setData({ count : this.data.count +1 })
  2. 微信小程序裏的點擊事件由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. 文件上傳流程圖:TIM圖片20191109145258.png
  2. 文件下載流程圖:TIM圖片20191109145258.png
  3. 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
         })

小程序中的組件化開發

  1. 組件:在用戶界面開發領域,組件是一種面向用戶,獨立的,可複用的交互元素的封裝
  2. 組件化開發的意義:
    • 並非代碼的複用就用組件,即便某一個組件只要一次,只要他的功能比較獨立,就可使用組件來開發這個功能
    • 組件化是對資源的重組和優化,從而使項目資源管理更合理
    • 組件化有利於單元測試
    • 組件化對重構比較友好
  3. 設計原理:
    • 高內聚:組件設計上,能歸爲一個單元的代碼封裝到一塊兒,儘可能保證一個段的代碼,實現的是一個需求
    • 低耦合:組件和組件之間,儘可能減小關聯,減小耦合性
    • 單一職責
    • 避免過多參數
相關文章
相關標籤/搜索