基于微信小程序的校園導覽系統(tǒng)設(shè)計與實現(xiàn)

陳 錦

（泉州經(jīng)貿(mào)職業(yè)技術(shù)學院 信息技術(shù)系，福建 泉州 362000）

0 引言

目前，大部分高校校園仍采用平面導游圖引導，存在導覽功能單一、地圖識別性低以及內(nèi)容更新滯后等問題。此外，室外導覽標識牌需要定期更新及維護需消耗大量的費用[1]。因此，本文依托微信小程序“無需安裝、觸手可及、用完即走”的應(yīng)用理念，開發(fā)一套校園導覽系統(tǒng)來解決以上問題。

目前導覽系統(tǒng)的開發(fā)技術(shù)已經(jīng)趨于成熟，這些導覽系統(tǒng)大部分采用基于物聯(lián)網(wǎng)技術(shù)結(jié)合GPS定位技術(shù)，也有采用紅外線定位、藍牙定位以及RFID 定位的[2]。隨著智能終端的大規(guī)模普及，使得移動端技術(shù)在導覽系統(tǒng)的應(yīng)用成為了可能。上海海事大學臨港校區(qū)校園的基于Android 平臺的校園導覽軟件，通過Google maps 提供的接口實現(xiàn)電子地圖功能，實現(xiàn)了自我定位、位置查找、路徑查詢等[2]。中山大學開發(fā)了基于Android 和Apple IOS的校園個人化行動導覽系統(tǒng)，對用戶提供地圖瀏覽定位、中大校園資訊查詢與導航、路徑導引等功能。此外，還有云南師范大學呈貢校區(qū)的基于百度地圖API 的校園綜合信息服務(wù)系統(tǒng)[2]。

1 系統(tǒng)功能分析

校園導覽系統(tǒng)主要包括下述功能。

（1）用戶授權(quán)登錄。點擊授權(quán)登錄，提示用戶授權(quán)，獲取到用戶信息，并將用戶信息存儲在后臺服務(wù)器。

（2）學院簡介。以輪播圖和文字信息對學院進行總體介紹。

（3）導覽詳情。獲取校園各分類場所的地點信息，并在地圖上進行標注，選中某地點可以進行路線導航。

（4）語音講解。可以播放所選地點的解說音頻，為用戶獲取校園信息提供多種形式。

（5）自動定位。在地圖上顯示用戶位置坐標。

（6）路線導航。打開導覽地圖，以用戶當前位置作為起始點，所選位置作為目標地，規(guī)劃出一條最短線路。

（7）用戶反饋。當用戶使用小程序碰到問題時，可提交用戶反饋，并查看反饋列表。

系統(tǒng)的功能用例如圖1 所示。

圖1 系統(tǒng)功能用例圖

2 知曉云的配置

知曉云是個好用、順手的小程序后端云服務(wù)。它免去了小程序開發(fā)中服務(wù)器搭建、域名備案、數(shù)據(jù)接口開發(fā)、線上運維等繁瑣流程，可以使開發(fā)者專注于業(yè)務(wù)邏輯的實現(xiàn)。本系統(tǒng)利用知曉云平臺來搭建后端服務(wù)器，具體配置流程如下所述。

（1）SDK 插件的引用。在知曉云平臺上下載SDK 插件，然后在小程序的app.json 文件中加入對插件的引用[4]，代碼如下：

"plugins"：{

"sdkPlugin"：{

"version"："3.21.0"，//插件版本號

"provider"："wxc6b86e382a1e3294" //插 件提供者的ID 號

}

}

（2）SDK 的初始化。通過初始化SDK，知曉云服務(wù)可以驗證當前的小程序是否有效合法。在app.js 文件中通過以下代碼進行初始化[4]。

App（{

onLaunch：function（）{

wx.BaaS = requirePlugin（'sdkPlugin'）

let clientID = '21e25b97c67df2af99a3' //clientID 為在控制臺中創(chuàng)建的應(yīng)用的ID 號

wx.BaaS.ini（tclientID）

}

}）

（3）進入知曉云的控制臺，點擊創(chuàng)建的應(yīng)用，在應(yīng)用的文件管理模塊中，上傳小程序中用到的所有校園圖片。

（4）在應(yīng)用的數(shù)據(jù)管理模塊如圖2 所示，創(chuàng)建school 表和map 表，school 表用來存儲學校的信息，包含id、schoolName、englishName、images 等字段，其中images 是一個字符串數(shù)組，包含一組學校的風景圖地址，地址來源于文件模塊中上傳的圖片路徑。map 表用來存儲所有分類標記點的信息，包含id、title、category、longitude、latitude、description、logo、images、audio 等字段。

