基于微信小程序的AI 智能云路向導的設計與實現

郭晨晨，李佳虎，李雙，張慧娥（通信作者）

（西安思源學院電子信息工程學院，陜西西安，710038）

0 引言

九月是收獲的季節，各大高校迎來了新生力量，全國各地的學生來到新校園，開啟人生的新階段。為了更快的熟悉新環境，學校進行的周密報道的安排，老生帶隊順利的完成了入學報道，可是想獨自瀏覽一下學校的美景，熟悉校園的整體布局，拿著學校準備的紙質地圖，還是經常找不到地方。除了新生外，學校經常會承接一些社會考試，這些考生對校園不熟悉，經常有找不到考場的現象。微信小程序（Wechat Mini Program），是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用[1]。所以開發一款校園導航微信小程序是非常有必要的。不需要下載安裝軟件，新生和考生只需要掃碼，就可以在校園隨心所欲的暢游，更加深入的了解校園的每一個重要角落。

1 功能設計

■1.1 總體功能

智能云路向導小程序的主要功能模塊是思源簡介和了解思源。思源簡介包含輪播圖展示、校園介紹和路徑規劃的功能。了解思源包含12 個景點導航、當前定位、景點列表、地點搜索和路徑規劃功能。其中定位功能通過騰訊地圖中的地圖組件和定位接口進行定位；路徑規劃通過高德地圖進行。總體功能如圖1 所示。

圖1 總體功能圖

■1.2 頁面設計

該小程序共有5 個頁面，小程序首頁、簡介頁、校園導覽頁、路徑規劃頁、和搜索頁面。

首頁中有思源簡介和了解思源兩個鏈接按鈕。

簡介頁分為兩部分，第一部分以輪播的形式顯示校園的三張校園圖片，第二部分顯示學校的簡介，在兩部分中間添加路徑規劃按鈕，單擊此按鈕進入路徑導航頁面。

校園導覽頁分為三部分，第一部分是導航欄，包含景點、行政樓、平階教室、教學樓等8 個選項卡，第二部分是地圖展示，在地圖中標識了學校的所有的建筑、景點，運動場所等，并且添加了搜索和規劃路徑按鈕，第三部分是每一個導航按鈕下的具體景觀列表，列表中包含圖片、文件和規劃路徑。

路徑規劃頁利用騰訊地圖和高德地圖的Key 進行路徑規劃，顯示起點和終點并進行路徑導航[3]。

搜索頁面通過在文本框中輸入景點、建筑或場所的名稱，點擊搜索按鈕，在頁面下方顯示搜索結果，可以進行路徑規劃[4]。

■1.3 數據設計

微信小程序數據以json 格式進行顯示，在該小程序中創建一個公共資源文件夾，在文件夾下創建一個數據文件，包含學校簡介數據和學校地圖數據。學校簡介數據包含學校縮寫，學校全名，首頁圖片地址，分享時展示圖片的地址，學校的經度，緯度，簡介圖片和簡介。學校地圖數據以數組形式展示，數組元素是8 個選項卡，每個選項卡中又包括景點名稱，比例大小設置和具體數據，其中具體數據以數組的形式列出，具體每個元素中記錄的信息有名稱，經度、緯度、圖標、寬度、高度、圖片和描述。在數據文件中通過module.exports 語句暴露簡介和地圖數據。這樣在其它的邏輯文件中通過require 就可以利用公共數據了。

該小程序中存儲的部分建筑和主要場所的經度(longitude)和緯度(latitude)內容表1 所示。

表1

2 功能實現

在小程序的主體文件中設置公共的內容，App.json中設置pages 頁和window 的樣式，在App.js 中編寫onlaunch 回調函數，獲取學校的地理位置信息，并通過自定義函數載入本地數據在加載網絡數據。在Untils 公共文件夾下創建地圖的邏輯處理文件amap-wx.js;創建配置文件config.js，包含調試模式開關，調試模式下只調用本地數據，學校名稱和高德路線規劃密鑰，并且需要把其域名加入為request 合法域名[2]。

■2.1 頁面實現

