微信小程式入門筆記-使用雲開發(4)

来源:https://www.cnblogs.com/hhmm99/archive/2020/02/16/12316872.html
-Advertisement-
Play Games

1、雲資料庫 一、介紹 雲開發提供了一個 JSON 資料庫,顧名思義,資料庫中的每條記錄都是一個 JSON 格式的對象。一個資料庫可以有多個集合(相當於關係型數據中的表),集合可看做一個 JSON 數組,數組中的每個對象就是一條記錄,記錄的格式是 JSON 對象。 關係型資料庫和 JSON 資料庫的 ...


1、雲資料庫

一、介紹

雲開發提供了一個 JSON 資料庫,顧名思義,資料庫中的每條記錄都是一個 JSON 格式的對象。一個資料庫可以有多個集合(相當於關係型數據中的表),集合可看做一個 JSON 數組,數組中的每個對象就是一條記錄,記錄的格式是 JSON 對象。

關係型資料庫和 JSON 資料庫的概念對應關係如下表:

關係型文檔型
資料庫 database 資料庫 database
表 table 集合 collection
行 row 記錄 record / doc
列 column 欄位 field

雲開發資料庫提供以下幾種數據類型:

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

 二、使用

(1、使用之前把頁面創建好(我創建了home和personal):

 

(2、配置app.json

 

在“雲開發”中點擊資料庫,創建user、image兩個集合

personal.js

  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

2、雲函數

 一、介紹

雲函數即在雲端(伺服器端)運行的函數。在物理設計上,一個雲函數可由多個文件組成,占用一定量的 CPU 記憶體等計算資源;各雲函數完全獨立;可分別部署在不同的地區。開發者無需購買、搭建伺服器,只需編寫函數代碼並部署到雲端即可在小程式端調用,同時雲函數之間也可互相調用。

一個雲函數的寫法與一個在本地定義的 JavaScript 方法無異,代碼運行在雲端 Node.js 中。當雲函數被小程式端調用時,定義的代碼會被放在 Node.js 運行環境中執行。我們可以如在 Node.js 環境中使用 JavaScript 一樣在雲函數中進行網路請求等操作,而且我們還可以通過雲函數後端 SDK 搭配使用多種服務,比如使用雲函數 SDK 中提供的資料庫和存儲 API 進行資料庫和存儲的操作,這部分可參考資料庫存儲後端 API 文檔。

雲開發的雲函數的獨特優勢在於與微信登錄鑒權的無縫整合。當小程式端調用雲函數時,雲函數的傳入參數中會被註入小程式端用戶的 openid,開發者無需校驗 openid 的正確性因為微信已經完成了這部分鑒權,開發者可以直接使用該 openid。

二、使用

(1、安裝nodejs環境

(2、創建雲函數(我這裡創建了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)
  }
}

login:

// 雲函數模板
// 部署:在 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

 

 3、雲存儲

一、介紹

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

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

二、使用

(1、文件上傳流程:

 

 (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 () {

  }
})
View Code

 

 

 

 

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 很多人都有寫博客的習慣,奈何國內的博客網站正在一家家地關閉與重整,部分博客網站也充斥著太多的廣告,使用體驗非常不好。對於愛寫博客的朋友來說,其實還有一個更好的選擇,那就是自己搭建一個博客。 ...
  • 前言 年過30惶惶不安,又逢疫情,還是不斷學習,強化自己的能力。hadoop的視頻和書籍在15年的時候就看過,但是一直沒動手實踐過,要知道技術不經過實戰,一點提升也沒有。因此下定決心邊學邊做,希望能有所收穫。 軟體版本介紹 virtualbox 6.1 centos7 hadoop 3.2.1 jd ...
  • 1 查詢指定欄位 在 employee 表找出所有員工的姓名、性別和電子郵箱。 SELECT 表示查詢,隨後列出需要返回的欄位,欄位間逗號分隔 FROM 表示要從哪個表中進行查詢 分號為語句結束符 這種查詢表中指定欄位的操作在關係運算中被稱為投影(Projection) 使用 SELECT 子句進行 ...
  • 1、概述 (1)鎖的定義 鎖是電腦協調多個進程或線程併發訪問某一資源的機制。 在資料庫中,除了傳統的計算資源(如CPU、RAM、IO等)的爭用以外,數據也是一種供需要用戶共用的資源。如何保證數據併發訪問的一致性、有效性是所有資料庫必須解決的一個問題,鎖衝突也是影響資料庫併發訪問性能的一個重要因素。 ...
  • 該文為《 MySQL 實戰 45 講》的學習筆記,感謝查看,如有錯誤,歡迎指正 一、查詢和更新上的區別 這兩類索引在查詢能力上是沒差別的,主要考慮的是對更新性能的影響。建議儘量選擇普通索引。 1.1 MySQL 的查詢操作 普通索引 查找到第一個滿足條件的記錄後,繼續向後遍歷,直到第一個不滿足條件的 ...
  • 隱式類型轉換簡介 通常ORACLE資料庫存在顯式類型轉換(Explicit Datatype Conversion)和隱式類型轉換(Implicit Datatype Conversion)兩種類型轉換方式。如果進行比較或運算的兩個值的數據類型不同時(源數據的類型與目標數據的類型),而且此時又沒有轉... ...
  • 前幾篇文章,我也是費勁心思寫了一個ListView系列的三部曲,雖然在內容上可以說是絕對的精華,但是很多朋友都表示看不懂。好吧,這個系列不僅是把大家給難倒了,也確實是把我給難倒了,之前為了寫瀑布流ListView的Demo就寫了大半個月的時間。那麼本篇文章我們就講點輕鬆的東西,不去分析那麼複雜的源碼 ...
  • 本文針對常用控制項(Textview、Button、EditText、RadioButton、CheckBox、ImageView)進行簡單說明 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...