小程式雲開發初體驗

stupidWall發表於2018-11-13

雲開發

開發者可以使用雲開發開發微信小程式、小遊戲，無需搭建伺服器，即可使用雲端能力。

雲開發為開發者提供完整的雲端支援，弱化後端和運維概念，無需搭建伺服器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者已經使用的雲服務相互相容，並不互斥。

類似於Bmob後端雲或知曉雲

雲開發的出現，讓小程式的開發變得更簡單方便，開發人員可以不用去購買搭建伺服器，不用操心服務端的穩定性和資料庫的安裝

開通雲開發

在微信開發工具裡，直接點選'雲開發'，會引導你開通， 需要注意的是雲開發能力從基礎庫 2.2.3 開始支援

小程式雲開發初體驗 小程式雲開發初體驗

雲開發開通後自動獲得一套雲開發環境，各個環境相互隔離，每個環境都包含獨立的資料庫例項、儲存空間、雲函式配置等資源。每個環境都有唯一的環境 ID 標識，初始建立的環境自動成為預設環境。

有一個免費的基礎版

小程式雲開發初體驗

開通雲開發後初始預設可擁有最多兩個環境。在實際開發中，建議每一個正式環境都搭配一個測試環境

資料庫

雲開發提供了一個json資料庫(可以理解為MongoDB 這類 NoSQL 資料庫)，就是一個json格式的物件。 一個資料庫有多個集合，相當於關係型資料庫的表。 集合陣列裡有多個物件，每一個物件就是一個記錄，相當於關係型資料庫中的行。資料庫的操作提供了很多API，後面結合例子簡單示例說明

[
    {
      "id": 342166,
      "haspromotionTag": false,
      "img": "http://p1.meituan.net/128.180/movie/740bd990e4af29d537ce324ec2cd08d6300433.jpg",
      "version": "v2d imax",
      "nm": "無雙",
      "preShow": false,
      "sc": 8.9,
      "globalReleased": true,
      "wish": 125425,
      "star": "周潤發,郭富城,張靜初",
      "rt": "2018-09-30",
      "showInfo": "今天183家影院放映2258場",
      "showst": 3,
      "wishst": 0
    },
    {
      "id": 1209159,
      "haspromotionTag": false,
      "img": "http://p0.meituan.net/128.180/movie/4d9bedd239f41eaf08cd1c4297e4ec7d858156.jpg",
      "version": "",
      "nm": "找到你",
      "preShow": false,
      "sc": 9,
      "globalReleased": true,
      "wish": 66559,
      "star": "姚晨,馬伊琍,袁文康",
      "rt": "2018-10-05",
      "showInfo": "今天182家影院放映1039場",
      "showst": 3,
      "wishst": 0
    }
]
複製程式碼

儲存

基礎版提供了5G的儲存容量，可以把檔案(圖片、視訊...)上傳到儲存空間，在雲端管理。直接使用小程式提供的上傳下載介面，處理起來非常方便。

雲函式

雲函式是寫後端程式碼的，雲函式裡可以運算元據庫，操作儲存，根據自身的業務需求完成後端程式碼的實現。雲函式，是部署在雲端的，但是我們可以在開發工具裡編寫後端的雲函式，完成後再部署到雲端，可以說所有邏輯都在一套程式碼裡。

我的第一個雲開發小程式

小程式雲開發初體驗

建立雲開發專案時，據官方描述，在微信開發工具裡，有一個QuickStart選項，但我發現並沒有，可能是開發工具版本或其他原因。

小程式雲開發初體驗

給資料庫新增資料

我在貓眼電影拷貝了部分資料，準備倒入小程式雲開發的資料庫

小程式雲開發初體驗

可以看到，在控制檯，可以自行新增資料，也可以直接倒入一個json檔案。我這裡選擇呼叫它的API去倒入貓眼json資料

首先我建立了一個名為movies的集合，緊接著呼叫初始化的方法

app.js

...
onLaunch: function () {
    wx.cloud.init()
}
...
複製程式碼

要運算元據庫，需要先獲取到資料庫引用, 同時，獲取到我剛建立的movies集合的引用, 由於在其他頁面也需要呼叫，我這裡把它們都掛到app的屬性上

const app = getApp()
...
app.$db = wx.cloud.database()
app.$collect_movies = app.$db.collection('movies')
...
複製程式碼

最後， 呼叫新增的方法

