郭晨晨,李佳虎,李雙,張慧娥(通信作者)
(西安思源學(xué)院電子信息工程學(xué)院,陜西西安,710038)
九月是收獲的季節(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)航微信小程序是非常有必要的。不需要下載安裝軟件,新生和考生只需要掃碼,就可以在校園隨心所欲的暢游,更加深入的了解校園的每一個重要角落。
智能云路向?qū)〕绦虻闹饕δ苣K是思源簡介和了解思源。思源簡介包含輪播圖展示、校園介紹和路徑規(guī)劃的功能。了解思源包含12 個景點(diǎn)導(dǎo)航、當(dāng)前定位、景點(diǎn)列表、地點(diǎn)搜索和路徑規(guī)劃功能。其中定位功能通過騰訊地圖中的地圖組件和定位接口進(jìn)行定位;路徑規(guī)劃通過高德地圖進(jìn)行。總體功能如圖1 所示。
圖1 總體功能圖
該小程序共有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]。
微信小程序數(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
在小程序的主體文件中設(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]。
該小程序共有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)航鏈接。
邏輯功能通過.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 搜索功能圖
微信小程序測試主要包含權(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)滿意度高。
基于微信小程序的智能云路向?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)游的功能。