基于微信小程序的智慧旅游城市設(shè)計(jì)與實(shí)現(xiàn)

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

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

0 引言

隨著社會(huì)經(jīng)濟(jì)水平的不斷提高，越來越多的人開始選擇在空閑時(shí)間里去旅游放松、旅游社交等。對(duì)于城市來說，旅游作為一種休閑娛樂活動(dòng)已經(jīng)成為城市經(jīng)濟(jì)發(fā)展中不可或缺的重要組成部分。但在旅游過程中容易發(fā)生不了解相關(guān)城市的旅游信息、旅游目標(biāo)不明確等而導(dǎo)致一些問題，如漏去了景點(diǎn)、不了解當(dāng)?shù)匚幕?、沒有吃到特色美食等。因此本文基于微信小程序開發(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ì)，客戶端為微信小程序，使用WXML、WXSS、JavaScript 和Less 等進(jìn)行構(gòu)建[7]；后端使用Java 語言，使用Spring Boot 框架進(jìn)行搭建；數(shù)據(jù)庫使用MySQL，采用MyBatis-Plus 進(jìn)行便捷化配置[2,4]?；镜南到y(tǒng)架構(gòu)如圖1 所示。

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

■1.2 功能模塊

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

1.2.1 個(gè)人中心模塊

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

1.2.2 主頁模塊

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

1.2.3 城市切換模塊

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

1.2.4 商品詳情模塊

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

1.2.5 購物車模塊

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

1.2.6 訂單模塊

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

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

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

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

表2 商品詳情表

表3 商品訂單表

表4 訂單詳情表

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

■3.1 小程序主頁

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

圖2 小程序主頁頁面

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

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

■3.2 特色文化頁面

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

圖3 特色文化頁面

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

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

■3.3 城市切換功能界面

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

圖4 獲取位置信息圖

圖5 城市選擇圖

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

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

■3.4 商品模塊

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

圖6 商品分類展示頁面

圖7 商品詳情頁面

圖8 購物車頁面

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

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

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

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

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

其核心實(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è)人中心頁面

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

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

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

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

3 總結(jié)

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