微信小程序·云開發(fā)初體驗

簡介：2018年9月份微信正式推出云開發(fā)平臺，一石激起千層浪，什么是云開發(fā)？是不是以后就可以和后端研發(fā)說拜拜了？是不是未來前端研發(fā)就可以一統(tǒng)微信小程序了？想想還有點小激動了呢！

2018年9月份微信正式推出云開發(fā)平臺，一石激起千層浪，什么是云開發(fā)？是不是以后就可以和后端研發(fā)說拜拜了？是不是未來前端研發(fā)就可以一統(tǒng)微信小程序了？啥？我膨脹了嗎？我驕傲了嗎？我嘴角流口水了嗎？只是想想還有點小激動了呢！

好了，好了，后端童鞋可以放下手里的刀了，這個微信小程序的云開發(fā)暫時還無法全面取代你們在微信端的地位，但是！不得不說給前端開發(fā)帶來了很大的便利，值得前端童鞋們一探究竟。

1.什么是云開發(fā)？

云開發(fā)為開發(fā)者提供完整的云端支持，弱化后端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業(yè)務開發(fā)，即可實現(xiàn)快速上線和迭代，同時這一能力，同開發(fā)者已經使用的云服務相互兼容，并不互斥。

也就是說，對于一些小程序，我們無需后端搭建服務器，提供數(shù)據(jù)庫，整個項目完全可以由前端開發(fā)者來完成。這意味著前端開發(fā)者無需考慮如何構建服務器之類的工作，即可完成整個微信小程序了。

2.云開發(fā)功能簡介

好了，叨叨了這么多，想必你已經迫不及待的要揭開它神秘的面紗了。

2.1 云開發(fā)基本步驟

（1）俗話說“巧婦難為無米之炊”，首先要做的就是下載微信提供的最新開發(fā)工具，網(wǎng)址為您奉上：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18101520 
（2）在啟動界面，選擇”建立云開發(fā)快速啟動模板”，就可以看到下面的開發(fā)平臺了：

其中，系統(tǒng)默認會建立兩個文件夾，分別為：

– cloudfunctions 默認存放云函數(shù)的文件夾

– miniprogram 默認存放業(yè)務代碼的文件夾

如果你覺得，這是神馬名字，能不能起個高大上的名字。只有私人訂制版的名字，才能襯托我無與倫比的高貴氣質~

比如說：李狗蛋和王鋼柱…

敲黑板，注意了，當你修改名字后，一定要記得在 project.config.json 中對應修改云函數(shù)和程序的路徑,否則小程序無法找到對應的入口文件而報錯。

2.2 云開發(fā)切換環(huán)境

每套環(huán)境的數(shù)據(jù)庫/云函數(shù)都是相互獨立的，只有在測試環(huán)境檢查的沒有問題了，再部署到線上。那么問題又來了，如何切換使用的云環(huán)境呢？

右擊云函數(shù)文件夾，如果之前切換過環(huán)境的話，會出現(xiàn)兩個候選環(huán)境，如果之前沒有切換過，則選擇更多設置，如下圖所示在新打開的界面中選擇當前要使用的環(huán)境即可。

好了，環(huán)境準備好后，讓我們開始愉快的（踩坑）開發(fā)之旅吧！

3.云開發(fā)的三大”攔路虎”

曾經有位名人“沃·滋基碩德” 這樣教導我們：“你在奔向成功的路上總是會遇到困難，不要傷心，慢慢就習慣了！”

云開發(fā)包括三大主要內容：云函數(shù)，數(shù)據(jù)庫，存儲管理，相當于攔路虎一樣，橫跨在我們面前，在使用過程中需要注意哪些事項呢？讓我娓娓道來：

3.1 大虎：云函數(shù)

何為云函數(shù)？

云函數(shù)是一段運行在云端的代碼，無需管理服務器，在開發(fā)工具內編寫、一鍵上傳部署即可運行后端代碼。

我們可以在代碼區(qū)域的云函數(shù)文件夾，右擊新建 node.js 函數(shù)，之后平臺會提示我們是否安裝依賴：

如需在云函數(shù)中操作數(shù)據(jù)庫、管理云文件、調用其他云函數(shù)等操作，可使用官方提供的 npm 包 wx-server-sdk 進行操作。值得注意的是，一旦忘記安裝依賴，在 mac 系統(tǒng)下，則沒有挽回的入口，不是說好了，浪子回頭金不換嗎？連個后悔機會也不給人家！！還好我們可以曲線救國，在本地文件中，找到該云函數(shù)的文件夾，打開 CMD 終端執(zhí)行下面的命令：

npm install --save wx-server-sdk@latest
 
 

然后再上傳部署該云函數(shù)，這樣就可以引入依賴了。

云函數(shù)的使用方式如下：

exports.main = (event, context) => {
let { userInfo, a, b} = event
let { openId, appId} = userInfo // 這里獲取到的 openId 和 appId 是可信的
let sum = a + b
return {
openId,
appId,
sum
}
}
 