圖2 數(shù)據(jù)管理模塊

（5）在應(yīng)用的內(nèi)容管理模塊中，添加校園簡介富文本內(nèi)容。

3 系統(tǒng)設(shè)計與實現(xiàn)

該系統(tǒng)主要由授權(quán)登錄、導覽引導、學院簡介、校園導覽服務(wù)、導覽詳情、地點導航、用戶反饋等模塊組成。下面對主要功能模塊的實現(xiàn)進行詳細介紹。

3.1 導覽引導頁

校園導覽引導頁面由背景圖、兩個引導圖標和學院的logo 構(gòu)成，點擊“經(jīng)貿(mào)簡介”圖標可跳轉(zhuǎn)至校園簡介頁，點擊“逛逛經(jīng)貿(mào)”可跳轉(zhuǎn)至地點詳情頁。該頁面的主要功能是實現(xiàn)頁面的跳轉(zhuǎn)，可通過在wxml 文件中添加navigator 組件并設(shè)置url 屬性指定要跳轉(zhuǎn)的頁面路徑來實現(xiàn)，也可通過給圖標綁定點擊事件，在事件函數(shù)中調(diào)用wx.navigate－To（Object object）API 實現(xiàn)。筆者采用第一種方式實現(xiàn)，部分關(guān)鍵代碼如下：

3.2 學院簡介頁

該頁面以輪播圖的方式展示校園的風景圖和學院介紹，并在頁面上添加“地圖導航”圖標，點擊圖標可跳轉(zhuǎn)至地點詳情頁。界面如圖3 所示。

圖3 學院簡介頁

該頁面是通過獲取數(shù)據(jù)項和內(nèi)容庫中的校園簡介來渲染頁面內(nèi)容。實現(xiàn)步驟如下[5]所述。

3.2.1 獲取school 數(shù)據(jù)表中的數(shù)據(jù)項

通過tableName 實例化一個TableObject 對象來操作數(shù)據(jù)表，然后通過指定recordID（記錄ID）執(zhí)行來獲取相應(yīng)的記錄[4]，進而獲取到記錄的數(shù)據(jù)項，并將數(shù)據(jù)項設(shè)置到頁面的data 屬性中。在js文件的onLoad 生命周期函數(shù)中通過編寫以下代碼來實現(xiàn)：

let tableName = 'school' //指定要操作的表名

let recordID = '60e577f15557466430f367f5'//指定要記錄ID

let school = new wx.BaaS.TableObject（table－Name）//獲取操作的表對象

school.get（recordID）.then（res => { //返回的res 參數(shù)中包含數(shù)據(jù)表中各數(shù)據(jù)項的信息

this.setData（{

schoolName：res.data.schoolName，//獲取學校名稱

englishName：res.data.englishName，//獲取學校英文名稱

imgUrls：res.data.images //獲取一組風景圖

}）}

3.2.2 獲取內(nèi)容庫中校園簡介的內(nèi)容詳情，并渲染頁面內(nèi)容

內(nèi)容庫中存放的校園簡介是富文本，小程序默認不支持html 格式內(nèi)容顯示，因此需要用小程序的富文本解析組件wxParse 解析html 內(nèi)容。先在小程序項目中導入第三方組件wxParse，接著通過內(nèi)容庫的ID 號（contentGroupID）實例化一個ContentGroup 對象，然后通過指定富文本的ID 號（richTextID）執(zhí)行獲取內(nèi)容詳情，最后在視圖層通過template 綁定html 內(nèi)容。部分關(guān)鍵代碼如下：

var WxParse = require（"../../utils/wx－Parse/wxParse.js"）

let MyContentGroup = new wx.BaaS.ContentGroup（contentGroupID）

