小程序雲開發初體驗

雲開發

開發者可使用雲開發開發微信小程序、小遊戲，無需搭建服務器，便可使用雲端能力。

雲開發爲開發者提供完整的雲端支持，弱化後端和運維概念，無需搭建服務器，使用平臺提供的 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月份了，據官方描述，有不少開發人員參與進去，是他們沒有預料到的， 同時也被提出了不少吐槽點，小程序的雲開發也能夠說是在試水階段，有很多坑，後面確定會愈來愈完善。 逐漸成熟，會是一個很是不錯的解決方案， 特別是針對那些初創公司。