微信小程式---快速上手雲開發

久宇詩發表於2022-01-18
微信小程式

一、初識雲開發

官方文件

  • 小程式·雲開發是微信團隊聯合騰訊雲推出的專業的小程式開發服務。
  • 開發者可以使用雲開發快速開發小程式、小遊戲、公眾號網頁等，並且原生打通微信開放能力。
  • 開發者無需搭建伺服器，可免鑑權直接使用平臺提供的API進行業務開發
  • 目前雲開發包含：雲資料庫，雲函式，雲端儲存，雲呼叫

優勢

  • 無需搭建伺服器，只需使用平臺提供的各項能力，即可快速開發業務。
  • 無需管理證照、簽名、祕鑰，直接呼叫微信 API 。複用微信私有協議及鏈路，保證業務安全性。
  • 支援環境共享，一個後端環境可開發多個小程式、公眾號、網頁等，便捷複用業務程式碼與資料。
  • 開發者可以使用任意語言和框架進行程式碼開發，構建為容器後，快速將其託管至雲開發。
  • 支援按量計費模式，後端資源根據業務流量自動擴容，先使用後付費，無需支付閒置成本。

能力

  1. 儲存資料與檔案

    • 雲資料庫： 文件型資料庫，穩定可靠；支援在小程式端和雲函式中呼叫。
    • 儲存： 雲端檔案儲存，自帶 CDN 加速，支援在前端直接上傳/下載，可在雲開發控制檯視覺化管理。

  2. 執行後端程式碼

    • 雲函式： 在雲端執行的程式碼，微信私有協議天然鑑權，開發者只需編寫自身業務邏輯程式碼。
    • 雲託管： 支援託管服務容器，不限框架和語言，常駐執行、天然鑑權，可快速進行業務遷移

  3. 擴充套件能力

    • 靜態網站： 快速部署網站，支援自定義域名、網站防刷等配置。
    • 內容管理（CMS）： 一鍵部署，視覺化管理文字、Markdown、圖片等多種內容，使用雲資料庫讀取資料並使用資料。

  4. 打通微信生態

    • 雲呼叫： 雲函式內免鑑權呼叫小程式開放介面，包括服務端呼叫、獲取開放資料等能力。

    • 微信支付： 免鑑權、免簽名計算、免 access_token，在雲函式內原生呼叫微信支付介面。

    • 環境共享： 跨賬號資源和能力複用，可授權雲開發資源給其他小程式/公眾號使用。

比較

內容 雲開發 傳統開發
開發語言 node.js java,php....
難易程度 簡單 複雜
開發週期 1-5周 1-5月
部署難度 基本不用部署(不需要：域名，備案，https) 部署費時費力(需要：域名，備案，https)
適合專案 中小型專案 大型專案
費用 免費版基本夠用 收費很高

二、搭建雲開發環境

下載穩定版本微信開發工具：具體操作可以看之前寫的文章
微信開發基礎
注意：這裡我們建專案不使用雲開發

開通雲開發

  1. 點選下圖箭頭所示,如果你第一步建立專案時,沒有使用自己的appid,這裡不會有下圖箭頭所示的雲朵.

  2. 如果是第一次建立需要給雲開發環境取名

  3. 獲取雲開發環境id

初始化雲開發環境

在app.js裡寫入環境id,注意這裡要用你自己的雲開發環境id

  1. 初始化雲開發環境前，先去雲開發控制檯，拿到雲開發環境id，如下圖

  2. 拿到環境id以後，就去app.js裡做雲開發環境初始化，如下

```
 // 小程式啟動就會執行
onLaunch() {
    // 連線雲開發
    wx.cloud.init({
        env:'雲開發環境id',//雲開發環境id
    })
},
```

注意：用時候雲開發建立好以後,初始化可能需要一點時間,所以如果這裡初始化有報錯,記得關閉開發者工具,等幾分鐘再重新開啟即可.

三、雲開發