其中 event 包含了小程序端調用該函數(shù)時傳過來的參數(shù)，同時還包含了用戶登錄態(tài) openId 和小程序 appId 信息；

context 對象包含了此處調用的調用信息和運行狀態(tài)，可以用它來了解服務運行的情況。

這里比較重要的是 openId ，客戶端的每個用戶都會有自己的 openId ，服務端可以根據(jù)這些 openId 來區(qū)分用戶。然而，當我們滿心歡喜的想跑通上面獲取 openId 的示例時，卻發(fā)現(xiàn)報錯了：

看錯誤提示是沒有獲取到 login 這個云函數(shù)，但是打開云開發(fā)平臺，該云函數(shù)明明存在的呀？而且這是官方給的的示例，怎么會出錯呢？

這時，停下來來思索一下，因為有兩套開發(fā)環(huán)境，是不是還需要定義小程序端調用的云環(huán)境呢？

想到這里茅塞頓開，于是在 app.js 文件下初始化云函數(shù)的時候，定義好要使用的云開發(fā)環(huán)境：

wx.cloud.init({
env: '使用云開發(fā)環(huán)境的ID',
traceUser: true
}
 

類似的，云函數(shù)在初始化時，同樣需要對云開發(fā)環(huán)境進行定義，

// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env: 'demo-id'
})
const db = cloud.database();
exports.main = async (event, context) => {
return db.collection('todos').get()
}
 

這樣，上面的云函數(shù)就是調用了 ‘demo-id’ 云環(huán)境下的 todos 集合的數(shù)據(jù)了。注意的是，該調用的環(huán)境可以和當前開發(fā)環(huán)境不是同一套環(huán)境。

3.2 二虎：數(shù)據(jù)庫

數(shù)據(jù)庫的界面如下圖所示：

改變數(shù)據(jù)庫有四種方法：

– 1.云開發(fā)平臺添加記錄；

– 2.云開發(fā)平臺導入數(shù)據(jù)；

– 3.微信小程序端改變數(shù)據(jù)庫；

– 4.云函數(shù)端改變數(shù)據(jù)庫；

正所謂“尺有所短，寸有所長。物有所不足，智有所不明”。這四種方法，各有優(yōu)點：

（1）云開發(fā)平臺添加記錄，簡單方便，不足之處在于，每條數(shù)據(jù)都要逐條輸入，不方便；

（2）云開發(fā)平臺導入數(shù)據(jù)，可以同時導入大量的數(shù)據(jù)，快速。注意的是，導入的json數(shù)據(jù)和常規(guī)的 json 格式不同，按照對象分割，并且對象之間不存在逗號，如下所示：

{
"_id":"todo-identifiant-aleatoire",
"_openid":"user-open-id",
"description":"learn cloud database",
"done":false
}
{
"_id":"todo-identifiant-aleatoire-2",
"_openid":"user-open-id",
"description":"write a novel",
"done":false
}
 

（3）小程序端改變數(shù)據(jù)庫，往往攜帶業(yè)務邏輯，但是受到各種權限的限制。小程序端新增的數(shù)據(jù)，都會默認帶有 _id（用以唯一標志一條記錄） 和 openid（用以標志記錄的創(chuàng)建者，即小程序的用戶）。這樣，根據(jù)數(shù)據(jù)庫中保存的 openid ，可以區(qū)分不同的用戶。反過來，某位用戶也無法操作其他用戶的數(shù)據(jù)，從而保證了數(shù)據(jù)的穩(wěn)定性。

（4）云函數(shù)端改變數(shù)據(jù)庫，和小程序端類似的，云函數(shù)提供函數(shù)名稱 name，供小程序調用。下面就是小程序端調用云函數(shù)的方法：

wx.cloud.callFunction({
name: ‘云函數(shù)名字',
data: {
//傳入云函數(shù)的參數(shù)
},
success: res => {
//調用成功后的函數(shù)
},
fail: err => {
//調用失敗后的函數(shù)
}
})
 

可以看出，云函數(shù)也可以帶有業(yè)務邏輯，不同于小程序端對數(shù)據(jù)庫的操作，云函數(shù)是運行在服務端的，具有至高無上的權利—— 棄 openid 如敝履，置權限于不顧，隨心所欲的對數(shù)據(jù)庫進行增！刪！改！查！

綜上所述，我們可以使用在云開發(fā)平臺的導入功能，初始化 json 數(shù)據(jù)，利用云開發(fā)平臺的添加修改功能，對數(shù)據(jù)進行細節(jié)的調整，之后使用微信小程序端操作數(shù)據(jù)庫，向數(shù)據(jù)庫中增加數(shù)據(jù)，可以自動引入 openid 來區(qū)分用戶數(shù)據(jù)，最后如果想獲得更大的權利，就使用云函數(shù)對數(shù)據(jù)庫進行操作，再把調用的權限拋給小程序端。