MyContentGroup.getContent （richTextID）.then（res => {

var content = res.data.content //獲取校園簡介的內(nèi)容詳情

WxParse.wxParse（'content'，'html'，content，this）；//解析校園簡介富文本

3.3 校園導覽服務(wù)頁

該頁面能夠顯示校園各場所的分布情況，點擊分類標簽可顯示該分類下所有相關(guān)地點的位置及圖片，點擊底部可滾動視圖區(qū)域的地點圖片可跳轉(zhuǎn)至校園導覽詳情頁查看該地點的詳情信息，界面如圖4 所示。頁面實現(xiàn)步驟如下所述。

圖4 校園導覽服務(wù)頁

3.3.1 獲取某一分類下所有標記點數(shù)據(jù)

通過tableName 實例化一個TableObject 對象，操作該對象即對表進行操作，接著示例化一個Query 對象，在該對象上添加查詢條件，部分關(guān)鍵代碼如下[5]：

//自定義getCategory 方法根據(jù)傳入的分類名返回查詢結(jié)果

getCategory（name，cb）{

let tableName='map' //保存表名

let Map = new wx.BaaS.TableObject（table－Name）;//根據(jù)表名獲取表對象Map

et query = new wx.BaaS.Query（）;//創(chuàng)建一個查詢對象query

query.in（'category'，[name]）; //給query 設(shè)置查詢條件

Map.setQuery（query）.find（）.then（res => cb（res），err => {

}） //在map 表中依據(jù)查詢條件查找數(shù)據(jù)并通過cb 回調(diào)函數(shù)返回結(jié)果

}

3.3.2 在地圖上顯示獲取的標記點位置

根據(jù)表中記錄的某分類下標記點的經(jīng)緯度在地圖上定位標記點的位置。具體實現(xiàn)步驟：先根據(jù)用戶選擇的地點分類（config.CATEGORY）去查詢map 表，返回與該分類的所有地點信息并保存在merchantsData 數(shù)組中；接著遍歷merchantsData 數(shù)組，取出各地點的標記信息，存入marker 對象中，并為每個marker 對象設(shè)置定位圖標，將所有的marker 對象添加至markers 數(shù)組中；最后將markers數(shù)組綁定到視圖層map 組件的markers 屬性上。部分關(guān)鍵代碼如下[5]：

var category = e.currentTarget.dataset.category;//獲取用戶當前點擊的地點分類

this.setData（{

activeCategory：category //

}）

this.getCategory （this.data.activeCategory，function（res）{ //根據(jù)所選分類查詢map 表

let merchantsData = res.data.objects//返回地點信息保存至merchantsData 數(shù)組

//遍歷merchants 數(shù)組，獲取某分類下所有地點的標記點信息，存入markers 數(shù)組

merchants.forEach（（item）=> {let marker = {

id：item.markid，

latitude：item.latitude，

longitude：item.longitude，

iconPath： '../../resource/images/' +categoryID +'.png'，

width：32，

height：40

}

markers.push（marker）

3.3.3 給標記點綁定觸發(fā)事件

當用戶點擊地圖上的標記點定位圖標時，可切換成激活圖標，并更新底部可滾動視圖區(qū)域滾動條的位置。給map 組件設(shè)置bindmarkertap 屬性綁定并點擊標記點觸發(fā)事件，在點擊事件中獲取markerId，遍歷markers 數(shù)組，判斷是否有與markerId 相同的標記點，如果有，則將該標記點的圖標進行切換。部分關(guān)鍵代碼如下[5]：

let markerId = e.markerId; //獲取所點擊地圖圖標的ID 號

markers.forEach（item=>{

if（item.id == markerId）{

item.iconPath = "../../resource/images/" + categoryID + "choosed.png";

}else{

item.iconPath = "../../resource/images/" + categoryID + ".png";

}

獲取當前分類下所有標記點的數(shù)據(jù)merchantsData，遍歷merchantsData，如果標記點ID 與點擊事件中獲取到的markerId 相同，則將scrollview 組件的scroll-left 屬性值設(shè)置成該標記點的索引號乘以一個子元素的寬度[5]。

merchantsData.forEach（（item，index）=>{

if（item.markid == markerId） {

scrollLeft = index*150;

3.4 校園導覽詳情頁

校園導覽詳情頁以輪播圖的方式展示所選擇地點的風景圖和詳細介紹，點擊頁面上語音播放按鈕觸發(fā)siteExplain 函數(shù)，該函數(shù)通過創(chuàng)建一個InnerAudioContext 實例，設(shè)置src 屬性為指定地點的講解音頻地址，再調(diào)用InnerAudioContext 對象的play（）和pause（）方法控制音頻的播放和暫停。點擊頁面上的導航圖標，可調(diào)用wx.openLocation－API 打開微信內(nèi)置地圖查看所在位置并進行路線的導航。

4 結(jié)語

本文從當前高校校園導覽的實際問題出發(fā)，以泉州經(jīng)貿(mào)職業(yè)技術(shù)學院為例，利用微信小程序MINA 框架技術(shù)，依托第三方平臺知曉云作為后臺服務(wù)器，設(shè)計并實現(xiàn)了一套校園導覽系統(tǒng)，為新生和校外人員提供了高效便捷的導覽服務(wù)。實踐表明，該平臺具有方便快捷、靈活實用的特點。