上一篇介紹mpvue的目錄結(jié)構(gòu)以及做了一些前端的基本的開(kāi)發(fā)配置工作敬锐。并且在項(xiàng)目中引入了vant WeApp這個(gè)UI組件庫(kù)告唆，至此，項(xiàng)目的前端配置大致完成。本篇主要是了解博客項(xiàng)目的后端服務(wù)俊啼，也就是微信小程序開(kāi)放提供的『云開(kāi)發(fā)』功能。

什么是小程序云開(kāi)發(fā)

首先似扔，還是需要你花費(fèi)幾分鐘的時(shí)間大概的閱讀一下微信提供的云開(kāi)發(fā)文檔：

傳送門：

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/capabilities.html

簡(jiǎn)單地說(shuō)吨些，小程序提供的云開(kāi)發(fā)就是一款 serverless 服務(wù)搓谆，它為開(kāi)發(fā)者提供了「云函數(shù)」、「云數(shù)據(jù)庫(kù)」和「云文件存儲(chǔ)」這些基本功能豪墅，并且將這些能力封裝成特定的接口泉手，可以按照 wx.cloud.xxx這種方式來(lái)進(jìn)行調(diào)用。

使用云開(kāi)發(fā)的優(yōu)勢(shì)：

1.簡(jiǎn)單的微信登錄：

小程序的云開(kāi)發(fā)可以自動(dòng)實(shí)現(xiàn)用戶登錄的校驗(yàn)偶器，所以不需要再次校驗(yàn)用戶身份斩萌，就可以直接在云函數(shù)內(nèi)使用?wx-server-sdk?提供的getWXContent?方法獲取到openid（微信用戶身份的唯一標(biāo)識(shí)）。

如果用戶授權(quán)了小程序獲取昵稱等信息屏轰，這些信息也會(huì)自動(dòng)出現(xiàn)在小程序云開(kāi)發(fā)的管理控制臺(tái)中的用戶登錄部分颊郎。

2.免費(fèi)的數(shù)據(jù)庫(kù)和存儲(chǔ)：

小程序云開(kāi)發(fā)提供了免費(fèi) 1GB 的數(shù)據(jù)庫(kù)存儲(chǔ)和免費(fèi)5GB的文件存儲(chǔ)姆吭，雖然這個(gè)存儲(chǔ)量并不是很大内狸，但是對(duì)于嘗鮮的個(gè)人開(kāi)發(fā)者來(lái)說(shuō)昆淡，還是綽綽有余昂灵。當(dāng)然眨补，土豪朋友可以忽略渤涌，基礎(chǔ)版、旗艦版吊履、豪華版總有一款可以滿足需求调鬓。

3.使用簡(jiǎn)單：

你只需要了解js和簡(jiǎn)單的異步的知識(shí)(promise)腾窝，就可以完成小程序云開(kāi)發(fā)的內(nèi)容。

至于缺點(diǎn)驴娃，就是云開(kāi)發(fā)的業(yè)務(wù)邏輯都在小程序端完成唇敞，所以云開(kāi)發(fā)并不適合應(yīng)用在有復(fù)雜邏輯的大型web管理系統(tǒng)，也不容易脫離小程序的生態(tài)系統(tǒng)咒精。

但是模叙，對(duì)于一些之前并無(wú)后端開(kāi)發(fā)經(jīng)驗(yàn)的前端開(kāi)發(fā)者來(lái)說(shuō)，無(wú)需搭建服務(wù)器湖蜕，免域名備案昭抒，免費(fèi)存儲(chǔ)灭返，僅僅是開(kāi)發(fā)一款簡(jiǎn)單的熙含，輕量級(jí)的前后端交互應(yīng)用怎静，使用云開(kāi)發(fā)還是很香的。

云開(kāi)發(fā)配置

1.開(kāi)發(fā)前的配置：

首先黔衡，進(jìn)行云開(kāi)發(fā)環(huán)境初始化，在src/main.js文件中添加如下語(yǔ)句：

raceUser屬性為true決定了可以將用戶訪問(wèn)記錄到用戶管理中夜牡，并且在控制臺(tái)中可見(jiàn)。

env屬性可以打開(kāi)云開(kāi)發(fā)控制臺(tái)面板的設(shè)置 -> 環(huán)境設(shè)置拷貝你的當(dāng)前環(huán)境ID并填入侣签。

這里的資源環(huán)境文檔中有詳細(xì)說(shuō)明急迂，云開(kāi)發(fā)默認(rèn)提供了兩個(gè)相互獨(dú)立的環(huán)境，一個(gè)環(huán)境對(duì)應(yīng)一整套獨(dú)立的云開(kāi)發(fā)資源蹦肴，包括數(shù)據(jù)庫(kù)袋毙、存儲(chǔ)空間、云函數(shù)等听盖。在實(shí)際開(kāi)發(fā)中，建議每一個(gè)正式環(huán)境搭配一個(gè)測(cè)試環(huán)境。我這里的環(huán)境名當(dāng)初是隨便起的背零，之后才發(fā)現(xiàn)名稱不能修改。囧......為了不重蹈覆轍侦镇，大家起名前最好按照文檔的建議分別起名為test（測(cè)試環(huán)境）和 release（正式環(huán)境）好做區(qū)分壳繁。

2.云開(kāi)發(fā)數(shù)據(jù)庫(kù)：

