沒想到2018年“活下去”這個詞，會因爲萬科的一場發佈會而成爲無數企業主發自內心的吶喊，於是“開源節流”成了衆多公司2019主旋律~
我們改變不了大環境，但可以改變自己。如果現狀不能使自己滿意，至少知識可以改變生活。
前情回顧
技本功丨收藏！斜槓青年與你共探微信小程序雲開發（上篇）
在上文中我們一起體驗了一下最基本的小程序數據庫操作，編寫了我們“吃什麼”小程序的第一個頁面：增加頁面。
上篇講了小程序的基本信息以及基本的添加操作，本篇文章將進一步完成“吃什麼”小程序：添加首頁和列表頁面。
開發步驟：
新建頁面文件
編寫頁面wxml
編寫js
編寫樣式
測試
下面進行首頁的編寫。
首頁
首頁功能: 在所有菜單裏牀隨機抽取一個進行展示。
首先我們需要獲取所有的菜單，雲開發的限制每次請求最多隻能獲取表裏的20條數據：
因此我們要先獲取表裏記錄的數量計算出頁數，再根據頁數進行遞歸獲取到所有數據，最後使用random方法隨機獲取一條展示出來就OK了。
首先看一下官方api文檔提供的api接口。獲取記錄數量的是count函數：
獲取到數量後就可以計算出頁數然後根據頁數進行遞歸了，獲取數據的仍然是試用collection.get方法，詳細的方法定義可查閱官方文檔。
我們在until文件夾下的ajax文件裏編寫獲取一張表裏所有記錄的方法。
首先獲取要表裏記錄的數量：
再編寫一個根據where條件、頁碼、每頁記錄數量獲取表數據的方法方便進行遞歸：
然後編寫遞歸方法：
最後編寫首頁需要用到的獲取所有菜單的方法getAllFood：
通過上面的三個方法就可以獲取到菜單表的所有數據了，實際測試下訪問速度還是蠻快的。下面在首頁調用這個方法就可以展示出來所有菜單了，同時給一個選擇的按鈕，用戶點擊之後我們就隨機挑選一個菜名呈現出來即可。
在首頁我們一共需要三個按鍵：添加、所有菜品列表（可刪除自己創建的菜品）和一個選擇按鍵。我們首先定義一些顏色用於隨機挑選待會滾動顯示的菜品名稱顏色，具體的頁面需要用到的變量如下圖：
首先我們獲取所有菜品記錄，根據ajax文件裏編寫的getAllFood方法調用即可通過循環獲取到表裏的所有數據：（數據庫api獲取到的數據在network面板裏沒有記錄，建議使用其它方式驗證獲取的數據是否正確）
processList方法主要用於爲每個菜名添加上動畫效果，首頁的菜名需要有自己的滾動效果keyframe延遲時間、字體顏色、動畫持續時間、位置偏移數據（top、left）。主要用到隨機數生成方法rd：
rd方法生成一個介於n和m之間的隨機整數，我們菜名的展示的一些特性都依靠這個方法，下面是processList方法的實現：
編寫完成後我們在onShow函數裏調用getDataProcess方法進行數據渲染：
方法執行完之後我們的itemList就有了數據，下面編寫wxml文件進行顯示。wxml比較簡單，使用wx:for循環顯示出itemList裏面的數據，添加三個button:
添加和列表按鈕導航到各自的頁面，“吃什麼”按鈕綁定了choose方法，choose方法即是從所有菜品集合itemList裏隨機挑選出一個展示：
編寫完之後我們的首頁變成了這樣：
沒有樣式的首頁
下面我們加上樣式文件，滾動效果我們使用CSS的keyframe實現即可：
其他樣式比較簡單，index.wxss文件整體內容如下供參考：
整個完成後我們的首頁就編寫完成了，運行起來的效果如圖：
首頁效果
挑選
結 語
至此我們已經完成了首頁和添加頁面的編寫，其實一個個添加數據還是很麻煩的，對於雲開發的數據庫我們可以使用開發者工具直接進行json導入，只是json導入對jso格式有一定的要求，讀者可以按照下面這樣的格式進行擴展：
這種json文件的格式跟標準的json格式又一定區別的，比如沒有,號。我們在微信開發者工具的雲開發面板裏導入：
在雲開發面板導入json文件
導入數據之後數據庫裏就有一些初始數據了，導入的數據會自動追加上唯一標識符 _id字段，通過數據庫api添加的記錄不僅會記錄下 _id字段，還會加上添加用戶的 _openid，下一節我們編寫列表頁將會使用到openid來區分是否有刪除數據權限。
-本期完-
敬請期待下篇