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

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

1、學習這件事情來不得一點虛假

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

So，忘掉翟XX吧！讓我們好好學習，跟著#技本功#，學點真材實料的東西~

-2019年第7期-

前 言

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

云開發(fā)是小程序為開發(fā)者提供的完整的云端支持。

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

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

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

當然是先看微信的官方文檔啦！查看地址：

https://dwz.cn/ioeWuJ9a

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

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

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

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

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

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

容量：2GB

QPS：30

同時連接數(shù)：20

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

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

集合限制：100個

單集合索引限制：10個

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

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

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

1、添加頁面：增加新菜名

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

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

本文分為兩部分：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Step4：編寫ajax方法

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

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

我們在unitl文件夾下面新建一個ajax.js文件。

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

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

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

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

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

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

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

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

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

代碼如下：

Step5：編寫增加頁面

在add文件夾下面增加相應文件:

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

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

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

下面我們編寫add.wxss文件進行頁面美化，請自己斟酌，筆者美化后增加頁面長這樣的：

下面我們進行測試，隨意輸入一下點擊保存。提示保存成功后查看云開發(fā)控制臺驗證是否保存成功。

總 結(jié)

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

總結(jié)

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

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