朱喬裕，孫浩天，陳劉煒，張會(huì)影，楊玉環(huán)

（南京工業(yè)大學(xué) 浦江學(xué)院，江蘇南京，211200）

0 引言

隨著社會(huì)經(jīng)濟(jì)水平的不斷提高，越來(lái)越多的人開(kāi)始選擇在空閑時(shí)間里去旅游放松、旅游社交等。對(duì)于城市來(lái)說(shuō)，旅游作為一種休閑娛樂(lè)活動(dòng)已經(jīng)成為城市經(jīng)濟(jì)發(fā)展中不可或缺的重要組成部分。但在旅游過(guò)程中容易發(fā)生不了解相關(guān)城市的旅游信息、旅游目標(biāo)不明確等而導(dǎo)致一些問(wèn)題，如漏去了景點(diǎn)、不了解當(dāng)?shù)匚幕?、沒(méi)有吃到特色美食等。因此本文基于微信小程序開(kāi)發(fā)了一款智慧旅游小程序，旨在幫助旅行者更方便快捷地獲得各個(gè)城市的旅游攻略和相關(guān)信息[1,5,6]。

1 系統(tǒng)設(shè)計(jì)

■1.1 系統(tǒng)架構(gòu)

本系統(tǒng)使用MVC 架構(gòu)進(jìn)行設(shè)計(jì)，客戶(hù)端為微信小程序，使用WXML、WXSS、JavaScript 和Less 等進(jìn)行構(gòu)建[7]；后端使用Java 語(yǔ)言，使用Spring Boot 框架進(jìn)行搭建；數(shù)據(jù)庫(kù)使用MySQL，采用MyBatis-Plus 進(jìn)行便捷化配置[2,4]?；镜南到y(tǒng)架構(gòu)如圖1 所示。

圖1 系統(tǒng)架構(gòu)圖

■1.2 功能模塊

基于微信小程序的智慧旅游城市主要分為6 個(gè)模塊，分別是：個(gè)人中心模塊，主頁(yè)模塊，城市切換模塊，商品詳情模塊，購(gòu)物車(chē)模塊，訂單模塊。各模塊的具體功能如下：

1.2.1 個(gè)人中心模塊

該模塊主要為用戶(hù)提供小程序登錄、查看個(gè)人信息、我的訂單、收貨地址管理、聯(lián)系客服和意見(jiàn)反饋等功能。其中“小程序登錄”支持微信授權(quán)登錄，即彈出微信授權(quán)請(qǐng)求，用戶(hù)可以選擇同意或拒絕授權(quán)登錄；在“我的訂單”中用戶(hù)可以查看待付款、待收貨、退款/退貨和全部訂單這四部分信息。

1.2.2 主頁(yè)模塊

用戶(hù)登錄后會(huì)直接進(jìn)入主頁(yè)，在該模塊用戶(hù)可以在頁(yè)面中看到各個(gè)類(lèi)別的選擇模塊，如：美食、景點(diǎn)、酒店、非物質(zhì)文化遺產(chǎn)、導(dǎo)游、特色文化、樂(lè)園、商場(chǎng)、充電寶以及歷史故事等。用戶(hù)可以根據(jù)自己的需要來(lái)進(jìn)行選擇，也可以在搜索框中進(jìn)行查詢(xún)。

1.2.3 城市切換模塊

用戶(hù)選擇城市時(shí)可以選擇系統(tǒng)自動(dòng)設(shè)置所在城市，即通過(guò)微信小程序內(nèi)部的API 通過(guò)獲取用戶(hù)的經(jīng)緯度確定用戶(hù)所在的城市，也可以在頁(yè)面上方手動(dòng)選擇城市。在切換城市頁(yè)面中系統(tǒng)置頂十二個(gè)熱門(mén)城市方便用戶(hù)選擇，也可在頁(yè)面左側(cè)根據(jù)城市的拼音開(kāi)頭字母進(jìn)行城市的查找。

1.2.4 商品詳情模塊

用戶(hù)經(jīng)過(guò)選擇或搜索后會(huì)先進(jìn)入商品展示界面，包括了每一個(gè)商品模塊的具體信息，如美食模塊包括火鍋和自助餐等，用戶(hù)可在該頁(yè)面中選擇自己心儀的商品。選擇具體的某一商品后會(huì)進(jìn)入商品詳情界面，該界面包括了商品的圖片、具體價(jià)格、詳情介紹以及顧客評(píng)論。用戶(hù)可以選擇將商品加入購(gòu)物車(chē)或立即購(gòu)買(mǎi)。如果在選購(gòu)過(guò)程中出現(xiàn)問(wèn)題也可以在頁(yè)面左下角聯(lián)系客服解決。

