基于微信云開發的校園二手交易平臺小程序的設計與實現

陳怡婧，鄭曉溪，李芳

摘要：基于微信開發者工具搭建校園二手交易平臺小程序，利用云開發，完整地實現了二手交易平臺各類基本功能。并對其中的關鍵問題進行了介紹。其特色功能包括：留言、回復信息、商品分類、關鍵詞查找、根據定位選擇附近高校等，滿足校內二手交易的需求，提升閑置物品的利用率，建立賣家與買家的信任關系，實現可靠的二手商品交易。

關鍵詞：微信；二手交易平臺；微信開發者工具；云開發；小程序

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2022）32-0051-04

1 概述

隨著經濟的迅速發展，人民生活水平日益提高，高校學生的消費水平大幅提升[1]。許多大學生可能會購買大量可以臨時使用的物品或只能使用幾次的物品，大學生對閑置物品的交易需求越來越多，這些閑置物品不能被合理利用，棄之可惜。為了改變這一現狀，二手交易這一方案被提出。

在傳統方式下，校園內閑置物品交換多通過“二手交易”微信群或者相應的論壇實現，但這些方式存在許多弊端。例如：無法進行二手物品分類、賣出的商品無法及時下架。當用戶想要修改商品價格時只能通過重新發布商品的方式進行調整。相較于傳統的校園二手交易方式，微信小程序具有“觸手可及，用完即走”的特點，方便了消費者與賣家實時關注商品動態信息，便于用戶進行二手交易。特別是2018年起，微信官方推出了云開發的功能，云開發弱化了后端的概念，提供了云存儲、云函數和云數據庫三大功能，并提供了大量開發相關的API。開發者無須搭建服務器即可實現類似后端的功能，便于開發者專注于前端核心業務的開發，大大縮短了應用開發周期，方便用戶的使用。利用微信小程序的開發優勢，結合校園活動的獨特性以及高校學生對校園二手平臺物品交易的需求，設計針對高校師生的校園二手交易平臺，以有效解決大學校園閑置物品的處理問題。

2 校園二手交易平臺的設計

根據大量研究調查發現，市面上現有的二手交易平臺，主要以網站或是App為主。這類系統大多缺少第三方商品檢驗的環節，交易的閑置物品的質量和品質全部建立在買家與賣家的信任之上，如果不是面對面進行交易很容易出現物品質量參差不齊的情況。根據觀察發現，在校大學生近期熱衷于將二手商品信息發布在各類微信群里，在微信群中完成交易，這種方式不利于商品的曝光，如果想要購買到心意的產品會花費大量的時間來查找。

結合高校師生對閑置物品交易的需求及微信平臺的優勢，開發了基于微信開發者工具在線校園二手交易平臺。賣家可以在系統上傳或管理他的閑置物品，買家可以通過分類、搜索找到自己喜歡的物品。買家可以針對定位查看到附近的商品，實現校內二手交易，達到共同利益、互利共贏的目的。

2.1 微信小程序系統架構

微信小程序的架構主要包含兩部分，視圖層View和邏輯層App Service，其中視圖層可能包含多個。視圖層主要用于渲染頁面，邏輯層用來進行數據請求、結構調用以及一些邏輯處理，這兩項工作分別在兩個線程里面進行。視圖層使用WebView進行渲染，在該線程中，wxml語言通過編譯生成JS，執行JS生成函數用來構建虛擬DOM，這一過程還需要數據支撐，如圖1所示。邏輯層使用JSCore維持運行，運行在另一個WebView線程中，即JS執行引擎線程。系統層的JsBridge是視圖層和邏輯層進行通信的橋梁，邏輯層會將數據的變化通知給視圖層，隨之視圖層會根據變化觸發頁面更新，與此同時，邏輯層會收到視圖層要觸發的事件，并進行業務處理，如圖2所示。

2.2 開發模式

系統采用小程序云開發平臺模式，云開發模式是原生的Serverless云服務，繼承于小程序控制臺，這種開發模式通過弱化后端和運維的概念，為開發者提供了微信服務支持和原生云端支持。Serverless架構包含兩塊：函數即服務和后端即服務。前者為開發提供了計算能力，后端包含對象存儲、數據庫、緩存服務等，如圖3所示。云開發的核心能力主要有云存儲、云數據庫、云函數、云調用、HTTP API。

ServerLess實現計算托管服務，用戶將代碼提交到平臺上進行托管，與此同時需要上傳一些配置文件，這些配置文件預先設定了觸發源，即定義了在什么事件下代碼才會運行。當事件沒有到來之前，云函數平臺僅僅執行代碼和配置文件的存儲，當事件觸發到來的時候，云函數平臺才會真正啟動一個函數實例，也就意味著一個計算單元被啟動，如圖4所示。

2.3 數據庫設計

小程序中的數據主要包括商品數據、個人信息數據、留言板數據、買家操作數據。根據數據流動關系，項目在云數據庫共設置七張表，分別是用戶表、商品表、加入購物車表、收藏表、購買表、發布表、留言表，如圖5所示。

3 系統模塊功能介紹

項目主要由首頁、分類、發布、我的，四個主頁面構成。首頁頁面主要進行二手商品的展示，分類頁面設有八個模塊，對應八類二手物品，發布頁面主要進行二手商品的發布，我的頁面主要關于個人信息、個人買賣情況的記錄，下面詳細介紹該項目在設計過程中各頁面的功能。

