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

時間 2019-11-16

標籤微信程序開發功能實踐简体版

原文原文鏈接

前言

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

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

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

小程序雲開發基礎能力

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

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

小程序雲開發實踐

1、建立小程序雲開發項目

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

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

2、操做雲能力

1. 開通雲開發

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

注意：開通雲開發後，需等待大概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'
          })
        }
      })
    }
  }
})

請注意觀察這裏：npm

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

雲端：雲函數json

// 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)
  }
}