小程序雲開發實踐

1.微信小程序雲開發使用背景

在之前我未實際接觸，小程序雲開發時，就憑我一點點印象，一直以爲他是一個相當於mock數據的一個功能。方便前端工程人員，快速的根據文檔建立mock的API(CGI)然後進行開發。以提高開發效率，實際瞭解之後，他們之間既有相似之處，但更多的是不同的地方。

1.1 數據存儲的擴展
由於小程序本身存儲數據的能力有限，所以不可能將大量的數據保存在客戶端，而且將數據保存在本地既不安全，也無法與其他小程序用戶共享，所以大多數小程序都需要一個服務端，服務端可以用多種技術實現，如 PHP、Node.js、 等。不管使用哪種技術實現服務端，都增加了開發的複雜度
1.2後端業務的相似性
微信小程序雲開發，就是將服務端的功能都封裝起來，然後向客戶端提供 API (CGI)訪問這些封裝的功能。服務端的主要功能無外乎數據存儲、文件上傳下載、視頻/音頻流等功能。這些功能大多開發其業務邏輯很多是相通，複用性較強，但比較費時，所以將其封裝起來供客戶端調用，這樣可以提高開發效率，同時也減少了開發成本。

2.雲開發的使用

那些簡單的開通什麼的就不說了，從較爲複雜的說起。
2.1 如果不使用構建工具，直接開始項目，我感覺上手會容易很多，畢竟，微信小程序可以直接創建一個雲開發小程序模板，然後看着文檔依葫蘆畫瓢即可。
2.2 在上手項目構建，我是使用webpack4作爲小程序的構建工具，畢竟其實改動也沒多大，就是方便了wxss，用scss語法而已，這樣用構建工具構建項目的時候很多地方就要注意。一、把小程序入口目錄、插件目錄、雲函數目錄拆出來，並在project.config.json裏面加**“miniprogramRoot”: “miniprogram/”,
“cloudfunctionRoot”: “cloudfunctions/”,**這二個配置項，一個指定小程序根目錄一個指雲函數根目錄，這樣打包小程序的時候就不會把雲函數文件打進去，而且如果不這麼搞，微信開發者工具，下面會出現好幾個黃色警告，這個很不舒服。
2.3 部署雲函數，這部分可以用小程序開發工具那邊創建的模板的login雲函數去體驗，學習，按文檔指引即可。

2.4 體驗完了之後就要進入正題了，創建雲函數

一個雲函數基本包括這三個文件config.json,package.json,index.js.config其中，config.json和package.json不是必要的文件，前一個是爲做定時觸發器的配置文件而存在，而後一個這是本地使用調試雲函數，npm下載依賴‘wx-server-sdk’而存在。
2.4.1 const cloud = require('wx-server-sdk')
基本上是每個雲函數都有的一條語句，提供了雲函數的整個基礎能力（本地調試）

當開發者直接使用小程序開發工具點擊雲開發模板，他實例的每個雲函數都有的一條語句，提供了雲函數的整個基礎能力（本地調試），實際開發中沒有這個也是可以的，也就是意味着你的雲函數當中沒有要依賴wx-server-sdk的功能。

如下2個實例代碼：

// const cloud = require('wx-server-sdk')

// // 初始化 cloud
// cloud.init({
//   // API 調用都保持和雲函數當前所在環境一致
//   env: cloud.DYNAMIC_CURRENT_ENV
// })
let a = 0;
let b = 1;

exports.main = (event, context) => {
    return{
        sum : a+b ,
    }
}