3.3 三虎：存儲管理

云開發(fā)平臺上最后一位攔路虎是云存儲管理，它不吵不鬧，來者不拒的接收著要保存的數(shù)據(jù)。其界面如下圖所示

從上圖看出，通過“上傳文件”按鈕，可以在云開發(fā)控制臺上傳文件。此外，可以通過微信小程序的 uploadFile 函數(shù)，上傳文件。謹記，一定要使用新建文件夾來規(guī)范劃分存儲的數(shù)據(jù)，否則后期大量的存儲文件將是你揮之不去的噩夢。

圖中 fileId 即是文件的存儲地址，無論是從云開發(fā)平臺還是從客戶端上傳的文件，系統(tǒng)都會自動分配給每個文件對應的 fileId。當然也可以通過微信小程序的 uploadFile 函數(shù)，上傳文件。下面的云函數(shù)代碼就使用了存儲管理中保存的文件，返回給小程序端調用：

// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
const fileList = [
'cloud://cloud-demo-c5b56e.636c-cloud-demo-c5b56e/swiperImg/img_1.jpg',
'cloud://cloud-demo-c5b56e.636c-cloud-demo-c5b56e/swiperImg/img_2.jpg',
'cloud://cloud-demo-c5b56e.636c-cloud-demo-c5b56e/swiperImg/img_3.jpg'
]
const result = await cloud.getTempFileURL({
fileList: fileList,
})
return result.fileList
}
 

上面解釋了文件在云端保存的地址，那么在小程序端把文件上傳到云存儲中的地址又是什么呢？

假如在小程序端，實現(xiàn)本地的圖片上傳到云服務器的功能，首先要獲取本地文件的臨時路徑：

wx.chooseImage({
//選擇手機圖片
chooseEvt(){
let that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作為img標簽的src屬性顯示圖片
const tempFilePaths = res.tempFilePaths[0];
that.setData({
chooseImg: tempFilePaths
})
that.uploadImg(tempFilePaths);
}
})
}
 

下面是上傳到服務器的代碼：

uploadImg(tempFilePaths){
let str = tempFilePaths;
let name = str.split('.').reverse()[1] +'.'+str.split('.').reverse()[0];
let names = name.split('//')[1];
let that = this;
wx.cloud.uploadFile({
cloudPath: 'swiperImg/'+names,
filePath: str, // 小程序臨時文件路徑
success: res => {
that.setData({
imageId: res.fileID
})
},
fail: err => {
console.log(err)
}
})
}
 

其中 wx.cloud.uploadFile 帶有的參數(shù) cloudPath 就是上傳到服務器的存儲地址。既然上面示例中已經給出了結果，我也就不賣關子了，cloudPath 使用的是相對地址，而不是存儲地址 “cloud://cloud-demo-c5b56e.636c-cloud-demo-c5b56e/swiperImg/”。另外上傳文件的名字為了避免自己定義，使用了上傳文件本身的名字。但是！要注意的是， 手機端和電腦端上傳文件的路徑是不一樣的， 我們來看一下，在電腦端上傳圖片，得到的文件臨時地址 tempFilePaths 是

"http://tmp/wx81c95cafc368ba2d.o6zAJsxvC5wiHIIVQOpRPFVOADDM.NLBDb9oLxX1D1f412643685c68c106d42e1757f77691.png"
 

而手機端得到的 tempFilePaths 則是：

"wxfile://tmp_wx81c95cafc368ba2do6zAJsxvC5wiHIIVQOpRPFVOADDMNLBDb9oLxX1D1f412643685c68c106d42e1757f77691.png"
 

可以看出，除了文件頭不一樣外，手機端得到的地址并沒有中間的 “·”，假如像上面的代碼一樣，按照 “·” 進行分割地址，則手機端得到的 name 就會帶有 wxfile:// ，這樣保存到云端存儲的時候就會一直提示 cloudPath 路徑不對，但是在電腦端調試的時候，由于返回的圖片臨時路徑帶有多個 “·”， 就不會出現(xiàn)這問題，話說，第一次遇到這個問題的時候，一度懷疑是不是云函數(shù)還需要走什么上線流程，才能在手機端看到效果呢。

4.說說心里話

微信云開發(fā)功能，給前端帶來獨立開發(fā)微信小程序的能力。一經發(fā)布，便引起廣大開發(fā)者的關注。由于推出的不久，在開發(fā)過程中還有些問題無法找到類似的解答，只能不斷的翻閱官方文檔和調試。當然還有官方提供的論壇[1]，只是如果著急想要得到解答，還是要靠自己。

好了，說了這么多，其實官方文檔中的 API，大多都沒有介紹。文末給出了官方文檔的鏈接[2]，里面說的很是詳細了。 本文旨在使用云開發(fā)過程中，總結分享遇到的哪些問題，拋磚引玉，期待各位走過路過的童鞋留言，說一說你在使用微信小程序中的心得。