3.1 首頁頁面

用戶進入小程序后首先會進入首頁，頁面上方以輪播圖的方式顯示三張圖片，為了節省空間，圖片存儲在云端，不占小程序空間，下方通過云數據庫存儲的二手商品信息，調用接口，返回結果置前端進行渲染。首頁頁面主要展示二手商品信息，包括商品的名稱、售價、封面圖、發布地點。

3.2 分類頁面

分類頁面主要是針對不同商品進行分類歸納，小程序將二手商品分為8個類別，可供用戶根據類別選擇自己的去求商品，通過大類篩選后進入二級搜索頁面。

3.3 發布頁面

發布頁面主要供賣家使用，進行商品發布。賣家在發布頁面獲取用戶手機圖片的功能以完成二手商品信息的上傳。

3.4 我的頁面

我的頁面主要展示了個人信息、個人買賣情況。如果用戶是首次登錄該小程序，那么系統會檢測用戶是否進行授權，如果進行了授權就不會再提示用戶授權登錄，用戶可通過我的頁面查看發布的商品、買到的商品、收藏的商品，除此之外還能進行個人信息修改，點擊我的主頁還可跳轉到個人詳細信息頁面。

4 關鍵問題的解決

4.1 騰訊地圖API

騰訊地圖API 是基于騰訊位置服務，為開發者免費提供的應用程序接口，提供了開放式的API，支持多種接入方式，如web端的Java Script、手機App端的Android SDK等[2]。騰訊地圖API包括MVC類，可以將業務模型與控制器的實現代碼分離[3]，從而使相同的程序能夠使用不一樣的表現模式。本文通過騰訊API獲取用戶的經度和緯度，精準根據用戶的地理位置查找出用戶附近的高校可供用戶選擇，從而將交易范圍擴大到全國各高校。

本文主要通過調用騰訊地圖API，調用wx.getLocation獲取用戶當前位置經緯度，并調用騰訊地圖API（qqmapsdk.reverseGeocoder）進行逆地址解析，獲取到用戶當前所在位置的城市及周邊區域，代碼實現如圖7。

4.2 Promise對象解決異步問題

由于Java Script的異步運行機制，經常出現數據在未完成當前語句塊的處理，就會被下一語句塊調用，導致數據讀取、寫入錯誤。為解決這個問題，本文使用了Java Script的Promise對象，通過其then方法，為Promise實例添加狀態改變時的回調函數，catch方法用于指定發生錯誤時的回調函數，以同步操作的流程將異步操作表現出來，從而避免了數據讀取錯誤以及隨著回調增加導致代碼嵌套層次相應增加[4]。

本文對Promise對象進行二次封裝，封裝后wechat.js文件如圖8，將小程序的異步請求接口統一，并且對異步請求的功能接口分布更加明確，使得程序的可讀性能夠大大提升，并提供了良好的錯誤處理邏輯，可以使通過云函數從數據庫中取得的數據能夠得到正確的處理。Promise運行前后對比[5]如圖9所示。

4.3 瀑布流式布局

由于小程序的主頁展示以圖片+關鍵信息為主，隨著商品展示的數據信息逐漸繁多復雜，如何使用戶瀏覽頁面獲取信息更為有效、直觀，成為商品展示頁面的重要設計標準。因此本文在商品展示頁面采用瀑布流式布局，在保證信息傳達及頁面秩序的有效性的同時[6]，兼顧用戶順暢的視覺流程、情境化的瀏覽體驗、人性化的交互設計。

本文通過flex彈性布局實現瀑布流式布局，主要通過在wxml中將最外層的元素設置為橫向排列，即：display： flex，將flex-flow設置為column wrapshe使其換行，并設置height填充高度來容納子元素。

5 結束語

基于云開發平臺所搭建的易物校園二手交易平臺小程序，將閑置資源再利用概念的實施擴大化、普遍化，旨在幫助大學生合理調配資源的同時，方便自己的生活。眼下，隨著共享經濟的不斷發展，多角度地為社會經濟的發展賦予了新的動能，除此之外共享商業模式也在不斷滲透大學校園，而基于微信小程序的易物校園二手交易平臺的出現正好符合共享經濟的理念。同時國家大力提倡節能環保，勤儉節約，該項目讓校園中閑置的二手物品流通起來產生效益，有效地避免了舊物或舊書的浪費， 大力提倡了在校園內落實舊物利用、環保節約的生活理念，從而實現交易雙方的共贏。

參考文獻：

[1] 歐國立，王睿哲.我國分享經濟快速發展面臨的困境與對策[J].經濟縱橫，2017（10）：54-59.

[2] 楊凱.騰訊地圖API在Joomla中的應用研究[J].科技廣場，2016（4）：21-23.

[3] 代慶梅.淺析JavaScript MVC框架在Web開發中的應用[J].電腦知識與技術，2014，10（10）：2242-2245.

[4] 鄧森泉，楊海波.Promise方式實現Node.js應用的實踐[J].計算機系統應用，2017，26（4）：218-223.

[5] 李沛熹，朱曉君，姜建，等.基于微信小程序的校園二手書籍交易平臺設計與實現[J].電腦知識與技術，2021，17（23）：57-59，67.

[6] Wang M Y，Tang D L.Waterfall Flow vs. Fixed Grid Webpage Layout Design – The Effects Depend on the Zhong-Yong Thinking Style[M].Springer，Cham，2017.

【通聯編輯：謝媛媛】