基于微信小程序的校园导览系统设计与实现

2022-04-24陈锦

河北软件职业技术学院学报 2022年1期

陈锦

（泉州经贸职业技术学院信息技术系，福建泉州 362000）

0 引言

目前，大部分高校校园仍采用平面导游图引导，存在导览功能单一、地图识别性低以及内容更新滞后等问题。此外，室外导览标识牌需要定期更新及维护需消耗大量的费用[1]。因此，本文依托微信小程序“无需安装、触手可及、用完即走”的应用理念，开发一套校园导览系统来解决以上问题。

目前导览系统的开发技术已经趋于成熟，这些导览系统大部分采用基于物联网技术结合GPS定位技术，也有采用红外线定位、蓝牙定位以及RFID 定位的[2]。随着智能终端的大规模普及，使得移动端技术在导览系统的应用成为了可能。上海海事大学临港校区校园的基于Android 平台的校园导览软件，通过Google maps 提供的接口实现电子地图功能，实现了自我定位、位置查找、路径查询等[2]。中山大学开发了基于Android 和Apple IOS的校园个人化行动导览系统，对用户提供地图浏览定位、中大校园资讯查询与导航、路径导引等功能。此外，还有云南师范大学呈贡校区的基于百度地图API 的校园综合信息服务系统[2]。

1 系统功能分析

校园导览系统主要包括下述功能。

（1）用户授权登录。点击授权登录，提示用户授权，获取到用户信息，并将用户信息存储在后台服务器。

（2）学院简介。以轮播图和文字信息对学院进行总体介绍。

（3）导览详情。获取校园各分类场所的地点信息，并在地图上进行标注，选中某地点可以进行路线导航。

（4）语音讲解。可以播放所选地点的解说音频，为用户获取校园信息提供多种形式。

（5）自动定位。在地图上显示用户位置坐标。

（6）路线导航。打开导览地图，以用户当前位置作为起始点，所选位置作为目标地，规划出一条最短线路。

（7）用户反馈。当用户使用小程序碰到问题时，可提交用户反馈，并查看反馈列表。

系统的功能用例如图1 所示。

图1 系统功能用例图

2 知晓云的配置

知晓云是个好用、顺手的小程序后端云服务。它免去了小程序开发中服务器搭建、域名备案、数据接口开发、线上运维等繁琐流程，可以使开发者专注于业务逻辑的实现。本系统利用知晓云平台来搭建后端服务器，具体配置流程如下所述。

（1）SDK 插件的引用。在知晓云平台上下载SDK 插件，然后在小程序的app.json 文件中加入对插件的引用[4]，代码如下：

