微信小程序入門筆記-使用雲開發（4）

時間 2020-02-18

標籤微信程序入門筆記使用開發简体版

原文原文鏈接

一、雲數據庫

1、介紹

雲開發提供了一個 JSON 數據庫，顧名思義，數據庫中的每條記錄都是一個 JSON 格式的對象。一個數據庫能夠有多個集合（至關於關係型數據中的表），集合可看作一個 JSON 數組，數組中的每一個對象就是一條記錄，記錄的格式是 JSON 對象。html

關係型數據庫和 JSON 數據庫的概念對應關係以下表：node

關係型	文檔型
數據庫 database	數據庫 database
表 table	集合 collection
行 row	記錄 record / doc
列 column	字段 field

雲開發數據庫提供如下幾種數據類型：數據庫

String：字符串
Number：數字
Object：對象
Array：數組
Bool：布爾值
Date：時間
Geo：多種地理位置類型，詳見
Null

2、使用

（一、使用以前把頁面建立好（我建立了home和personal）：json

（二、配置app.json小程序

在「雲開發」中點擊數據庫，建立user、image兩個集合後端

personal.jsapi

  1 /**
  2  * 初始化數據庫
  3  * 用evn屬性能夠切換屬性
  4  * database({evn:test})
  5  */
  6 const db = wx.cloud.database();
  7 const user = db.collection("user");
  8 // pages/personal/personal.js
  9 Page({
 10   /**
 11    * 頁面的初始數據
 12    */
 13   data: {
 14     images: []
 15   },
 16   /**
 17    * 插入數據
 18    */
 19   insert: function(){
 20     user.add({
 21       data: {
 22         name: 'hh',
 23         age: 20
 24       }
 25     }).then(res=>{
 26       // 回調函數
 27       console.log(res)
 28       wx.showToast({
 29         title: 'success',
 30       })
 31     }).catch(err=>{
 32       //抓取錯誤
 33       console.log(err)
 34     })
 35   },
 36   update: function(){
 37     // 根據雲數據庫 _id更新
 38     user.doc('1acf1de95e48f2f310877a982d2de27f').update({
 39       data: {
 40         age: 19,
 41         name: 'mm'
 42       }
 43     }).then(res => {
 44       console.log(res)
 45       console.log('success')
 46     }).catch(err => {
 47       console.log(err)
 48     })
 49   },
 50   select: function () {
 51     user.where({
 52       name: 'hh'
 53     }).get().then(res => {
 54       console.log(res)
 55       console.log('success')
 56     }).catch(err => {
 57       console.log(err)
 58     })
 59   },
 60   del: function(){
 61     user.doc('1acf1de95e48f2f310877a982d2de27f').remove()
 62     .then(res => {
 63       console.log(res)
 64       console.log('success')
 65     }).catch(err => {
 66       console.log(err)
 67     })
 68   },
 69   /**
 70    * 生命週期函數--監聽頁面加載
 71    */
 72   onLoad: function (options) {
 73 
 74   },
 75 
 76   /**
 77    * 生命週期函數--監聽頁面初次渲染完成
 78    */
 79   onReady: function () {
 80 
 81   },
 82 
 83   /**
 84    * 生命週期函數--監聽頁面顯示
 85    */
 86   onShow: function () {
 87 
 88   },
 89 
 90   /**
 91    * 生命週期函數--監聽頁面隱藏
 92    */
 93   onHide: function () {
 94 
 95   },
 96 
 97   /**
 98    * 生命週期函數--監聽頁面卸載
 99    */
100   onUnload: function () {
101 
102   },
103 
104   /**
105    * 頁面相關事件處理函數--監聽用戶下拉動做
106    */
107   onPullDownRefresh: function () {
108 
109   },
110 
111   /**
112    * 頁面上拉觸底事件的處理函數
113    */
114   onReachBottom: function () {
115 
116   },
117 
118   /**
119    * 用戶點擊右上角分享
120    */
121   onShareAppMessage: function () {
122 
123   }
124 })

View Code

personal.wxml數組

1 <view>雲數據庫</view>
2 <button bindtap="insert">插入數據</button>
3 <button bindtap="update">更新數據</button>
4 <button bindtap="select">查詢數據</button>
5 <button bindtap="del">刪除數據</button>

View Code

二、雲函數

1、介紹

雲函數即在雲端（服務器端）運行的函數。在物理設計上，一個雲函數可由多個文件組成，佔用必定量的 CPU 內存等計算資源；各雲函數徹底獨立；可分別部署在不一樣的地區。開發者無需購買、搭建服務器，只需編寫函數代碼並部署到雲端便可在小程序端調用，同時雲函數之間也可互相調用。安全

一個雲函數的寫法與一個在本地定義的 JavaScript 方法無異，代碼運行在雲端 Node.js 中。當雲函數被小程序端調用時，定義的代碼會被放在 Node.js 運行環境中執行。咱們能夠如在 Node.js 環境中使用 JavaScript 同樣在雲函數中進行網絡請求等操做，並且咱們還能夠經過雲函數後端 SDK 搭配使用多種服務，好比使用雲函數 SDK 中提供的數據庫和存儲 API 進行數據庫和存儲的操做，這部分可參考數據庫和存儲後端 API 文檔。服務器

