小程序雲開發是什麼？怎麼用！

時間  2019-11-09
標籤 程序 開發 什麼 怎麼 简体版
原文   原文鏈接

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

建立小程序和代碼結構

目錄結構

  • 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. 設計原理：
    • 高內聚：組件設計上，能歸爲一個單元的代碼封裝到一塊兒，儘可能保證一個段的代碼，實現的是一個需求
    • 低耦合：組件和組件之間，儘可能減小關聯，減小耦合性
    • 單一職責
    • 避免過多參數
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程