"plugins"：{

"sdkPlugin"：{

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

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

}

（2）SDK 的初始化。通过初始化SDK，知晓云服务可以验证当前的小程序是否有效合法。在app.js 文件中通过以下代码进行初始化[4]。

App（{

onLaunch：function（）{

wx.BaaS = requirePlugin（'sdkPlugin'）

let clientID = '21e25b97c67df2af99a3' //clientID 为在控制台中创建的应用的ID 号

wx.BaaS.ini（tclientID）

}

}）

（3）进入知晓云的控制台，点击创建的应用，在应用的文件管理模块中，上传小程序中用到的所有校园图片。

（4）在应用的数据管理模块如图2 所示，创建school 表和map 表，school 表用来存储学校的信息，包含id、schoolName、englishName、images 等字段，其中images 是一个字符串数组，包含一组学校的风景图地址，地址来源于文件模块中上传的图片路径。map 表用来存储所有分类标记点的信息，包含id、title、category、longitude、latitude、description、logo、images、audio 等字段。

图2 数据管理模块

（5）在应用的内容管理模块中，添加校园简介富文本内容。

3 系统设计与实现

该系统主要由授权登录、导览引导、学院简介、校园导览服务、导览详情、地点导航、用户反馈等模块组成。下面对主要功能模块的实现进行详细介绍。

3.1 导览引导页

校园导览引导页面由背景图、两个引导图标和学院的logo 构成，点击“经贸简介”图标可跳转至校园简介页，点击“逛逛经贸”可跳转至地点详情页。该页面的主要功能是实现页面的跳转，可通过在wxml 文件中添加navigator 组件并设置url 属性指定要跳转的页面路径来实现，也可通过给图标绑定点击事件，在事件函数中调用wx.navigate－To（Object object）API 实现。笔者采用第一种方式实现，部分关键代码如下：

3.2 学院简介页

该页面以轮播图的方式展示校园的风景图和学院介绍，并在页面上添加“地图导航”图标，点击图标可跳转至地点详情页。界面如图3 所示。

图3 学院简介页

该页面是通过获取数据项和内容库中的校园简介来渲染页面内容。实现步骤如下[5]所述。

3.2.1 获取school 数据表中的数据项

通过tableName 实例化一个TableObject 对象来操作数据表，然后通过指定recordID（记录ID）执行来获取相应的记录[4]，进而获取到记录的数据项，并将数据项设置到页面的data 属性中。在js文件的onLoad 生命周期函数中通过编写以下代码来实现：

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

let recordID = '60e577f15557466430f367f5'//指定要记录ID

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

school.get（recordID）.then（res => { //返回的res 参数中包含数据表中各数据项的信息

this.setData（{

schoolName：res.data.schoolName，//获取学校名称

englishName：res.data.englishName，//获取学校英文名称

imgUrls：res.data.images //获取一组风景图

}）}

3.2.2 获取内容库中校园简介的内容详情，并渲染页面内容

内容库中存放的校园简介是富文本，小程序默认不支持html 格式内容显示，因此需要用小程序的富文本解析组件wxParse 解析html 内容。先在小程序项目中导入第三方组件wxParse，接着通过内容库的ID 号（contentGroupID）实例化一个ContentGroup 对象，然后通过指定富文本的ID 号（richTextID）执行获取内容详情，最后在视图层通过template 绑定html 内容。部分关键代码如下：

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 //获取校园简介的内容详情

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

3.3 校园导览服务页

该页面能够显示校园各场所的分布情况，点击分类标签可显示该分类下所有相关地点的位置及图片，点击底部可滚动视图区域的地点图片可跳转至校园导览详情页查看该地点的详情信息，界面如图4 所示。页面实现步骤如下所述。

图4 校园导览服务页

3.3.1 获取某一分类下所有标记点数据

通过tableName 实例化一个TableObject 对象，操作该对象即对表进行操作，接着示例化一个Query 对象，在该对象上添加查询条件，部分关键代码如下[5]：

//自定义getCategory 方法根据传入的分类名返回查询结果

getCategory（name，cb）{

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

let Map = new wx.BaaS.TableObject（table－Name）;//根据表名获取表对象Map

et query = new wx.BaaS.Query（）;//创建一个查询对象query

query.in（'category'，[name]）; //给query 设置查询条件

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

}） //在map 表中依据查询条件查找数据并通过cb 回调函数返回结果

}

3.3.2 在地图上显示获取的标记点位置

根据表中记录的某分类下标记点的经纬度在地图上定位标记点的位置。具体实现步骤：先根据用户选择的地点分类（config.CATEGORY）去查询map 表，返回与该分类的所有地点信息并保存在merchantsData 数组中；接着遍历merchantsData 数组，取出各地点的标记信息，存入marker 对象中，并为每个marker 对象设置定位图标，将所有的marker 对象添加至markers 数组中；最后将markers数组绑定到视图层map 组件的markers 属性上。部分关键代码如下[5]：

var category = e.currentTarget.dataset.category;//获取用户当前点击的地点分类

this.setData（{

activeCategory：category //

}）

this.getCategory （this.data.activeCategory，function（res）{ //根据所选分类查询map 表

let merchantsData = res.data.objects//返回地点信息保存至merchantsData 数组

//遍历merchants 数组，获取某分类下所有地点的标记点信息，存入markers 数组

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 给标记点绑定触发事件

当用户点击地图上的标记点定位图标时，可切换成激活图标，并更新底部可滚动视图区域滚动条的位置。给map 组件设置bindmarkertap 属性绑定并点击标记点触发事件，在点击事件中获取markerId，遍历markers 数组，判断是否有与markerId 相同的标记点，如果有，则将该标记点的图标进行切换。部分关键代码如下[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";

}

获取当前分类下所有标记点的数据merchantsData，遍历merchantsData，如果标记点ID 与点击事件中获取到的markerId 相同，则将scrollview 组件的scroll-left 属性值设置成该标记点的索引号乘以一个子元素的宽度[5]。

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

if（item.markid == markerId） {

scrollLeft = index*150;

3.4 校园导览详情页

校园导览详情页以轮播图的方式展示所选择地点的风景图和详细介绍，点击页面上语音播放按钮触发siteExplain 函数，该函数通过创建一个InnerAudioContext 实例，设置src 属性为指定地点的讲解音频地址，再调用InnerAudioContext 对象的play（）和pause（）方法控制音频的播放和暂停。点击页面上的导航图标，可调用wx.openLocation－API 打开微信内置地图查看所在位置并进行路线的导航。