基于微信云開發(fā)的校園二手交易平臺小程序的設(shè)計與實現(xiàn)

陳怡婧，鄭曉溪，李芳

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

關(guān)鍵詞：微信；二手交易平臺；微信開發(fā)者工具；云開發(fā)；小程序

中圖分類號：TP311? ? ? 文獻(xiàn)標(biāo)識碼：A

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

1 概述

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

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

2 校園二手交易平臺的設(shè)計

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

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

2.1 微信小程序系統(tǒng)架構(gòu)

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

2.2 開發(fā)模式

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

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

2.3 數(shù)據(jù)庫設(shè)計

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

3 系統(tǒng)模塊功能介紹

項目主要由首頁、分類、發(fā)布、我的，四個主頁面構(gòu)成。首頁頁面主要進行二手商品的展示，分類頁面設(shè)有八個模塊，對應(yīng)八類二手物品，發(fā)布頁面主要進行二手商品的發(fā)布，我的頁面主要關(guān)于個人信息、個人買賣情況的記錄，下面詳細(xì)介紹該項目在設(shè)計過程中各頁面的功能。

3.1 首頁頁面

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

3.2 分類頁面

分類頁面主要是針對不同商品進行分類歸納，小程序?qū)⒍稚唐贩譃?個類別，可供用戶根據(jù)類別選擇自己的去求商品，通過大類篩選后進入二級搜索頁面。

3.3 發(fā)布頁面

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

3.4 我的頁面

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

4 關(guān)鍵問題的解決

4.1 騰訊地圖API

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

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

4.2 Promise對象解決異步問題

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

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

4.3 瀑布流式布局

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

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

5 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

[4] 鄧森泉，楊海波.Promise方式實現(xiàn)Node.js應(yīng)用的實踐[J].計算機系統(tǒng)應(yīng)用，2017，26（4）：218-223.

[5] 李沛熹，朱曉君，姜建，等.基于微信小程序的校園二手書籍交易平臺設(shè)計與實現(xiàn)[J].電腦知識與技術(shù)，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.

【通聯(lián)編輯：謝媛媛】