基于微信小程序的智慧旅游城市設計與實現

朱喬裕，孫浩天，陳劉煒，張會影，楊玉環

（南京工業大學 浦江學院，江蘇南京，211200）

0 引言

隨著社會經濟水平的不斷提高，越來越多的人開始選擇在空閑時間里去旅游放松、旅游社交等。對于城市來說，旅游作為一種休閑娛樂活動已經成為城市經濟發展中不可或缺的重要組成部分。但在旅游過程中容易發生不了解相關城市的旅游信息、旅游目標不明確等而導致一些問題，如漏去了景點、不了解當地文化、沒有吃到特色美食等。因此本文基于微信小程序開發了一款智慧旅游小程序，旨在幫助旅行者更方便快捷地獲得各個城市的旅游攻略和相關信息[1,5,6]。

1 系統設計

■1.1 系統架構

本系統使用MVC 架構進行設計，客戶端為微信小程序，使用WXML、WXSS、JavaScript 和Less 等進行構建[7]；后端使用Java 語言，使用Spring Boot 框架進行搭建；數據庫使用MySQL，采用MyBatis-Plus 進行便捷化配置[2,4]。基本的系統架構如圖1 所示。

圖1 系統架構圖

■1.2 功能模塊

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

1.2.1 個人中心模塊

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

1.2.2 主頁模塊

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

1.2.3 城市切換模塊

用戶選擇城市時可以選擇系統自動設置所在城市，即通過微信小程序內部的API 通過獲取用戶的經緯度確定用戶所在的城市，也可以在頁面上方手動選擇城市。在切換城市頁面中系統置頂十二個熱門城市方便用戶選擇，也可在頁面左側根據城市的拼音開頭字母進行城市的查找。

1.2.4 商品詳情模塊

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

1.2.5 購物車模塊

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

1.2.6 訂單模塊

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

2 數據庫設計

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

表1 傳統文化表

表2 商品詳情表

表3 商品訂單表

表4 訂單詳情表

3 功能實現

■3.1 小程序主頁

該頁面主要由上方的所選城市及搜索框，中部的商品分類區和“特色文化一點通”以及下方的主頁、商品分類、購物車、個人中心這三部分組成。用戶可以在該頁面選擇不同的城市，根據自己的需要搜索或選擇相應的商品。想了解當地的特色文化也可以在“特色文化一點通”中進行。主頁頁面如圖2 所示。

圖2 小程序主頁頁面

其核心實現代碼如下：

使用了async await 語法處理異步請求，用于獲取商品的大類圖片，當index<5 時，將其存儲到bigTypeList_row1 數組中；當index>=5 時，將其存儲到bigTypeList_row2 數組中。

■3.2 特色文化頁面

該頁面主要展示了所選城市的特色文化。在首頁特色文化一點通中選擇相應的特色文化后即可進入特色文化頁面，該界面對特色文化進行了圖片展示并附上了詳細的介紹。特色文化頁面如圖3 所示。

圖3 特色文化頁面

其核心實現代碼如下：

根據文化產品的id 向后端發送異步請求從而獲取文化產品的詳細信息，進而在前端頁面進行渲染。

■3.3 城市切換功能界面

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

圖4 獲取位置信息圖

圖5 城市選擇圖

其核心實現代碼如下：

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

■3.4 商品模塊

該模塊主要包括商品分類展示頁面、商品詳情頁面以及購物車頁面。用戶在搜索或對商品模塊進行選擇后首先會進入商品分類展示界面，該頁面具有多個類別的商品，用戶可以在這里進行商品的挑選，選定一個商品后會進入商品詳情頁面。該頁面向用戶展示了商品的圖片、價格、詳情介紹以及顧客評論等，用戶可以選擇將其加入購物車或直接購買。直接購買或將所有商品加入購物車完畢后進行購買會進入購物車界面，該界面會展示所有要購買的商品，用戶確認后即可進行購買。具體實現頁面如圖6，圖7，圖8 所示。

圖6 商品分類展示頁面

圖7 商品詳情頁面

圖8 購物車頁面

其核心實現代碼如下：

在點擊結算按鈕功能中，會從緩存中獲取用戶的地址和商品總數量進行判斷，如若用戶的地址為空或者商品總數量為0，則進行相應的模態提示；否則跳轉到付款頁面。

■3.5 個人訂單模塊

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

圖9 個人訂單頁面

其核心實現代碼如下：

給tab 綁定一個點擊事件，從而進行邏輯上的跳轉和標題的切換。其中，當index==0 時，切換到全部訂單；index==1 時，切換到待付款；index==2 時，切換到待收貨；index==3 時，切換到退貨/退款。

■3.6 個人中心頁面

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

圖10 個人中心頁面

其核心實現代碼如下：

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

3 總結

本項目借助當下高速發展的互聯網技術，基于微信小程序這一平臺設計并實現了“悅覽旅游”小程序來幫助廣大旅行者朋友們更方便快捷的查找旅游信息，了解特色文化，暢享當地美食，也希望能夠為各個旅游城市的繁榮發展貢獻一份薄力。