該小程序共有5 個頁面，小程序首頁、簡介頁、校園導覽頁、路徑規劃頁、和搜索頁面。通過.wxml 文件進行基本組件的布局，通過.wxss 文件進行頁面的樣式設置。小程序首頁的.wxml 中主要使用view 組件作為容器組件，navigator 組件實現跳轉，text 組件實現文字顯示；小程序首頁如圖2 所示。

圖2 小程序首頁圖

簡介頁通過swiper、block 和swipter-item 組件結合來實現輪播圖和學校簡介信息，使用導航組件鏈接到輪播圖中顯示的建筑的路徑規劃。

校園導覽頁放在view 容器組件中，第一部分使用scroll-view 和lable 組件完成選項卡的實現，scroll-view組件中的每一項，即選項卡的顯示內容使用view 組件；外層view 組件的樣式主要設置寬度為100%，scroll-view 組件的滾動方向設置為橫向，內部view 組件的寬度需要計算；第二部分使用map 組件顯示地圖，使用經度和緯度屬性顯示標記，并且取得當前定位；第三部分使用button 組件顯示后端景觀數，使用scroll-view 組件顯示具體景點和建筑物列表，通過在scroll-view 組件中插入view 組件，使用循環語句實現后端數據的顯示，使用navigator 組件實現路徑規劃和搜索跳轉。

路徑規劃頁使用map 地圖組件，需要顯示當前位置的經緯度、標記、路線等屬性，使用cover-view 組件顯示后端的距離。

搜索頁面主要使用表單的input 組件來展現搜索框，需要設置綁定事件和占位符屬性等，使用view 和navigator組件顯示搜到的結果和導航鏈接。

■2.2 邏輯功能實現

邏輯功能通過.js 文件來實現，首頁.js 文件主要包含數據集，onload 函數；校園導覽頁的.js 文件主要包含數據集，onload 函數，自定義定位函數，單擊函數。定位函數的主要代碼如下：

校園導覽頁如圖3 所示。

圖3 校園導覽頁

2.2.1 路徑規劃功能

路徑規劃的邏輯文件.js的主要內容包含聲明應用實例，請求公共文件，page 頁面中又數據集，onload 函數，自定義路徑函數，路徑規劃如圖4 所示。計算路徑長度的代碼如下：

圖4 路徑規劃圖

2.2.2 搜索功能

從搜索框中獲取文本，判斷數據是否為空，如果不為空，在地圖中所標注的圖標中找相應名稱，把對應數據存入需要顯示的數據中，包含圖標，文字，路徑規劃鏈接。搜索功能圖如圖5 所示。

圖5 搜索功能圖

3 系統測試

微信小程序測試主要包含權限測試，功能測試，兼容性測試和易用性測試。權限測試從未授權微信登錄小程序、已授權微信登錄小程序兩個方面測試；按照功能模塊、數據流向、同一功能不同的入口有效性和交互性檢查對導航小程序的功能進行測試，系統可以正常進行學校簡介，用戶的實時定位，目的地導航，路徑規劃，目的地搜索的完整過程。兼容性測試主要包含操作系統兼容性，屏幕兼容性和微信兼容性，通過對Android 操作系統和iOS 系統進行測試，屏幕的正確顯示性測試，在不同微信版本上進行了測試；通過導航、功能入口、上下級進入與返回和字體、圖片、動態交互效果對易用性進行了測試。在測試期間中間出現過bug，都一一排除。并且在2021 年9 月新生報到期，已經推廣使用，學生在使用過程中沒有卡頓現象，運行效果良好，用戶體現滿意度高。

4 結束語

基于微信小程序的智能云路向導以西安思源學院為實例進行開發，主要實現了校園介紹、路線規劃、當前定位、重要場所及建筑的列表，搜索等功能，使用微信小程序的通用組件和map 組件完成前端頁面布局，利用JavaScript 腳本語言實現邏輯處理，調用騰訊地圖接口獲取當前定位，通過獲取高德地圖的key 完成路徑規劃。該智能云路向導幫助新生熟悉校園環境，讓新生更快更準確的到達目的地，為參加考試的考生準確導航到考場。該程序的不足之處是沒有實現語音導航功能，后期將進一步完善語音導航功能。該導航系統有很廣泛的推廣價值，可以推廣到景區，游客只要掃碼就該程序就可以實現電子導游的功能。