云開(kāi)發(fā)提供了一個(gè) JSON 數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)中的每條記錄都是一個(gè) JSON 格式的對(duì)象闹炉。一個(gè)數(shù)據(jù)庫(kù)可以有多個(gè)集合（相當(dāng)于關(guān)系型數(shù)據(jù)中的表）蒿赢，集合可看做一個(gè) JSON 數(shù)組，數(shù)組中的每個(gè)對(duì)象就是一條記錄渣触，記錄的格式是 JSON 對(duì)象羡棵。

如何使用呢，首先打開(kāi)云開(kāi)發(fā)控制臺(tái)面板嗅钻，可以嘗試直接在數(shù)據(jù)庫(kù)新建一個(gè)示例集合并插入幾條記錄皂冰，如下：

3.云函數(shù)的配置：

云開(kāi)發(fā)的環(huán)境和數(shù)據(jù)庫(kù)內(nèi)容已經(jīng)準(zhǔn)備的差不多，接下來(lái)介紹一下云函數(shù)的使用啊犬。

首先需要配置云函數(shù)的根目錄灼擂，在/static目錄下創(chuàng)建文件夾funtions，然后在project.config.json文件下新增字段：

"cloudfunctionRoot": "static/functions/",

這可能在編譯后不會(huì)生效觉至，保險(xiǎn)起見(jiàn)，可以在npm start 后檢查dist/project.config.json文件睡腿，看一下剛剛的字段是否添加成功语御，如果沒(méi)有峻贮，請(qǐng)?jiān)赿ist/project.config.json中也添加上述字段∮Υ常或者刪除dist目錄重新編譯纤控。

在微信開(kāi)發(fā)者工具側(cè)欄目錄結(jié)構(gòu)中可以看到我們新建的functions文件夾，這個(gè)文件夾就是用來(lái)存放和編寫本地云函數(shù)碉纺，右鍵選擇你的開(kāi)發(fā)環(huán)境船万。

選擇好環(huán)境后我們可以新增一個(gè)云函數(shù)，需要注意的是骨田，這一步驟必須在微信開(kāi)發(fā)者工具中進(jìn)行态贤。

打開(kāi)微信開(kāi)發(fā)者工具悠汽。

在編輯器窗口下，右鍵/static/funtions茬高，選擇新建Node云函數(shù)雅采。

填寫云函數(shù)名婚瓜，如demo。

可能會(huì)彈出的窗口胡陪，并詢問(wèn)你是否安裝wx-server-sdk柠座，點(diǎn)擊確定（如果安裝沒(méi)有進(jìn)行片橡，可以自己手動(dòng)在命令行中運(yùn)行npm install）。

完成以上步驟后就可以在index.js中編寫云函數(shù)了吹泡。

簡(jiǎn)單的增刪查改

1.云函數(shù)的編寫：

云函數(shù)的編寫可以返回visual studio code中進(jìn)行爆哑，上面新建的云函數(shù)如果你仔細(xì)觀察就可以發(fā)現(xiàn)在云函數(shù)入口函數(shù)那里已經(jīng)返回了用戶的openid、appid這些信息队贱，不過(guò)這些暫時(shí)不會(huì)用到柱嫌。

接下來(lái)演示的僅僅是對(duì)我們之前數(shù)據(jù)庫(kù)的數(shù)據(jù)進(jìn)行簡(jiǎn)單的查詢刪除和修改操作慎式，如果想要了解更多操作和用法，可以查閱微信云開(kāi)發(fā)文檔掌眠。

首先打開(kāi)statics/functions文件夾下我們創(chuàng)建的demo/index.js文件蓝丙，先刪除云函數(shù)入口函數(shù)里面的內(nèi)容渺尘。

如下所示说敏，添加云函數(shù)代碼：

需要注意的是云函數(shù)的初始化環(huán)境也就是cloud.init里面的env屬性是需要在云函數(shù)配置內(nèi)添加的盔沫。打開(kāi)云開(kāi)發(fā)控制面板医咨，點(diǎn)擊云函數(shù)找到我們之前創(chuàng)建的名稱為demo那條云函數(shù)架诞，點(diǎn)擊右側(cè)配置項(xiàng)添加環(huán)境變量：

最后，別忘了在微信開(kāi)發(fā)者工具右鍵點(diǎn)擊你的demo云函數(shù)谴忧，上傳并部署到服務(wù)器角虫。

2.前端api的封裝：

上面的功課做完就意味著后端的增查刪工作已經(jīng)完成。在進(jìn)行前端頁(yè)面的展示之前撑蚌，需要做一點(diǎn)準(zhǔn)備工作上遥，為了更好的管理api争涌，或者說(shuō)在邏輯頁(yè)面使用api盡量地簡(jiǎn)潔美觀辣恋，這里需要對(duì)api的回調(diào)做下簡(jiǎn)單的封裝。

在util文件夾下新建api.js文件携狭，添加如下代碼：

3.前端頁(yè)面展示：

接下來(lái)就是很熟悉的前端渲染過(guò)程了，熟悉vue開(kāi)發(fā)流程的可以很快速編寫這套前端的增刪查邏輯稀并，過(guò)程我這里不再贅述了碘举，直接貼代碼：

最終的呈現(xiàn)的頁(yè)面效果如下：

至此，一套具備簡(jiǎn)單的增刪查前后端交互頁(yè)面的配置和編寫算是基本完成搁廓，后續(xù)程序的邏輯編寫也是在這套模板上進(jìn)行的擴(kuò)充設(shè)計(jì)引颈。接下來(lái)這里將會(huì)詳細(xì)的介紹博客小程序的各個(gè)業(yè)務(wù)邏輯的編寫。