十、小程序實戰

使用小程序完成一個二手信息站點與 WebApp 實現流程類型，只是部分內容使用了微信小程序特有的組件，例如微信登錄與 WebApp 略有差別，其它邏輯實現較為類似。我們先制作頁面，之后再實現功能。

由于之前已經完成了一個 Web 站點的編寫，在此為了節省閱讀成本，同樣重復的內容不再進行贅述。

10.1 完成小程序二手交易站點首頁開發

首先我們創建一個二手交易小程序程序：

創建完畢后添加一個頁面，作為小程序的登錄界面。該登錄界面需要授權微信賬戶直接進行登錄，在此我們就不需要額外的登錄頁和注冊頁了。

該頁面如下：

對象樹信息如下：

之后則是一個首頁信息，首頁比起 web 端站點更加簡易：

在頁面中直接添加了 for 循環組件，對象樹如下：

接下來是信息發布頁頁面：

信息發布頁頁面對象樹如下：

最后一個頁面則是商品詳情頁：

商品詳情頁對象樹如下：

10.2 完成小程序二手交易站點后臺開發

10.2.1 完成小程序二手交易站點微信登錄開發

在小程序中需要使用后臺對賬戶進行登錄，這時跟 web 端一樣，需要在后臺添加一個私有用戶組件：

添加了私有用戶組建后，我們需要在頁面的微信登錄按鈕上添加一個點擊事件；在這里需要注意，小程序授權微信用戶登錄一定要點擊按鈕后進行發起，否則將會出錯。

我們此時為登錄按鈕添加了點擊事件后，使用私有用戶對象進行發起小程序登錄操作，獲取用戶頭像與昵稱：

接下來為這個動作添加回調事件。在回調事件中，我們需要創建兩個文本變量存儲頭像與昵稱，并且跳轉到首頁：

此時即完成了登錄操作，若該賬戶沒有進行注冊將會自動進行注冊。

10.2.2 完成小程序二手交易站點微信首頁功能開發

首頁的功能包括數據獲取，數據獲取需要創建一個數據庫，該邏輯與 web 端實現一致：

接下來創建一個服務命名為獲取數據，此實現流程與 web 端實現一致，不在贅述，直接貼出服務邏輯：

該頁面還需一個對象變量，創建一個對象變量命名為商品數據，在商品數據中依舊創建與數據庫一致的字段：

隨后調取服務后設置該變量的值為數據庫返回的結果即可：

最后為商品信息行使用for循環組件進行循環遍歷，數據來源則是剛剛創建的對象變量：

再為接下來的數據綁定內容即可：

10.2.3 完成小程序二手交易站點微信信息發布頁功能開發

信息發布頁的圖片上傳實現與 web 端有所區別，我們先為選擇圖片按鈕添加事件。點擊圖片選擇按鈕后使用文件接口對象讀取本地圖片：

接著為該動作創建一個回調，創建一個變量命名為上傳圖片路徑，該變量用于獲取文件的臨時本地路徑，并且使用這個這個變量作為文件接口上傳的必要參數：

接著為上傳動作添加回調，創建一個文本變量命名為已上傳圖片路徑，將上傳得到的圖片 url 地址用于圖片顯示，并且記錄該 url 路徑到已上傳圖片路徑變量：

這樣就完成了基本的圖片上傳，接著為最后的信息提交創建一個服務：

發布信息的邏輯如下：

最后給發布按鈕添加事件調用該服務即可：

10.2.4 完成小程序二手交易站點詳情頁功能開發

詳情頁實現與 web 端詳情頁實現一致。添加一個服務用數據ID作為信息檢索條件，創建一個服務命名為某商品數據：

服務邏輯如下：

接著詳情頁添加事件為頁面加載時進行觸發：

觸發后調用某商品數據服務，依靠一個 id 作為參數進行檢索。此時我們創建一個變量為 數據ID：

隨后該頁面的頁面加載觸發事件邏輯則如下：

最后我們在首頁圖片中添加一個點擊事件，這個點擊事件將會設置 數據ID 變量的值為點擊圖片所對應的 ID 值即可：

最后為各個按鈕設置跳轉連接即可完成小程序的制作。