人設(shè)千萬種，“高危”的大概有兩種：好老公/老婆 & 學(xué)霸。

豬年第一瓜，演藝事業(yè)一帆風(fēng)順的翟XX，栽在了學(xué)霸的人設(shè)上，這件事深刻地教育了我們：

1、學(xué)習(xí)這件事情來不得一點(diǎn)虛假

2、學(xué)無止境，空杯心態(tài)

So，忘掉翟XX吧！讓我們好好學(xué)習(xí)，跟著#技本功#，學(xué)點(diǎn)真材實(shí)料的東西~

-2019年第7期-

前 言

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

云開發(fā)是小程序?yàn)殚_發(fā)者提供的完整的云端支持。

2、云開發(fā)能做什么？

開發(fā)者可以使用云開發(fā)進(jìn)行數(shù)據(jù)持久化（數(shù)據(jù)庫(kù)），保存文件（存儲(chǔ)）以及帶有天然鑒權(quán)特性的云函數(shù)。

3、怎么使用云開發(fā)？

當(dāng)然是先看微信的官方文檔啦！查看地址：

https://dwz.cn/ioeWuJ9a

云開發(fā)共提供了三種能力，分別是：

云函數(shù)：在云端運(yùn)行的代碼，微信私有協(xié)議天然鑒權(quán)，小程序隨時(shí)調(diào)用。

數(shù)據(jù)庫(kù)：云端JSON數(shù)據(jù)庫(kù)，小程序前端和云函數(shù)都可以進(jìn)行操作。

存儲(chǔ)：在小程序前端直接上傳/下載文件。

要開始使用云開發(fā)，需要先開通云開發(fā)環(huán)境，每個(gè)小程序賬號(hào)可以免費(fèi)創(chuàng)建兩個(gè)環(huán)境，目前小程序（2018.11.09）還沒有提供刪除環(huán)境的功能，所以建議先創(chuàng)建一個(gè)dev環(huán)境進(jìn)行日常的開發(fā)和測(cè)試。

云開發(fā)環(huán)境目前是免費(fèi)使用，且只有一種套餐，其中數(shù)據(jù)庫(kù)配額如下：

容量：2GB

QPS：30

同時(shí)連接數(shù)：20

讀操作次數(shù)：5萬/天

寫操作次數(shù)：3萬/天

集合限制：100個(gè)

單集合索引限制：10個(gè)

以上的配額滿足了一般個(gè)人開發(fā)者使用并且目前是免費(fèi)的，如果資源不夠的可以聯(lián)系微信團(tuán)隊(duì)進(jìn)行上調(diào)。

具體看這里：https://dwz.cn/vWxrz5Vr

本文使用云開發(fā)的數(shù)據(jù)庫(kù)特性來寫一個(gè)“吃什么”，該小程序具有下面幾個(gè)功能點(diǎn)：

1、添加頁(yè)面：增加新菜名

2、查看所有數(shù)據(jù)頁(yè)面：查看菜單并可以刪除菜品類目

3、首頁(yè)：隨機(jī)抽出一條數(shù)據(jù)

本文分為兩部分：

第1部分主要帶大家了解云開發(fā)的基本步驟和配置，從環(huán)境搭建到完成簡(jiǎn)單的菜品增加頁(yè)面；

第2部分帶大家了解云開發(fā)詳細(xì)使用和不足，從首頁(yè)到刪除頁(yè)面。

下面我們開始“吃什么”小程序的前期準(zhǔn)備工作。

Step1：創(chuàng)建云開發(fā)環(huán)境

1、在微信開發(fā)者工具中點(diǎn)擊云開發(fā)按鈕打開云開發(fā)控制臺(tái)，新建環(huán)境（目前一個(gè)賬號(hào)僅能創(chuàng)建兩個(gè)環(huán)境，環(huán)境之間相互隔離且目前不能刪除2018.10.23，建議先創(chuàng)建一個(gè)dev測(cè)試環(huán)境）。

開發(fā)控制臺(tái)在開發(fā)者工具中的入口

2、點(diǎn)擊數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)集合collection，（可把集合看成'表'）。

開發(fā)控制臺(tái)-數(shù)據(jù)庫(kù)tab

有了這兩個(gè)，我們就可以進(jìn)行基本的數(shù)據(jù)庫(kù)操作了。

為了讓每個(gè)用戶都可以看到彼此錄入的菜名，我們這里設(shè)置集合的權(quán)限為所有人都可讀。

Step2：搭建文件結(jié)構(gòu)

在根文件夾下面新建文件夾images、pages、style、unilt四個(gè)文件夾。完整的結(jié)構(gòu)如下圖：

結(jié)構(gòu)圖

其中app.js是微信生成的一個(gè)初始化js文件，app.json用于配置小程序路由等信息，app.wxss為全局css文件。project.config.json用于配置項(xiàng)目信息，包括根目錄、云函數(shù)目錄、項(xiàng)目設(shè)置以及項(xiàng)目名稱和appid等基礎(chǔ)信息。

我們頁(yè)面代碼寫在pages文件下，目前有新增add與首頁(yè)index兩個(gè)頁(yè)面，每個(gè)頁(yè)面包含 wxml、wxss和一個(gè)js文件。wxml寫頁(yè)面結(jié)構(gòu)，wxss寫樣式，js作為控制。

