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

陳怡婧，鄭曉溪，李芳

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

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

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

文章編號(hào)：1009-3044（2022）32-0051-04

1 概述

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

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

2 校園二手交易平臺(tái)的設(shè)計(jì)

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

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

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

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

2.2 開發(fā)模式

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

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

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

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

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

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

3.1 首頁(yè)頁(yè)面

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

3.2 分類頁(yè)面

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

3.3 發(fā)布頁(yè)面

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

3.4 我的頁(yè)面

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

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

4.1 騰訊地圖API

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

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

4.2 Promise對(duì)象解決異步問題

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

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

4.3 瀑布流式布局

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

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

5 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

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