1.2.5 購(gòu)物車(chē)模塊

在該模塊中用戶(hù)可以對(duì)加入購(gòu)物車(chē)中的商品進(jìn)行數(shù)量的增減，也可以將商品從購(gòu)物車(chē)中刪除。在收貨信息中需要用戶(hù)填寫(xiě)姓名、聯(lián)系方式、收貨地址等信息。在確定需要購(gòu)買(mǎi)后進(jìn)行支付訂單頁(yè)面的跳轉(zhuǎn)。

1.2.6 訂單模塊

用戶(hù)可以在該模塊中查看全部訂單、待付款訂單、待收貨訂單以及退款/退貨訂單。每一個(gè)訂單都包括了訂單編號(hào)、訂單價(jià)格和訂單日期這三部分內(nèi)容。其中訂單日期精確到時(shí)分秒。

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

“悅覽旅游”小程序主要使用MySQL 數(shù)據(jù)庫(kù)建立數(shù)據(jù)表，設(shè)置列名、數(shù)據(jù)類(lèi)型、是否為主鍵等數(shù)據(jù)信息，重要數(shù)據(jù)庫(kù)表包括傳統(tǒng)文化表、商品詳情表、商品訂單表、訂單詳情表等[3,8]。具體數(shù)據(jù)庫(kù)表信息如表1～4 所示。

表1 傳統(tǒng)文化表

表2 商品詳情表

表3 商品訂單表

表4 訂單詳情表

3 功能實(shí)現(xiàn)

■3.1 小程序主頁(yè)

該頁(yè)面主要由上方的所選城市及搜索框，中部的商品分類(lèi)區(qū)和“特色文化一點(diǎn)通”以及下方的主頁(yè)、商品分類(lèi)、購(gòu)物車(chē)、個(gè)人中心這三部分組成。用戶(hù)可以在該頁(yè)面選擇不同的城市，根據(jù)自己的需要搜索或選擇相應(yīng)的商品。想了解當(dāng)?shù)氐奶厣幕部梢栽凇疤厣幕稽c(diǎn)通”中進(jìn)行。主頁(yè)頁(yè)面如圖2 所示。

圖2 小程序主頁(yè)頁(yè)面

其核心實(shí)現(xiàn)代碼如下：

使用了async await 語(yǔ)法處理異步請(qǐng)求，用于獲取商品的大類(lèi)圖片，當(dāng)index<5 時(shí)，將其存儲(chǔ)到bigTypeList_row1 數(shù)組中；當(dāng)index>=5 時(shí)，將其存儲(chǔ)到bigTypeList_row2 數(shù)組中。

■3.2 特色文化頁(yè)面

該頁(yè)面主要展示了所選城市的特色文化。在首頁(yè)特色文化一點(diǎn)通中選擇相應(yīng)的特色文化后即可進(jìn)入特色文化頁(yè)面，該界面對(duì)特色文化進(jìn)行了圖片展示并附上了詳細(xì)的介紹。特色文化頁(yè)面如圖3 所示。

圖3 特色文化頁(yè)面

其核心實(shí)現(xiàn)代碼如下：

根據(jù)文化產(chǎn)品的id 向后端發(fā)送異步請(qǐng)求從而獲取文化產(chǎn)品的詳細(xì)信息，進(jìn)而在前端頁(yè)面進(jìn)行渲染。

■3.3 城市切換功能界面

在進(jìn)入主頁(yè)時(shí)系統(tǒng)會(huì)詢(xún)問(wèn)用戶(hù)是否允許提供位置信息，若提供則主頁(yè)顯示用戶(hù)所在城市；若不提供則需要用戶(hù)在主頁(yè)上方進(jìn)行選擇。城市選擇頁(yè)面提供了12 個(gè)熱門(mén)城市方便用戶(hù)選擇，也在右側(cè)提供了各個(gè)城市的名稱(chēng)首字母來(lái)幫助其他城市的旅行用戶(hù)。相應(yīng)頁(yè)面如圖4，圖5 所示。

圖4 獲取位置信息圖

圖5 城市選擇圖

其核心實(shí)現(xiàn)代碼如下：