data.subjects.forEach(o => {
  app.$collect_movies.add({
    data: o
  })
})
複製程式碼

現在雲開發控制檯資料庫裡已經有新增的資料了

顯示所有電影

app.$collect_movies.where({
  _openid: 'ofgUd0Rb4w8E7Af40N46ExxozS5g'
}).get({
  success: function (res) {
    console.log('res', res)
    that.setData({
      movies: res.data
    })
  }
})
複製程式碼
根據ID查詢指定電影
app.$collect_movies.doc('W8Wf4t2AWotkhlzK').get({
    success: function (res) {
      console.log('res',res)
      that.setData({
        movie: res.data
      })
    }
})
複製程式碼
查詢9分以上的電影
const _ = app.$db.command
app.$collect_movies.where({
    sc: _.gte(9)
}).get({
    success: function (res) {
      wx.hideLoading()
      that.setData({
        movies: res.data
      })
    }
})
複製程式碼
獲取9分以上或0分的電影
const _ = app.$db.command
app.$collect_movies.where({
    sc: _.eq(0).or(_.gte(9))
}).get({
    success: function (res) {
      wx.hideLoading()
      that.setData({
        movies: res.data
      })
    }
})
複製程式碼
修改主演名
# 確認修改
const that = this
app.$collect_movies.doc(this.currentMovieId).update({
  data: {
    star: this.data.actor
  },
  success: function (res) {
    that.initUpdateData()
  }
})
複製程式碼
刪除一部電影
# 確定刪除
delAction(e) {
    const that = this
    const id = e.currentTarget.dataset.id
    app.$collect_movies.doc(id).remove({
      success: function (res) {
        that.initUpdateData()
      }
    })
}
複製程式碼

小程式雲開發初體驗

檔案管理

上傳圖片到雲端儲存

試著把手機相簿的圖片上傳到小程式雲端儲存中，可以在小程式端直接使用提供的api

wx.cloud.uploadFile({
  cloudPath: 'example.png', // 上傳至雲端的路徑
  filePath: '', // 小程式臨時檔案路徑
  success: res => {
    // 返回檔案 ID
    console.log(res.fileID)
  },
  fail: console.error
})
複製程式碼

如果單純從程式碼量來看，比上傳到騰訊自家騰訊雲還簡單，當然比上傳到像阿里雲、七牛雲這樣的平臺操作更簡單。

上傳成功之後，返回的不是圖片url, 而是檔案id。如果要顯示圖片或者播放視訊，這個檔案id，小程式的元件image/video也能識別

 <image class="movie" mode="widthFix" src="{{ fileId }}" wx:if="{{ fileId }}"> </image>
複製程式碼
upload() {
    const that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths[0])
        wx.cloud.uploadFile({
          cloudPath: 'test/2.png', // 上傳至雲端的路徑
          filePath: tempFilePaths[0], // 小程式臨時檔案路徑
          success: res => {
            // 返回檔案 ID
            console.log(res.fileID)
            that.setData({
              fileId: res.fileID
            })
          },
          fail: console.error
        })
      }
    })
}
複製程式碼

小程式雲開發初體驗

小程式雲開發初體驗

