如何進行小程序雲函數開發
在以前的文章中，我們給大家介紹了小程序的基本使用，近期微信團隊聯合騰訊雲合作開發了一項新的產品，不用服務器就可以在小程序端進行服務端開發。爲開發者提供完整的雲端支持，弱化後端和運維操作，使用平臺原生 API 進行核心業務開發，實現快速上線和迭代。
小程序·雲開發是微信與騰訊雲聯合開發的原生 serverless 雲服務，具備簡化運維、高效鑑權等優勢，讓你零門檻快速上線小程序。
今天這篇文章中，我們將從0~1介紹小程序雲開發的基本使用過程。同時，分享一個demo來體驗雲開發的優勢。在教程開始之前，需要搭建搭建好小程序的基礎開發環境，關於如何配置，大家可以參考如何入門小程序開發這篇文章的入門教程。
入門 - 新建雲開發項目
首先，我們新建一個雲開發的項目，注意AppID是你自己在小程序AppID，同時不要勾選建立雲開發模版。
1548647154226接下來，我們新建兩個目錄，一個目錄（client）存放小程序的客戶端，一個目錄（server）存放小程序雲開發的服務端，如圖。
1548647274731接下來，打開配置文件project.config.json，我們需要新增兩行文件。
"cloudfunctionRoot": "server/",
"miniprogramRoot": "client/",
cloudfunctionRoot參數填寫你新建的雲開發服務器的文件目錄，miniprogramRoot填寫你小程序客戶端的目錄，如圖。
1548647437788當你的server文件夾圖標變成了☁的樣式，證明我們雲開發環境就搭建完成了。
入門 - 新建雲函數
我們先不寫客戶端，先談談雲開發，雲開發的優勢是省去了服務器，在雲端運行的代碼，微信私有天然鑑權，開發者只需編寫自身業務邏輯代碼。小程序的客戶端也提供了一些接口，可快速調用雲函數，就如同在本地調用一樣方便。
創建了第一個雲開發小程序後，在使用雲開發能力之前需要先開通雲開發。在開發者工具工具欄左側，點擊 “雲開發” 按鈕即可開通雲開發。雲開發開通後自動獲得一套雲開發環境，各個環境相互隔離，每個環境都包含獨立的數據庫實例、存儲空間、雲函數配置等資源。每個環境都有唯一的環境 ID 標識，初始創建的環境自動成爲默認環境。
1548647978889我這邊已經開通了小程序雲開發，該頁面是小程序雲開發的控制檯，通過該控制檯，我們能查看小程序雲開發的基本數據並進行管理。開通後，我們就可以新建雲函數了，如圖。
1548648158373win新建一個名爲add的雲函數，這個名稱很重要，後面在客戶端調用的時候我們會用到。
1548648187930入門 - 編寫雲函數
接下來，就可以編寫雲函數相關的代碼了，我們打開server端add函數下的index.js文件夾。
1548648405057然後粘貼下面的代碼。
// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 雲函數入口函數
exports.main = async (event, context) => {
const { a, b } = event
const sum = a + b
return {
sum
}
}
這裏代碼很簡單，首先，我們引入wx-server-sdk雲開發的node包文件，然後使用init()方法初始化雲函數。之後，我們創建一個雲函數入口exports.main，之後通過event方法去讀取a,b兩個文件，然後將其相加，最後返回改數據。
這裏的代碼意思是獲取a,b兩個數據，然後相加在返回給客戶端。我們只需記住雲開發最基本的函數格式就行，如下所示。
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
}
入門 - 雲函數相關依賴安裝
雲函數服務端運行依賴wx-server-sdk包，所以運行前，我們一定要安裝相關運行依賴文件纔行。因爲我們雲開發服務端是NodeJS運行環境，安裝wx-server-sdk包，首先要在本地搭建相關運行環境。
第一步、安裝NodeJS環境
首先，我們打開NodeJS官網，下載NodeJS安裝包。
1548650930323下載完成後雙擊打開，並一路下一步安裝即可。
1548650991772安裝完成後，打開命令提示符，試試node命令和npm命令是否正常。
1548651326941看到如圖所示的內容，證明你的node和npm都已經安裝成功了，接下來我們就可以安裝相關依賴文件了。
第二步、安裝依賴
在你新建的雲函數上面單擊右鍵，選擇在終端中打開，如圖。
1548651460838然後執行下面的命令安裝所需依賴文件。
npm install wx-server-sdk --save
如圖所示，看到類似下圖的內容，就證明依賴環境下載並安裝完成了。
1548651669936接下來，我們進行測試，看看我們的服務端代碼是否能正常運行。
第三步 、測試雲函數
還是打開上一步的終端，然後輸入下面的代碼。
node index.js
1548651911974如果什麼都沒有輸出，證明沒有錯誤，可以正常運行。接下來，我們將整個項目上傳到雲函數中。
1548652001374如圖，我們在創建的雲函數中右鍵，然後選擇上傳並部署：所有文件，等待系統上傳後，我們雲函數就部署完成了。
入門 - 部署客戶端
參考如何入門小程序開發這篇文章的入門教程，我們在client目錄下新建一個名爲app.json的文件，並在文件中寫下下面的代碼。
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小程序",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
"cloud": true
}
保存後，系統會自動生成pages文件夾，並生成index文件夾及其他相關文件，如圖。
1548652237366接下來，我們看看客戶端如何調用雲函數。小程序官方文檔提供了雲函數調用APIwx.cloud.callFunction()，廢話不多說，我們先撰寫最簡單的一行代碼演示下，打開客戶端目錄下的index.js文件，撰寫下面的代碼。
Page({
onLoad() {
wx.cloud.init({
env: 'test-f97abe'
})
wx.cloud.callFunction({
// 需調用的雲函數名
name: 'add',
// 傳給雲函數的參數
data: {
a: 1,
b: 2,
},
success(res) {
console.log(res.result.sum)
},
})
}
})
保存後，我們看到控制檯已經輸出了數字3。
1548657293907這裏的代碼意思是調用名爲add的雲函數，然後將數據a、b數據傳至雲函數，之後如果雲函數執行成功後，返回雲函數所得到的數據。值得注意的是，代碼運行前需要初始化雲函數wx.cloud.init，並配置相關參數，具體詳見官方文檔，代碼很簡單，但是代碼中name、data等參數到底是什麼意思呢？我們來看看官方的文檔中參數介紹。
|
參數 |
類型 |
必填 |
說明 |
|---|---|---|---|
|
name |
String |
是 |
雲函數名 |
|
data |
Object |
否 |
傳遞給雲函數的參數 |
|
config |
Object |
否 |
局部覆寫 wx.cloud.init 中定義的全局配置 |
|
success |
Function |
否 |
返回雲函數調用的返回結果 |
|
fail |
Function |
否 |
接口調用失敗的回調函數 |
|
complete |
Function |
否 |
接口調用結束的回調函數（調用成功、失敗都會執行） |
原來name後面是填寫你雲函數的相關名稱，我們這裏是add。data是傳遞給雲函數的參數，我們這裏填寫a，b兩個參數，參數a=1，b=2。最後看到如果雲函數執行成功後，返回相關參數。
我們優化下代碼，將返回的參數顯示在前端。
index.wxml
<text>雲函數返回數據{{sum_num}}</text>
index.js
Page({
data: {
sum_num: ''
},
onLoad() {
var myThis = this
wx.cloud.init({
env: 'test-f97abe'
})
wx.cloud.callFunction({
// 需調用的雲函數名
name: 'add',
// 傳給雲函數的參數
data: {
a: 1,
b: 2,
},
success(res) {
console.log(res.result.sum)
myThis.setData({
sum_num: res.result.sum
})
},
})
}
})
如圖，我們已經將後端的數據傳送到前端展示。
1548657954913總結
喜歡的小夥伴請持續關注本專欄。這篇教程我們介紹了小程序·雲開發的基本使用，學會了嗎？利用小程序雲開發實現快速上線和迭代。歡迎免費使用！
原創聲明，本文系作者授權雲+社區發表，未經許可，不得轉載。
如有侵權，請聯繫 [email protected] 刪除。