一、雲資料

1、在雲資料庫裡新建集合

新建一個goods表
點選 雲開發=》資料庫=》新增====》添寫集合名稱

2、資料庫許可權分配

讓使用者查詢到我們建立的goods資料，需要把許可權改為所有使用者可讀

  • 僅建立者可讀寫：管理員建立了這條資料，普通使用者無法讀寫
  • 所有使用者可讀：不管誰建立的資料，所有人都可以讀

3、資料庫增、刪、改、查操作

3-1查詢 get()

1. 基礎查詢get()

傳統寫法

wx.cloud.database().collection('goods')
.get({
        // 請求成功
        success(res){
            console.log('請求成功',res)
        },
        // 請求失敗
        fail(err){
            console.log('請求失敗',err)
        }
}) //查詢

ES6簡寫

wx.cloud.database().collection('goods')
      .get()
      .then(res=>{
        this.setData({
          list:res.data
        })
      })
      .catch(err=>{})

傳統寫法需要在外部定義一個引數存放this然後才能在回撥函式裡setData，而es6直接可以在查詢結果裡設定資料this.setData推薦使用ES6寫法

2. 條件查詢 where()

在where裡面包裹需要查詢的條件物件，如：where({name:'蘋果'})

 wx.cloud.database().collection('goods')
    .where({name:'蘋果'})//條件查詢
    .get()
    .then(res=>{
        // 請求成功
        console.log('請求成功',res)
    })
3. 查詢單條資料 doc()

主要用於根據id查詢相關資料

  • doc是用來查詢單條資料的。比如商品詳情頁。
  • doc裡面用到的引數就是我們資料裡的_id欄位
 wx.cloud.database().collection('goods')
    .doc(54ad1eea61dd21cd0555df6772d2091c)//條件查詢
    .get()
    .then(res=>{
        // 請求成功
        console.log('請求成功',res)
    })
4. 資料庫排序orderBy()

orderBy方法在做排序的時候，接受兩個引數

  1. 根據那個欄位排序
  2. 排序規則（升序或者降序）。升序用asc，降序用desc
    如我們根據商品價格從低到高升序排列
 wx.cloud.database().collection('goods')
    .orderBy('price',asc)
    .get()
    .then(res=>{
        // 請求成功
        console.log('請求成功',res)
    })
5. 返回指定條數的資料limit()

limit用來指定查詢結果集數量上限。

 wx.cloud.database().collection('goods')
    .limit(3)
    .get()
    .then(res=>{
        // 請求成功
        console.log('請求成功',res)
    })
6. 分頁方法skip()

skip指定查詢返回結果時從指定序列後的結果開始返回，常用於分頁。
比如我們有100條資料，想從第10條開始返回資料，可以通過skip(10)來實現。
查詢第三頁誒也四條

 wx.cloud.database().collection('goods')
    .limit(4)
    .skip(12)
    .get()
    .then(res=>{
        // 請求成功
        console.log('請求成功',res)
    })

比如我們有100條資料，每次返回20條資料。那麼就可以分5頁返回。

  • 第1頁 limit(20).skip(0)
  • 第2頁 limit(20).skip(20)
  • 第3頁 limit(20).skip(40)
  • 第4頁 limit(20).skip(60)
  • 第5頁 limit(20).skip(80)
7. Command資料庫操作符
查詢指令 說明
eq 等於
neq 不等於
lt 小於
lte 小於或等於
gt 大於
gte 大於或等於
in 欄位值在給定陣列中
nin 欄位值不在給定陣列中

舉例：查詢大於30的數

const db = wx.cloud.database().collection('goods')
const _ = db.command
db.collection('todos')
    .where({
        price: _.gt(30)
    })
    .get({
        success: function(res) {
            console.log(res.data)
        }
    })
邏輯指令 說明
and 且
or 或
price: _.eq(0).or(_.eq(100))

3-2新增 add()

