技本功丨收藏！斜槓青年與你共探微信小程序雲開發（下篇）

2019年2月26日，人們爲了一個杯子瘋了一天。

星巴克貓爪杯，一場已經與貓無關了的「聖盃戰爭「。網上的倒賣價格，已炒至近千元！

求而不得，舍而不能，得而不惜。這是人最大的悲哀。。。

因此，請珍惜如下內容，知識才是人生最大的財富！

前情回顧

技本功丨收藏！斜槓青年與你共探微信小程序雲開發（中篇）

在上一篇文章中咱們完成了首頁的編寫，目前基本的功能已經肯定了，本節咱們進行列表頁的編寫。列表頁比較簡單：將全部food列表展現出來，根據openid進行判斷是否展現刪除按鈕便可。用戶能夠刪除本身建立的記錄。

開發步驟 

新建頁面文件

編寫頁面wxml

編寫js

編寫樣式

測試

下面咱們開始進行列表頁的編寫。

編寫頁面wxml
match

約定好js中的數據爲foodlist，咱們對foodlist字段進行循環輸出便可：

另外有一個刪除按鈕根據條件渲染，即當前item的openid跟咱們正在使用小程序的用戶openid是否一致，一致的話咱們展現刪除按鈕供用戶操做便可。之因此這樣作是由於目前小程序不支持寫他人數據，關於小程序用戶權限值能夠參考下圖：

能夠看到管理端擁有絕對的讀寫權限，可是不支持用戶操做另外一用戶的數據，數據庫的操做能夠在小程序開發者工具中的雲開發工具中進行設置：

編寫js

寫完頁面的模版以後咱們就能夠進行js的編寫，js主要邏輯是：加載完成時調用雲開發api獲取全部food，提供刪除方法調用雲開發api進行刪除。涉及到的雲開發api有getCount獲取數據數量、get獲取數據、remove刪除記錄。

經過官方文檔咱們能夠看到remove函數的參數：

咱們須要記錄的引用來調用刪除函數，獲取某條記錄的引用咱們能夠經過doc函數獲取：

咱們能夠傳入記錄的id就能獲取這條記錄的引用，下面咱們實現具體的刪除方法delItem。刪除方法咱們只須要記錄的id便可進行刪除：

編寫好刪除方法後咱們編寫獲取全部數據記錄的方法，這裏僅僅用做演示獲取全部記錄，實際環境中仍是建議使用分頁特性分批次獲取數據。

使用get方法獲取數據默認最多獲取的是20條數據，所以要獲取全部數據咱們要結合count函數和skip函數進行遞歸來獲取集合全部數據：

一、首先咱們寫一個根據相應參數獲取數據的方法

1. 而後編寫一個調用findfood方法的用於遞歸的函數

1. 最後咱們編寫供js直接使用的getAllFood函數

在這個函數裏咱們使用getCount函數獲取集合數量，而後計算頁數，再根據頁數進行循環調用flag_pop函數便可。

編寫獲取全部數據方法後咱們就回到頁面的js編寫上，值得注意的是有一個雲函數須要調用，咱們有一個getUserInfo的方法來獲取用戶的openid，雲函數是微信服務端進行的私有鑑權，所以咱們部署上去後就可使用，獲取用戶openid的函數體是：

建立雲函數在根目錄下的cloudFunc|(環境名稱)右鍵而後點擊「新建nodeJS雲函數」便可建立雲函數模版，部署雲函數在雲函數的文件夾下右鍵而後選擇「建立並部署」便可。使用雲函數能夠經過wx.cloud.callFunction()調用，該函數在官方文檔中描述爲：

雲函數的具體使用能夠參考官方示例文檔：

https://dwz.cn/C95gkLVv

接下來咱們在頁面的js文件裏編寫一個出初始方法用於獲取全部數據，並在onShow的時候調用它。咱們首先使用getUserInfo雲函數獲取當前用戶的openid，而後再去獲取全部的數據。詳細代碼以下：

openid的做用主要是頁面上用於判斷是否顯示刪除按鈕，數據庫中的全部記錄都會有一個_openid字段，值是這條記錄的建立者的openid，當前小程序的使用用戶的openid跟記錄中的__openid字段相同才能夠進行刪除。

下面咱們在頁面的js中定義好刪除事件deletefood，刪除事件有模版傳過來一個記錄值的id，咱們使用deleteFood方法把參數也就是id傳給until中的delItem便可。deletefood方法實現以下：

所有完成後咱們就能在列表頁查看全部food了：

給這個頁面加上簡單的css以後就變成這樣的：

能夠看到我建立的「不加醋的糖醋里脊「能夠被刪除。

結 語

至此咱們的「吃什麼」小程序就開發完啦，首頁長這樣子：

集成了雲開發的添加，刪除特性，使用了一個簡單的雲函數，雖然簡單可是對於新手上手雲開發仍是頗有幫助的，小程序源碼開放在Github中，須要源碼的能夠自行下載：

https://github.com/topiniu/ea...