微信小程序雲開發功能實踐

前言

前端開發者在進行小程序開發時，總是需要接觸到小程序服務端的開發，如openId的獲取、生成小程序碼、微信支付等。這些功能必須要搭配後端服務進行開發的，這就可能會導致前端開發者不得不去接觸、學習後端的開發語言：如Java、Python、PHP等，產生了額外的學習成本。

小程序的雲開發功能爲前端開發者帶來了福音，雲開發爲開發者提供完整的原生雲端支持和微信服務支持，弱化後端和運維概念，無需搭建服務器，使用平臺提供的API進行核心業務開發，即可實現快速上線和迭代。同時該能力與開發者已使用的雲服務並不互斥。

這裏是重點，圈起來要考！

小程序雲開發基礎能力

小程序的雲開發爲我們提供了：雲函數、數據庫、存儲、雲調用，四大基礎能力。

能力	作用	說明
雲函數	無需自建服務器	在雲端運行代碼，微信私有協議天然鑑權，開發者只需編寫自身業務邏輯代碼
數據庫	無需自建數據庫	一個既可在小程序前端操作，也能在雲函數中讀寫的 JSON 數據庫
存儲	無需自建存儲和 CDN	在小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理
雲調用	原生微信服務集成	基於雲函數免鑑權使用小程序開放接口的能力，包括服務端調用、獲取開放數據等能力

小程序雲開發實踐

一、創建小程序雲開發項目

注意：小程序雲開發項目與普通的小程序項目結構是不一樣的（我們不一樣，不一樣，自行腦補節奏）。

kanshu/ 項目目錄
  - cloudfunctions/ 雲函數目錄
    - saveOpenId/ 任意雲函數
      - index.js
      - package.json
  - miniprogram/ 小程序端
    - pages/ 頁面目錄
      - index/ 首頁
        - index.js
        - index.wxml
        - index.wxss
        - index.json
    - app.js 主入口文件
    - app.json 主配置文件
    - app.wxss 主樣式文件
  - README.md
  - project.config.json

二、操作雲能力

1. 開通雲開發

在微信開發者工具的主面板中，點擊雲開發按鈕，開通雲開發支持。

注意：開通雲開發後，需等待大概10分鐘左右；即時調用有可能出現cloud init error: { errMsg: "invalid scope" }，此時官方後臺正在準備服務。

2. 主入口app.js文件，初始化雲調用

//app.js
App({
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
    } else {
      wx.cloud.init({
        // 此處請填入環境 ID, 環境 ID 可打開雲控制檯查看
        env: 'xxoo',
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

如果要使用雲能力，通常我們在小程序初始化時即調用這個方法。

3. 具體業務：註冊功能-獲取用戶的openid以及用戶基本信息，存儲到雲數據庫中

小程序端：

// miniprogram/pages/index/index.wxml
<button open-type="getUserInfo" type="primary" bindgetuserinfo="onGetUserInfo">註冊</button>

// miniprogram/pages/index/index.js
page({
  data: {
    // 定義數據
  },
  /**
   * onGetUserInfo()
   * @description 獲取用戶登錄信息，存儲到雲數據庫
   * @param {object} e 獲取的用戶信息對象
  */
  onGetUserInfo: function(e) {
    if (e.detail.userInfo) {
      wx.cloud.callFunction({
        name: 'saveUserInfo',
        data: {
          userInfo: e.detail.userInfo
        },
        success: (res) => {
          console.log(res)
          if (res.result && res.result._id) {
            wx.showToast({
              title: '保存成功',
            })
          }
        },
        fail: (err) => {
          wx.showToast({
            title: '保存失敗...',
            icon: 'none'
          })
        }
      })
    }
  }
})

請注意觀察這裏：

// 雲函數調用
wx.cloud.callFunction({
  // 雲函數名
  name: 'saveUserInfo',
  // 傳參
  data: {}

雲端：雲函數

// cloudfunctions/saveUserInfo/index.js

// 引入雲函數SDK
const cloud = require('wx-server-sdk')

// 初始化
cloud.init()

// 數據庫鏈接
let db = cloud.database()

// 雲函數入口函數
exports.main = async (event, context) => {
  // 全局的工具類，在雲函數中獲取微信的調用上下文
  const wxContext = cloud.getWXContext()

  // 雲數據庫操作
  try {
    // 實際註冊功能時，應先檢測該用戶是否已經註冊
    
    // 此處操作集合時，請預先在數據庫中創建該集合users
    return await db.collection('users').add({
      data: {
        created: new Date(),
        userInfo: event.userInfo,
        openid: wxContext.OPENID
      }
    })
  } catch (e) {
    console.error(e)
  }
}

雲函數在使用時必須上傳並部署，如果是本地化測試，一定要進行npm install 安裝包依賴

雲端：數據庫

點擊註冊按鈕，即會在雲數據集合users中創建一條數據

後記

以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小夥伴呦，歡迎多多留言交流...

胡哥有話說，一個有技術，有情懷的胡哥！京東開放平臺首席前端攻城獅。與你一起聊聊大前端，分享前端系統架構，框架實現原理，最新最高效的技術實踐！

長按掃碼關注，更帥更漂亮呦！關注胡哥有話說公衆號，可與胡哥繼續深入交流呦！