const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init({
  // API 調用都保持和雲函數當前所在環境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})
let a = 0;
let b = 1;

exports.main = (event, context) => {
    return{
        sum : a+b ,
    }
}

其結果一直 輸出爲{sum：1}

如果用了wx-server-sdk初始化雲,基本上也是創建雲函數的標配

cloud.init({
  // API 調用都保持和雲函數當前所在環境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

所以wx-server-sdk是什麼？

2.4.2雲函數的入口函數

相當於是對應了c語言中的main函數，裏面些基本業務邏輯其實和es6沒什麼差別。

//異步輸出
exports.main = async (event, context) => {
  //主要邏輯
}
//同步輸出
exports.main = (event, context) => {
  //主要邏輯
}

基本上雲函數的創建就是這樣。在小程序端調用也很簡單。
首先需要在app.js中進行雲函數調用的初始化

if (!wx.cloud) {
    console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
   } else {
     wx.cloud.init({
       // env 參數說明：
       //   env 參數決定接下來小程序發起的雲開發調用（wx.cloud.xxx）會默認請求到哪個雲環境的資源
       //   此處請填入環境 ID, 環境 ID 可打開雲控制檯查看
       //   如不填則使用默認環境（第一個創建的環境）
       env: 'test-ba05b',
       traceUser: true,
     })
}

實例如下：

  //事件調用區域
  onGetOpenid() {
    // 調用雲函數
    wx.cloud.callFunction({
      name: 'login',//這裏是雲函數的名字，基本上也就對應創建的雲函數的文件夾名
      data: {},
      success: res => {
        wx.showModal({
          title: '提示（opendid）',
          content: `${res.result.openid}`,
          success (res) {
            if (res.confirm) {
              wx.cloud.callFunction({
                name:"test",
                data:{},
              }).then((res)=>{
                console.log(res.result)
              })
              console.log('用戶點擊確定')
            } else if (res.cancel) {
              console.log('用戶點擊取消')
            }
          }
        })
        console.log(res.result)
        //console.log('[雲函數] [login] user openid: ', res.result.openid)
      },
      fail: err => {
        console.error('[雲函數] [login] 調用失敗', err)
      }
    })
  },

還有一個注意點就是雲端部署更新同名雲函數並不需要先刪除在上傳，文件更新直接上傳即可

2.4.3 數據庫的使用

其實我個人認爲啊，小程序雲開發，應該把雲函數初步使用放在數據庫的前面，雖然我熟悉整個雲開發，覺得雲開發中的雲函數主要就是爲數據庫服務的，但是，雲函數也能寫不依賴數據庫的公共業務放在雲端，不過好像這樣做意義不大，但是能夠讓入手的開發者快速掌握雲函數。這樣在熟悉雲函數和數據庫關聯開發的時候就更加簡單。

以下代碼是直接在某個頁面的js中調用的，也就是使用到了數據庫的增

db.collection('todos').add({
    data: {
      id: 1,
      openid:'fsdfsafdsaf',
      todoname:"代辦事項二"
    },
    success: res => {
      // 在返回結果中會包含新創建的記錄的 _id
      wx.showToast({
        title: '新增記錄成功',
      })
      console.log('[數據庫] [新增記錄] 成功，記錄 _id: ', res._id)
    },
    fail: err => {
      wx.showToast({
        icon: 'none',
        title: '新增記錄失敗'
      })
      console.error('[數據庫] [新增記錄] 失敗：', err)
    }
  })
},

直接在使用雲函數，比如創建一個add雲函數，使用雲函數進行數據添加實例代碼如下：

const cloud = require('wx-server-sdk')
// 初始化 cloud
cloud.init({
  // API 調用都保持和雲函數當前所在環境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async (event, context) => {
    const db = cloud.database();
    let message = await db.collection('todos').add({
        data: event,
    })
    return message;
}

然後直接調用這個雲函數

//使用雲函數進行數據庫操作
wx.cloud.callFunction({
  name:"test",
  data:{
    id: 3,
    openid:'fsdfsafdsaf',
    todoname:"代辦事項三"
  }
}).then(res=>{
  console.log(res.result)//然後根據res.result 的errCode來判斷是否上傳成功
})

備註：# 雲開發 quickstart

這是雲開發的快速啓動指引，其中演示瞭如何上手使用雲開發的三大基礎能力：

• 數據庫：一個既可在小程序前端操作，也能在雲函數中讀寫的 JSON 文檔型數據庫
• 文件存儲：在小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理
• 雲函數：在雲端運行的代碼，微信私有協議天然鑑權，開發者只需編寫業務邏輯代碼

參考文檔

• 雲開發文檔