通過add可以實現資料的新增
新增是一個物件，物件裡包含需要新增的data資料

 wx.cloud.database().collection('goods')
    .add({
            data:{
                name:'名稱',
                price:'價格'
            }
        })
    .then(res=>{
        // 請求成功
        console.log('請求成功',res)
    })
})

3-3修改update()

修改資料庫裡已存在的資料，根據查詢結果修改相關資料
例如：結合doc進行修改單條資料

 wx.cloud.database().collection('goods')
    .doc(54ad1eea61dd21cd0555df6772d2091c)//條件查詢
    .update({
        data:{
            price:10
        }
    })
    .then(res=>{
        // 請求成功
        console.log('請求成功',res)
    })
})

3-4刪除remove()

刪除資料，結合doc刪除單條資料

 wx.cloud.database().collection('goods')
    .doc(54ad1eea61dd21cd0555df6772d2091c)//條件查詢
    .remove()
    .then(res=>{
        // 請求成功
        console.log('請求成功',res)
    })
})

4、資料的匯入和匯出-------------------

. 資料匯出，做資料備份
. 資料匯入，為了快速的大量的建立一些資料。

二、雲函式

  • 雲函式也是執行在伺服器上的，只不過和我們傳統開發語言相比。
  • 微信官方為我們提供的傻瓜式的一鍵部署。
  • 只需要把心思花在業務邏輯程式碼的編寫上即可。
  • 無需關心寫好如何部署，無需關心安全問題，無需關心鑑權問題。

1、雲函式優點

雲函式屬於管理端，在雲函式中執行的程式碼擁有不受限的資料庫讀寫許可權和雲檔案讀寫許可權。
需特別注意，雲函式執行環境即是管理端，與雲函式中的傳入的 openId 對應的微信使用者是否是小程式的管理員 / 開發者無關。

操作 雲函式 雲資料庫
返回資料上限 100條 20條
更新資料 都可以更新 只有自己建立的才可以更新
刪除資料 都可以刪除 只有自己建立的才可以刪除
執行環境 執行在雲端Node.js環境 執行在小程式本地
實現功能豐富度 非常豐富 只能實現資料庫增刪改查

2、雲函式建立過程

  1. 配置雲函式
  2. 編寫雲函式
  3. 一鍵部署雲函式
  4. 呼叫雲函式

1-配置雲函式

  1. 建立一個資料夾cloud和pages平行

  2. 在project.config.json裡面配置雲函式所在目錄為cloud

    "cloudfunctionRoot":"/cloud"

    然後點選儲存，我們的cloud資料夾前面就有一個雲朵表示配置雲函式檔案成功

  3. 選中cloud檔案===》新建Node.js雲函式（右鍵）

  4. 建立成功後，工具會提示是否立即本地安裝依賴，確定後工具會自動安裝 wx-server-sdk。

2-編寫雲函式

  • event: 指的是觸發雲函式的事件，當小程式端呼叫雲函式時，event 就是小程式端呼叫雲函式時傳入的引數，外加後端自動注入的小程式使用者的 openid 和小程式的 appid。
  • context: 物件包含了此處呼叫的呼叫資訊和執行狀態，可以用它來了解服務執行的情況
    // 雲函式入口檔案
const cloud = require('wx-server-sdk')
cloud.init()
// 雲函式入口函式
exports.main = async (event, context) => {
    return {}
}

注意：可能存在問題

報錯1：Error: errCode: -404011 cloud function execution error Cannot find module 'wx-server-sdk'

npm install --save wx-server-sdk@latest

報錯2：errMsg:Evenironment not fount
出現原因：如果你有兩個雲開發環境，偶爾會出現上所示的問題。
解決問題：有兩種

  1. 在雲函式裡指定你要使用那個雲開發環境
    // 雲函式入口檔案
const cloud = require('wx-server-sdk')
cloud.init({
    env:'雲開發環境id'
})

