微信小程式雲開發 -- 一個人註冊到上線

幾米陽光發表於2020-01-13

序言

  • 已經有好幾個大廠有自家的小程式,本文說的小程式預設指的微信小程式。
  • 我個人元旦前後業餘時間,通過雲開發上線了一個小程式,跟大家分享一下小程式雲開發。
  • 你可以通過此文,配合 微信官方文件 · 小程式 嘗試你的小程式雲開發之旅。
  • 我這個小程式使用的 基礎庫版本 && wx-server-sdk 版本。
    微信小程式雲開發 -- 一個人註冊到上線
    微信小程式雲開發 -- 一個人註冊到上線

小程式註冊

登入微信公眾平臺,找到 小程式目錄 - 小程式管理 - 新增,相信大家註冊小程式已經遊刃有餘了。 如有遺忘,可前往 官方文件 · 註冊

建立微信小程式

新建雲開發模板

新建專案選擇一個空目錄,填入 AppID(使用雲開發能力必須填寫 AppID),勾選建立 “雲開發 QuickStart 專案”,點選建立即可得到一個展示雲開發基礎能力的示例小程式。

開通雲開發、建立環境

建立了第一個雲開發小程式後,在開發者工具工具欄左側,點選“雲開發”按鈕即可開啟雲控制檯、根據提示開通雲開發、建立雲環境。

檢視控制檯

雲開發控制檯是管理雲開發資源的地方,控制檯提供以下能力:

  • 運營分析:檢視雲開發監控、配額使用量、使用者訪問情況
  • 資料庫:管理資料庫,可檢視、增加、更新、查詢、刪除資料、管理索引、管理資料庫訪問許可權等
  • 儲存管理:檢視和管理儲存空間
  • 雲函式:檢視雲函式列表、配置、日誌

雲開發控制檯
以上詳細介紹可前往 傳送門 檢視

專案目錄

微信小程式雲開發 -- 一個人註冊到上線

建立資料庫

雲開發提供了一個 JSON 資料庫,資料庫中的每條記錄都是一個JSON格式的物件。一個資料庫可以有多個集合(相當於關係型資料中的表),集合可看做一個 JSON 陣列,陣列中的每個物件就是一條記錄,記錄的格式是 JSON 物件

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

我的示例集合(我們平時說的表)資料:

[
    {
      "_id": "xxxxxxx65e0f4b5900349d6127d9c0",
      "buildingId": "xxxxxxxbc5ee75e0f43ef00318efb660fb8",
      "buildingName": "1號樓",
      "roomNumber": "101",
      "status": 1
    },
    {
      "_id": "xxxxxxx5e0f4b5b003611bd23e4d2",
      "buildingId": "xxxxxxxc5ee75e0f43ef00318e6bb60fb8",
      "buildingName": "1號樓",
      "roomNumber": "102",
      "status": 1
    },
    {
      "_id": "xxxxxxx655025e0f4b5e0026d158651eae",
      "buildingId": "xxxxxxx5ee75e0f43ef00318e6bb60fb8",
      "buildingName": "1號樓",
      "roomNumber": "103",
      "status": 1
    }
]
複製程式碼

微信小程式雲開發 -- 一個人註冊到上線

建立雲函式

  • 微信開發者工具 找到clondfunctions 右鍵 新建node.js 雲函式,新建完成。 每一個雲函式都有一個 package.json檔案,我們可以安裝node_module包來本地除錯雲函式(下面再講除錯雲函式)。
    微信小程式雲開發 -- 一個人註冊到上線
  • 也可以開啟 雲開發控制檯 - 雲函式 - 新建雲函式 ,填寫完成後確定提交,建立了第一個雲函式。
    微信小程式雲開發 -- 一個人註冊到上線

雲函式呼叫

在建立的雲函式的index.js檔案裡處理該雲函式的業務邏輯,然後開啟本地除錯/上傳部署該雲函式後,在小程式端測試呼叫。

  • 官方示例:經常,我們需要在雲函式中處理一些非同步操作,在非同步操作完成後再返回結果給到呼叫方。此時我們可以通過在雲函式中返回一個 Promise 的方法來完成。
// index.js
exports.main = async (event, context) => {
  return new Promise((resolve, reject) => {
    // 在 3 秒後返回結果給呼叫方(小程式 / 其他雲函式)
    setTimeout(() => {
      resolve(event.a + event.b)
    }, 3000)
  })
}
複製程式碼

比如雲函式名字為 test,,我們在小程式端測試呼叫:

// 在小程式程式碼中:
wx.cloud.callFunction({
  name: 'test',
  data: {
    a: 1,
    b: 2,
  },
  complete: res => {
    console.log('callFunction test result: ', res)
  },
})
複製程式碼

