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

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

0 引言

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

1 功能設(shè)計

■1.1 總體功能

智能云路向?qū)〕绦虻闹饕δ苣K是思源簡介和了解思源。思源簡介包含輪播圖展示、校園介紹和路徑規(guī)劃的功能。了解思源包含12 個景點(diǎn)導(dǎo)航、當(dāng)前定位、景點(diǎn)列表、地點(diǎn)搜索和路徑規(guī)劃功能。其中定位功能通過騰訊地圖中的地圖組件和定位接口進(jìn)行定位；路徑規(guī)劃通過高德地圖進(jìn)行。總體功能如圖1 所示。

圖1 總體功能圖

■1.2 頁面設(shè)計

該小程序共有5 個頁面，小程序首頁、簡介頁、校園導(dǎo)覽頁、路徑規(guī)劃頁、和搜索頁面。

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

簡介頁分為兩部分，第一部分以輪播的形式顯示校園的三張校園圖片，第二部分顯示學(xué)校的簡介，在兩部分中間添加路徑規(guī)劃按鈕，單擊此按鈕進(jìn)入路徑導(dǎo)航頁面。

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

路徑規(guī)劃頁利用騰訊地圖和高德地圖的Key 進(jìn)行路徑規(guī)劃，顯示起點(diǎn)和終點(diǎn)并進(jìn)行路徑導(dǎo)航[3]。

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

■1.3 數(shù)據(jù)設(shè)計

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

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

表1

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

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

■2.1 頁面實(shí)現(xiàn)

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

圖2 小程序首頁圖

簡介頁通過swiper、block 和swipter-item 組件結(jié)合來實(shí)現(xiàn)輪播圖和學(xué)校簡介信息，使用導(dǎo)航組件鏈接到輪播圖中顯示的建筑的路徑規(guī)劃。

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

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

搜索頁面主要使用表單的input 組件來展現(xiàn)搜索框，需要設(shè)置綁定事件和占位符屬性等，使用view 和navigator組件顯示搜到的結(jié)果和導(dǎo)航鏈接。

■2.2 邏輯功能實(shí)現(xiàn)

邏輯功能通過.js 文件來實(shí)現(xiàn)，首頁.js 文件主要包含數(shù)據(jù)集，onload 函數(shù)；校園導(dǎo)覽頁的.js 文件主要包含數(shù)據(jù)集，onload 函數(shù)，自定義定位函數(shù)，單擊函數(shù)。定位函數(shù)的主要代碼如下：

校園導(dǎo)覽頁如圖3 所示。

圖3 校園導(dǎo)覽頁

2.2.1 路徑規(guī)劃功能

路徑規(guī)劃的邏輯文件.js的主要內(nèi)容包含聲明應(yīng)用實(shí)例，請求公共文件，page 頁面中又?jǐn)?shù)據(jù)集，onload 函數(shù)，自定義路徑函數(shù)，路徑規(guī)劃如圖4 所示。計算路徑長度的代碼如下：

圖4 路徑規(guī)劃圖

2.2.2 搜索功能

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

圖5 搜索功能圖

3 系統(tǒng)測試

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

4 結(jié)束語

基于微信小程序的智能云路向?qū)б晕靼菜荚磳W(xué)院為實(shí)例進(jìn)行開發(fā)，主要實(shí)現(xiàn)了校園介紹、路線規(guī)劃、當(dāng)前定位、重要場所及建筑的列表，搜索等功能，使用微信小程序的通用組件和map 組件完成前端頁面布局，利用JavaScript 腳本語言實(shí)現(xiàn)邏輯處理，調(diào)用騰訊地圖接口獲取當(dāng)前定位，通過獲取高德地圖的key 完成路徑規(guī)劃。該智能云路向?qū)椭律煜ば@環(huán)境，讓新生更快更準(zhǔn)確的到達(dá)目的地，為參加考試的考生準(zhǔn)確導(dǎo)航到考場。該程序的不足之處是沒有實(shí)現(xiàn)語音導(dǎo)航功能，后期將進(jìn)一步完善語音導(dǎo)航功能。該導(dǎo)航系統(tǒng)有很廣泛的推廣價值，可以推廣到景區(qū)，游客只要掃碼就該程序就可以實(shí)現(xiàn)電子導(dǎo)游的功能。