// 雲函式入口函式
exports.main = async (event, context) => {
    return cloud.database().collection('goods').get()
}
  2. 使用DYNAMIC_CURRENT_ENV常量 （提倡使用這個）
     cloud.init({
    env:cloud.DYNAMIC_CURRENT_ENV
 })
1、雲函式獲取資料

小程式呼叫資料庫只能返回20條資料
雲函式可以返回100條資料

// 雲函式入口函式
exports.main = async (event, context) => {
    return cloud.database().collection('goods').get()
}
2、雲函式修改資料

. 小程式直接呼叫資料庫修改會有問題
只能修改自己建立的資料，別人建立的資料，就沒有辦法修改了。

如何解決呢？
用雲函式來修改就可以解決這個問題啦。

  1. 先建立雲函式updateGoods

    exports.main = async (event, context) => {
    return cloud.database().collection('goods')
    .doc(event.id)
    .update({
        data:{
            price:event.price
        }
    })
}

  2. 呼叫雲函式就行修改

    wx.cloud.callFunction({
    name:'updateGoods ',
    data:{
        id:id,
        price:1
    }
}).then(res=>{})
3、雲函式刪除資料

建立一個刪除商品的雲函式

exports.main = async (event, context) => {
   return cloud.database().collection('goods')
   .doc(event.id)
   .remove()
}

3-一鍵部署雲函式

4-呼叫雲函式

Cloud.callFunction(object: Object): Promise<Object>

呼叫雲函式引數

屬性 型別 必填 說明
name string 是 雲函式名
data Object 否 傳遞給雲函式的引數，在雲函式中可通過 event 引數獲取
config Object 否 配置

一、雲端儲存

  • 儲存就是可以用來儲存視訊，音訊，圖片，檔案的一個雲端儲存空間。
  • 如果你的小程式需要用到視訊播放，音訊播放，圖片展示，檔案上傳與下載功能，就可以用到我們的雲端儲存了。
  • 使用雲端儲存來儲存檔案時，檔名的命名有一些規則，建議看一下。
    • 不能為空
    • 不能以/開頭
    • 不能出現連續/
    • 編碼長度最大為850個位元組
    • 推薦使用大小寫英文字母、數字，即[a-z，A-Z，0-9]和符號 -，!，_，.，* 及其組合
    • 不支援 ASCII 控制字元中的字元上(↑)，字元下(↓)，字元右(→)，字元左(←)，分別對應 CAN(24)，EM(25)，SUB(26)，ESC(27)
    • 如果使用者上傳的檔案或資料夾的名字帶有中文，在訪問和請求這個檔案或資料夾時，中文部分將按照 URL Encode 規則轉化為百分號編碼。
    • 不建議使用的特殊字元: ` ^ " \ { } [ ] ~ % # \ > < 及 ASCII 128-255 十進位制
    • 可能需特殊處理後再使用的特殊字元: ， : ; = & $ @ + ?（空格）及ASCII 字元範圍：00-1F 十六進位制（0-31 十進位制）以及7F（127 十進位制）

1、雲開發控制檯管理檔案

控制檯也可以很方便的管理檔案

2、上傳圖片到雲端儲存

  1. 我們上傳圖片之前需要先選擇圖片，所以這裡用到一個圖片選擇的功能
wx.chooseImage(Object object)

對應的官方文件：

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作為img標籤的src屬性顯示圖片
    const tempFilePaths = res.tempFilePaths
  }
})
  1. 然後呼叫檔案上傳的api介面即可
wx.cloud.uploadFile

將本地資源上傳至雲端儲存空間，如果上傳至同一路徑則是覆蓋寫

wx.cloud.uploadFile({
  cloudPath: 'example.png',
  filePath: '', // 檔案路徑
}).then(res => {
  // get resource ID
  console.log(res.fileID)
})

3、下載檔案

下載
使用wx.cloud.downloadFile下載檔案
下載並開啟word，excel，pdf
使用wx.openDocument開啟檔案

相關文章