Step3：初始化數(shù)據(jù)庫(kù)連接

為了方便所有頁(yè)面引用數(shù)據(jù)庫(kù)對(duì)象且目前本小程序不需要操作額外的集合，所以在app.js里我們?cè)诔绦蚣虞d的時(shí)候初始化好數(shù)據(jù)庫(kù)連接。微信官方提供的示例是使用wx.cloud對(duì)象的init方法，接受一個(gè)json對(duì)象，json里填入我們環(huán)境id即可完成初始化。

env字段填寫自己云開發(fā)環(huán)境的環(huán)境id，在云開發(fā)控制臺(tái)-概覽可以找到。

traceUser選項(xiàng)表明是否追蹤用戶，開啟的時(shí)候我們可以在控制臺(tái)查看訪問數(shù)據(jù)庫(kù)的用戶信息。

初始化完成后我們連接到我們的數(shù)據(jù)庫(kù)，并創(chuàng)建一個(gè)全局的TB對(duì)象指向?qū)ood集合的引用。

然后將數(shù)據(jù)庫(kù)引用和集合引用賦給全局?jǐn)?shù)據(jù)的DB和TB。

這樣一來我們就可以在所有js里使用數(shù)據(jù)庫(kù)連接了，下面我們進(jìn)行ajax的編寫。

Step4：編寫ajax方法

為了方便所有頁(yè)面使用，我們將基本的增刪查功能單獨(dú)為一個(gè)文件，這樣在頁(yè)面的js里直接引用就可以了。

通用的ajax方法就是常見的增刪改查。說是ajax，其實(shí)只是調(diào)用微信的云開發(fā)接口，不需要我們手動(dòng)編寫ajax請(qǐng)求。常用的云開發(fā)數(shù)據(jù)庫(kù)api有獲取get、查詢where、刪除remove、獲取數(shù)量count、更新update以及分頁(yè)時(shí)使用的skip和limit函數(shù)。

我們?cè)趗nitl文件夾下面新建一個(gè)ajax.js文件。

我們根據(jù)目前情況先編寫一個(gè)獲取所有菜單的方法和一個(gè)添加新菜名的方法。

目前微信云開發(fā)的數(shù)據(jù)庫(kù)get方法只能每次最多20條數(shù)據(jù)。如果我們想獲取集合中的所有數(shù)據(jù)，就要聯(lián)合使用count、skip和limit函數(shù)進(jìn)行遞歸獲取。

count函數(shù)：返回指定條件下（where）的內(nèi)容數(shù)量。

skip函數(shù)：接受一個(gè)int類型的參數(shù)n，代表第n個(gè)結(jié)果后開始返回。

limit函數(shù)：接受一個(gè)int類型參數(shù)m，代表每次獲取m個(gè)item。

首先我們創(chuàng)建一個(gè)根據(jù)條件、頁(yè)碼和每頁(yè)大小獲取數(shù)據(jù)的方法：

這里我們使用了全局變量TB，使用skip、limit和get方法實(shí)現(xiàn)分頁(yè)獲取數(shù)據(jù)。

我們這里創(chuàng)建一個(gè)flag_pop的函數(shù)用于遞歸，通過page變量決定是否遞歸，page是通過count函數(shù)和size進(jìn)行計(jì)算而來的頁(yè)數(shù)，向前進(jìn)一確保數(shù)據(jù)不會(huì)遺漏。

下面我們來寫增加新數(shù)據(jù)方法，增加數(shù)據(jù)使用add方法即可，add方法接受一個(gè)對(duì)象數(shù)據(jù)，里面有data（要保存的數(shù)據(jù)）、success（成功后的執(zhí)行函數(shù)）、error（失敗后的執(zhí)行函數(shù)）。

代碼如下：

Step5：編寫增加頁(yè)面

在add文件夾下面增加相應(yīng)文件:

下面編寫增加頁(yè)面，目前寫一個(gè)輸入框和一個(gè)保存按鈕即可。

輸入框綁定handleInput方法獲取輸入，保存調(diào)用handleSave方法即可。完成后頁(yè)面是這樣的：

下面我們編寫add.js文件，包含一個(gè)輸入變量、handleInput函數(shù)和handleSave函數(shù)。我們?cè)趆andleSave函數(shù)中直接調(diào)用ajax.js中的addFood函數(shù)進(jìn)行數(shù)據(jù)保存：

下面我們編寫add.wxss文件進(jìn)行頁(yè)面美化，請(qǐng)自己斟酌，筆者美化后增加頁(yè)面長(zhǎng)這樣的：

下面我們進(jìn)行測(cè)試，隨意輸入一下點(diǎn)擊保存。提示保存成功后查看云開發(fā)控制臺(tái)驗(yàn)證是否保存成功。

總 結(jié)

添加頁(yè)面編寫好了以后我們就完成了這個(gè)小程序的前期工作了。云開發(fā)使用起來非常方便，添加一條記錄使用add方法即可，可以看到云開發(fā)的api設(shè)計(jì)的非常易于使用，我們將在第二部分使用其他的的云開發(fā)api進(jìn)行首頁(yè)和刪除功能的編寫。

總結(jié)

以上是生活随笔為你收集整理的技本功丨收藏！斜杠青年与你共探微信小程序云开发（上篇）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。