根據檔案id下載檔案
downloadFile() {
  wx.cloud.downloadFile({
  fileID: 'cloud://ii-1853ca.6969-ii-1853ca/test/2.png',
  success: res => {
    // 返回臨時檔案路徑
    console.log('tempFilePath', res)
    // cloud://ii-1853ca.6969-ii-1853ca/test/2.png
    this.setData({
      downloadFileResult: res
    })
  },
  fail: err => {
    // handle error
  }
})
複製程式碼

根據檔案id換取臨時網路連結

可以根據檔案 ID 換取臨時檔案網路連結，檔案連結有有效期為兩個小時

const that = this
wx.cloud.getTempFileURL({
    fileList: [this.data.fileId],
    success: res => {
      // https://6969-ii-1853ca-1253918415.tcb.qcloud.la/test/2.png
      that.setData({
        fileList: res.fileList
      })
    },
    fail: err => {
      // handle error
    }
})
複製程式碼

雲函式

怎麼玩？

雲函式是執行在Node.js環境下的

首先在小程式專案根目錄找到配置檔案project.config.json檔案，加上一個配置, 指定本地已存在的目錄作為雲函式的本地根目錄

  "cloudfunctionRoot": "./functions/",
複製程式碼

指定之後神奇的一幕就是圖示會變成 “雲目錄圖示”

小程式雲開發初體驗

子目錄都是我通過右鍵選單建立一個新的雲函式，其中檔名就是雲函式名

每建立一個雲函式，都會出現彈窗，詢問你是否有node環境，確定後會自動開啟終端，安裝依賴, 所以每一個雲函式裡面都是這樣的：

小程式雲開發初體驗

在index.js中, 預設是這樣的

// 雲函式入口檔案
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函式入口函式
exports.main = async (event, context) => {

}
複製程式碼
建立一個相加的雲函式

plus/

// 雲函式入口檔案
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函式入口函式
// context 物件包含了此處呼叫的呼叫資訊和執行狀態
// event 指的是觸發雲函式的事件
exports.main = async (event, context) => {
  return {
    sum: event.a + event.b
  }
}
複製程式碼

在小程式端呼叫plus雲函式, 引數名一眼就看明白，不用解釋

wx.cloud.callFunction({
  name: 'plus',
  data: {
    a: 1,
    b: 2,
  },
  success: function (res) {
    console.log('plus', res.result) // 3
  },
  fail: console.error
})
複製程式碼

呼叫後報錯，是因為沒有把建立的雲函式上傳部署到雲端, 如何部署？看下圖

小程式雲開發初體驗

部署成功之後，我們來到雲控制檯， 發現雲函式已經在上面

小程式雲開發初體驗

回到小程式，再次呼叫雲函式，發現已經可以了, 拿到了預期的值3

獲取小程式使用者資訊

雲開發的雲函式的獨特優勢在於與微信登入鑑權的無縫整合。當小程式端呼叫雲函式時，雲函式的傳入引數中會被注入小程式端使用者的 openid，開發者無需校驗 openid 的正確性，因為微信已經完成了這部分鑑權，開發者可以直接使用該 openid。與 openid 一起同時注入雲函式的還有小程式的 appid

定義雲函式

// 雲函式入口檔案
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函式入口函式
exports.main = async (event, context) => {
  return event.userInfo
}
複製程式碼

呼叫雲函式

wx.cloud.callFunction({
    name: 'userInfo',
    success: function (res) {
      console.log('userInfo', res.result)
        /*
          {
            appId:"wx8dae61dd0ef5c510",
            openId:"ofgUd0Rb4w8E7Af40N46ExxozS5g"
           }
        */
    },
    fail: console.error
})
複製程式碼
非同步雲函式
// 雲函式入口檔案
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函式入口函式
exports.main = async (event, context) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(event.a + event.b)
    }, 3000)
  })
}
複製程式碼

在雲函式中我們可以引入第三方依賴來幫助我們更快的開發。雲函式的執行環境是 Node.js，因此我們可以使用 npm 安裝第三方依賴。比如除了使用 Node.js 提供的原生 http 介面在雲函式中發起網路請求，我們還可以使用一個流行的 Node.js 網路請求庫 request 來更便捷的發起網路請求。

注意，現在上傳雲函式時不會在雲端自動安裝依賴，需要開發者在本地安裝好依賴後一起打包上傳。

雲函式運算元據庫
// 雲函式入口檔案
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database()

// 雲函式入口函式
exports.main = async (event, context) => {
  // 獲取電影集合資料
  return db.collection('movies').get()
}
複製程式碼
雲函式呼叫其他雲函式

定義雲函式

// 雲函式入口檔案
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函式入口函式
exports.main = async (event, context) => {
  return await cloud.callFunction({
    name: 'plus',
    data: {
      a: 1,
      b: 2,
    }
  })
}
複製程式碼

呼叫雲函式

wx.cloud.callFunction({
  name: 'cloudFuncCallColundFunc',
  complete: res => {
    console.log('cloudFuncCallColundFunc', res)
  },
})
複製程式碼
雲函式日誌、測試

可以看到呼叫的雲函式的呼叫日誌

小程式雲開發初體驗

可以直接測試編寫好的雲函式，傳入引數, 點選執行除錯按鈕即可

雲開發初體驗總結

雲開發大概在8月份公測，9月份釋出出來的，現在已經快11月份了，據官方描述，有很多開發人員參與進去，是他們沒有預料到的， 同時也被提出了很多吐槽點，小程式的雲開發也可以說是在試水階段，有不少坑，後面肯定會越來越完善。 逐漸成熟，會是一個非常不錯的解決方案， 特別是針對那些初創公司。

相關文章