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

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

建立小程序和代碼結構

目錄結構

• 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中的每個Tab

     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. 文件上傳流程圖：
2. 文件下載流程圖：

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. 設計原理：
   • 高內聚：組件設計上，能歸爲一個單元的代碼封裝到一塊兒，儘可能保證一個段的代碼，實現的是一個需求
   • 低耦合：組件和組件之間，儘可能減小關聯，減小耦合性
   • 單一職責
   • 避免過多參數