雲開發的雲函數的獨特優點在於與微信登陸鑑權的無縫整合。當小程序端調用雲函數時，雲函數的傳入參數中會被注入小程序端用戶的 openid，開發者無需校驗 openid 的正確性由於微信已經完成了這部分鑑權，開發者能夠直接使用該 openid。

2、使用

（一、安裝nodejs環境

（二、建立雲函數（我這裏建立了3個雲函數）

修改各個雲函數的index.js

batchDelete:

// 雲函數入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database();
// 雲函數入口函數
exports.main = async (event, context) => {
  try{
    return await db.collection('user').where({
      name: 'hh'
    }).remove();
  }catch(e){
    console.error(e)
  }
}

// 雲函數模板
// 部署：在 cloud-functions/login 文件夾右擊選擇 「上傳並部署」

const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init({
  // API 調用都保持和雲函數當前所在環境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

/**
 * 這個示例將經自動鑑權過的小程序用戶 openid 返回給小程序端
 * 
 * event 參數包含小程序端調用傳入的 data
 * 
 */
exports.main = (event, context) => {
  // 可執行其餘自定義邏輯
  // console.log 的內容能夠在雲開發雲函數調用日誌查看

  // 獲取 WX Context (微信調用上下文)，包括 OPENID、APPID、及 UNIONID（需知足 UNIONID 獲取條件）等信息
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
    env: wxContext.ENV,
  }
}

sum:

// const cloud = require('wx-server-sdk')

// cloud.init()

// 雲函數入口函數
exports.main = async (event, context) => {
  return {
    sum: event.a + event.b
  }
}

而後把寫完的函數都要上傳雲端（記住修改過雲函數必定要同步到雲端）

頁面代碼：

personal.js

/**
 * 初始化數據庫
 * 用evn屬性能夠切換屬性
 * database({evn:test})
 */
const db = wx.cloud.database();
const user = db.collection("user");
// pages/personal/personal.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    images: []
  },
  /**
   * 插入數據
   */
  insert: function(){
    user.add({
      data: {
        name: 'hh',
        age: 20
      }
    }).then(res=>{
      // 回調函數
      console.log(res)
      wx.showToast({
        title: 'success',
      })
    }).catch(err=>{
      //抓取錯誤
      console.log(err)
    })
  },
  update: function(){
    // 根據雲數據庫 _id更新
    user.doc('1acf1de95e48f2f310877a982d2de27f').update({
      data: {
        age: 19,
        name: 'mm'
      }
    }).then(res => {
      console.log(res)
      console.log('success')
    }).catch(err => {
      console.log(err)
    })
  },
  select: function () {
    user.where({
      name: 'hh'
    }).get().then(res => {
      console.log(res)
      console.log('success')
    }).catch(err => {
      console.log(err)
    })
  },
  del: function(){
    user.doc('1acf1de95e48f2f310877a982d2de27f').remove()
    .then(res => {
      console.log(res)
      console.log('success')
    }).catch(err => {
      console.log(err)
    })
  },
  sum: function () {
    wx.cloud.callFunction({
      name: 'sum',//雲函數名
      data: {
        a: 2,
        b: 3
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    });
  },
  getOpenId: function () {
    wx.cloud.callFunction({
      name: 'login'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    });
  },
  batchDel: function () {
    wx.cloud.callFunction({
      name: 'batchDelete'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.error(err)
    });
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

View Code

personal.wxml

<view>雲數據庫</view>
<button bindtap="insert">插入數據</button>
<button bindtap="update">更新數據</button>
<button bindtap="select">查詢數據</button>
<button bindtap="del">刪除數據</button>
<view>雲函數</view>
<button bindtap="sum">調用雲函數sum</button>
<button bindtap="getOpenId">獲取getOpenId</button>
<button bindtap="batchDel">批量刪除</button>

View Code

三、雲存儲

1、介紹

雲存儲提供高可用、高穩定、強安全的雲端存儲服務，支持任意數量和形式的非結構化數據存儲，如視頻和圖片，並在控制檯進行可視化管理。雲存儲包含如下功能：

存儲管理：支持文件夾，方便文件歸類。支持文件的上傳、刪除、移動、下載、搜索等，並能夠查看文件的詳情信息
權限設置：能夠靈活設置哪些用戶是否能夠讀寫該文件夾中的文件，以保證業務的數據安全
上傳管理：在這裏能夠查看文件上傳歷史、進度及狀態
文件搜索：支持文件前綴名稱及子目錄文件的搜索
組件支持：支持在 image、audio 等組件中傳入雲文件 ID

2、使用

（一、文件上傳流程：

（二、代碼：

personal.wxml

<view>雲數據庫</view>
<button bindtap="insert">插入數據</button>
<button bindtap="update">更新數據</button>
<button bindtap="select">查詢數據</button>
<button bindtap="del">刪除數據</button>
<view>雲函數</view>
<button bindtap="sum">調用雲函數sum</button>
<button bindtap="getOpenId">獲取getOpenId</button>
<button bindtap="batchDel">批量刪除</button>
<view>雲存儲</view>
<button bindtap="uploadImg">上傳圖片</button>
<button bindtap="getImg">獲取圖片</button>
<block wx:for='{{images}}' wx:key='index'>
<image src="{{item.fileId}}"></image>
<button data-fileId="{{item.fileId}}" bindtap="downloadFile">文件下載</button>
</block>

View Code

personal.js

/**
 * 初始化數據庫
 * 用evn屬性能夠切換屬性
 * database({evn:test})
 */
const db = wx.cloud.database();
const user = db.collection("user");
const cloudImage = db.collection("image");
// pages/personal/personal.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    images: []
  },
  /**
   * 插入數據
   */
  insert: function () {
    user.add({
      data: {
        name: 'hh',
        age: 20
      }
    }).then(res => {
      // 回調函數
      console.log(res)
      wx.showToast({
        title: 'success',
      })
    }).catch(err => {
      //抓取錯誤
      console.log(err)
    })
  },
  update: function () {
    user.doc('74b140b45e4513af0f0aab605928da00').update({
      data: {
        age: 19,
        name: 'mm'
      }
    }).then(res => {
      console.log(res)
      console.log('success')
    }).catch(err => {
      console.log(err)
    })
  },
  del: function () {
    user.doc('0ec685215e45122d0f0ad2e55bb2ee69').remove()
      .then(res => {
        console.log(res)
        console.log('success')
      }).catch(err => {
        console.log(err)
      })
  },
  select: function () {
    user.where({
      name: 'hh'
    }).get().then(res => {
      console.log(res)
      console.log('success')
    }).catch(err => {
      console.log(err)
    })
  },
  sum: function () {
    wx.cloud.callFunction({
      name: 'sum',//雲函數名
      data: {
        a: 2,
        b: 3
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    });
  },
  getOpenId: function () {
    wx.cloud.callFunction({
      name: 'login'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    });
  },
  batchDel: function () {
    wx.cloud.callFunction({
      name: 'batchDelete'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.error(err)
    });
  },
  //上傳圖片
  uploadImg: function () {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath能夠做爲img標籤的src屬性顯示圖片
        const tempFilePaths = res.tempFilePaths;
        wx.cloud.uploadFile({
          cloudPath: new Date().getTime() + '.png', // 爲了確保不重名
          filePath: tempFilePaths[0], // 文件路徑，由於tempFilePaths是一個數組
          success: res => {
            // get resource ID
            console.log(res.fileID)
            //存儲數據到雲數據庫
            cloudImage.add({
              data: {
                fileId: res.fileID
              }
            }).then(res => {
              console.log(res)
            }).catch(err => {
              console.error(err)
            })
          },
          fail: err => {
            // handle error
          }
        })
      }
    })
  },
  // 獲取圖片
  getImg: function () {
    wx.cloud.callFunction({
      name: 'login'
    }).then(res => {
      // 查詢
      cloudImage.where({ _openid: res.result.openid })
        .get().then(res => {
          this.setData({
            images: res.data
          })
        })
    }).catch(err => {
      console.log(err)
    });
  },
  // 文件下載
  downloadFile: function (event) {
    /** event.target.dataset.fileid在wxml遍歷數據時候設置的
     * data-fileId="{{item.fileId}}"
    */
    console.log(event.target.dataset.fileid)
    wx.cloud.downloadFile({
      fileID: event.target.dataset.fileid,
      success: res => {
        // get temp file path
        console.log(res.tempFilePath)
        //res.tempFilePath是響應回來的零食路徑
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            console.log(res)
            wx.showToast({
              title: '保存成功！',
            })
          },
          fail(err) {
            // 保存未受權
            console.error(err)
            if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
              // 這邊微信作過調整，必需要在按鈕中觸發，所以須要在彈框回調中進行調用
              wx.showModal({
                title: '提示',
                content: '須要您受權保存相冊',
                showCancel: false,
                success: modalSuccess => {
                  wx.openSetting({
                    success(settingdata) {
                      console.log("settingdata", settingdata)
                      if (settingdata.authSetting['scope.writePhotosAlbum']) {
                        wx.showModal({
                          title: '提示',
                          content: '獲取權限成功,再次點擊圖片便可保存',
                          showCancel: false,
                        })
                      } else {
                        wx.showModal({
                          title: '提示',
                          content: '獲取權限失敗，將沒法保存到相冊哦~',
                          showCancel: false,
                        })
                      }
                    },
                    fail(failData) {
                      console.log("failData", failData)
                    },
                    complete(finishData) {
                      console.log("finishData", finishData)
                    }
                  })
                }
              })
            }
          }
        })
      },
      fail: err => {
        // handle error
      }
    })
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})