給熱門(mén)城市列表綁定一個(gè)點(diǎn)擊事件，將所點(diǎn)擊的熱門(mén)城市保存到city 變量中，并跳轉(zhuǎn)返回首頁(yè)。

■3.4 商品模塊

該模塊主要包括商品分類(lèi)展示頁(yè)面、商品詳情頁(yè)面以及購(gòu)物車(chē)頁(yè)面。用戶(hù)在搜索或?qū)ι唐纺K進(jìn)行選擇后首先會(huì)進(jìn)入商品分類(lèi)展示界面，該頁(yè)面具有多個(gè)類(lèi)別的商品，用戶(hù)可以在這里進(jìn)行商品的挑選，選定一個(gè)商品后會(huì)進(jìn)入商品詳情頁(yè)面。該頁(yè)面向用戶(hù)展示了商品的圖片、價(jià)格、詳情介紹以及顧客評(píng)論等，用戶(hù)可以選擇將其加入購(gòu)物車(chē)或直接購(gòu)買(mǎi)。直接購(gòu)買(mǎi)或?qū)⑺猩唐芳尤胭?gòu)物車(chē)完畢后進(jìn)行購(gòu)買(mǎi)會(huì)進(jìn)入購(gòu)物車(chē)界面，該界面會(huì)展示所有要購(gòu)買(mǎi)的商品，用戶(hù)確認(rèn)后即可進(jìn)行購(gòu)買(mǎi)。具體實(shí)現(xiàn)頁(yè)面如圖6，圖7，圖8 所示。

圖6 商品分類(lèi)展示頁(yè)面

圖7 商品詳情頁(yè)面

圖8 購(gòu)物車(chē)頁(yè)面

其核心實(shí)現(xiàn)代碼如下：

在點(diǎn)擊結(jié)算按鈕功能中，會(huì)從緩存中獲取用戶(hù)的地址和商品總數(shù)量進(jìn)行判斷，如若用戶(hù)的地址為空或者商品總數(shù)量為0，則進(jìn)行相應(yīng)的模態(tài)提示；否則跳轉(zhuǎn)到付款頁(yè)面。

■3.5 個(gè)人訂單模塊

用戶(hù)可以在該模塊中查看個(gè)人訂單，包括全部訂單、待付款訂單、待收貨訂單以及退貨/退款訂單。每個(gè)訂單都包括三個(gè)部分，即訂單編號(hào)、訂單價(jià)格和訂單日期。具體頁(yè)面如圖9 所示。

圖9 個(gè)人訂單頁(yè)面

其核心實(shí)現(xiàn)代碼如下：

給tab 綁定一個(gè)點(diǎn)擊事件，從而進(jìn)行邏輯上的跳轉(zhuǎn)和標(biāo)題的切換。其中，當(dāng)index==0 時(shí)，切換到全部訂單；index==1 時(shí)，切換到待付款；index==2 時(shí)，切換到待收貨；index==3 時(shí)，切換到退貨/退款。

■3.6 個(gè)人中心頁(yè)面

該頁(yè)面展示了用戶(hù)的個(gè)人信息，如頭像，昵稱(chēng)等。用戶(hù)可以在該頁(yè)面進(jìn)行訂單的查看，包括待付款訂單、待收貨訂單、退款/退貨訂單以及全部訂單；還可以進(jìn)行個(gè)人收貨地址的管理，如添加、修改和刪除地址，以及聯(lián)系平臺(tái)客服，進(jìn)行意見(jiàn)反饋等。具體頁(yè)面如圖10所示。

圖10 個(gè)人中心頁(yè)面

其核心實(shí)現(xiàn)代碼如下：

通過(guò)調(diào)用wx.getStorageSync()接口從緩存中獲取用戶(hù)的個(gè)人信息保存到res 變量中，并將用戶(hù)的昵稱(chēng)和用戶(hù)的頭像渲染到前端頁(yè)面。

3 總結(jié)

本項(xiàng)目借助當(dāng)下高速發(fā)展的互聯(lián)網(wǎng)技術(shù)，基于微信小程序這一平臺(tái)設(shè)計(jì)并實(shí)現(xiàn)了“悅覽旅游”小程序來(lái)幫助廣大旅行者朋友們更方便快捷的查找旅游信息，了解特色文化，暢享當(dāng)?shù)孛朗?，也希望能夠?yàn)楦鱾€(gè)旅游城市的繁榮發(fā)展貢獻(xiàn)一份薄力。