此時應該看到偵錯程式輸出:

callFunction test result: 3
複製程式碼
  • 我的示例:對樓棟數量的增刪改查操作。
    微信小程式雲開發 -- 一個人註冊到上線
    雲函式入口函式main:
    微信小程式雲開發 -- 一個人註冊到上線
    建立樓棟號的方法:
    1. handleCreate()這個方法裡用promise()包起來是因為需要圖示77行 buildingsCollection.where()的返回結果來做後續處理。
    2. 頭部註釋為小程式端呼叫 operateBuilding 這個雲函式demo。

微信小程式雲開發 -- 一個人註冊到上線

雲函式本地除錯 (傳送門)

雲開發提供了雲函式本地除錯功能,在本地提供了一套與線上一致的 Node.js 雲函式執行環境,讓開發者可以在本地對雲函式除錯,使用本地除錯可以提高開發、除錯效率:

  • 單步除錯/斷點除錯:比起通過雲開發控制檯中檢視線上打的日誌的方法進行除錯,使用本地除錯後可以對雲函式 Node.js ! 例項進行單步除錯/斷點除錯
  • 整合小程式測試:在模擬器中對小程式發起的互動點選等操作如果觸發了開啟了本地除錯的雲函式,會請求到本地例項而不是雲端
  • 優化開發流程、提高開發效率:除錯階段不需上傳部署雲函式,在除錯雲函式時,相對於不使用本地除錯時的除錯流程(“本地修改程式碼 -> 上傳部署雲函式 -> 呼叫")的除錯流程,省去了上傳等待的步驟,改成只需 “本地修改 -> 呼叫” 的流程,大大提高開發除錯效率

本地除錯

雲函式執行環境差異

本地除錯中的雲函式執行環境線上環境有如下區別:

  • 本地除錯中通過 getWXContext 獲取的 env 值為 local,也就是不管小程式端指定訪問哪個環境的雲函式,如果該雲函式開啟了本地除錯,都會被觸發,且其中的 getWXContext().env 始終為 local
  • 本地除錯中不提供臨時儲存空間

儲存

在小程式端可以分別呼叫 wx.cloud.uploadFilewx.cloud.downloadFile 完成上傳和下載雲檔案操作。下面簡單的幾行程式碼,即可實現在小程式內讓使用者選擇一張圖片,然後上傳到雲端管理的功能:

// 讓使用者選擇一張圖片
wx.chooseImage({
  success: chooseResult => {
    // 將圖片上傳至雲端儲存空間
    wx.cloud.uploadFile({
      // 指定上傳到的雲路徑
      cloudPath: 'my-photo.png',
      // 指定要上傳的檔案的小程式臨時檔案路徑
      filePath: chooseResult.tempFilePaths[0],
      // 成功回撥
      success: res => {
        console.log('上傳成功', res)
      },
    })
  },
})
複製程式碼

下載檔案,可以根據檔案 ID 下載檔案,使用者僅可下載其有訪問許可權的檔案:

wx.cloud.downloadFile({
  fileID: '', // 檔案 ID
  success: res => {
    // 返回臨時檔案路徑
    console.log(res.tempFilePath)
  },
  fail: console.error
})
複製程式碼

雲開發控制檯-儲存 提供對檔案進行操作的功能。

微信小程式雲開發 -- 一個人註冊到上線

計費相關 - 配額調整方式

在小程式雲開發控制檯 - 設定 裡,可以選擇適合自己的配額方案,我這裡選擇的免費的基礎版1

微信小程式雲開發 -- 一個人註冊到上線

提交發布上線

小程式雲開發整個 上傳程式碼 - 提交稽核 - 釋出版本 與普通小程式開發一樣。

  • 修改了雲函式後,在clodfunctions目錄下的雲函式資料夾右鍵,選擇上傳並部署:雲端安裝依賴(不上傳node_module)

微信小程式雲開發 -- 一個人註冊到上線

小結:

微信小程式雲開發為開發者提供完整的原生雲端支援和微信服務支援,弱化後端和運維概念,無需搭建伺服器,
使用平臺提供的 API 進行核心業務開發,即可實現快速上線和迭代,
同時這一能力,同開發者已經使用的雲服務相互相容,並不互斥。
複製程式碼
  • 小程式雲開發提供了相當友好的視覺化介面,各類建立檢視操作,一目瞭然。
  • 官方幫開發者打通了資料庫跟服務端,並且對接微信服務。
  • 使用官方提供的API,通過雲函式對資料庫進行CRUD,返回給小程式端進行渲染
  • 很適合個人開發者,想開發一個小程式,無需其他費用(免費的基礎版配額)

相關文章