2022年5月10日

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

作者 讲解员

随着移动应用技术的发展,微信小程序以“无需安装,用完即走”的优势,获得了大众的青睐。针对目前高校校园导览形式单一、室外导览维护费用高等问题,设计一款基于微信小程序的校园导览系统。该系统具有快速获取校园及周边信息、自动定位和路线导航的功能。系统应用MINA 框架技术进行开发,依托第三方知晓云平台作为一站式解决方案,免去了搭建后台服务器与域名备案的环节,提高了开发的效率。

目前,大部分高校校园仍采用平面导游图引导,存在导览功能单一、地图识别性低以及内容更新滞后等问题。此外,室外导览标识牌需要定期更新及维护需消耗大量的费用。因此,本文依托微信小程序“无需安装、触手可及、用完即走”的应用理念,开发一套校园导览系统来解决以上问题。目前导览系统的开发技术已经趋于成熟,这些导览系统大部分采用基于物联网技术结合 GPS定位技术,也有采用红外线定位、蓝牙定位以及RFID 定位的。随着智能终端的大规模普及,使得移动端技术在导览系统的应用成为了可能。上海海事大学临港校区校园的基于 Android 平台的校园导览软件,通过 Google maps 提供的接口实现电子地图功能,实现了自我定位、位置查找、路径查询等。中山大学开发了基于 Android 和 Apple IOS的校园个人化行动导览系统,对用户提供地图浏览定位、中大校园资讯查询与导航、路径导引等功能。此外,还有云南师范大学呈贡校区的基于百度地图 API 的校园综合信息服务系统。
1 系统功能分析
校园导览系统主要包括下述功能。
(1)用户授权登录。点击授权登录,提示用户授权,获取到用户信息,并将用户信息存储在后台服务器。
(2)学院简介。以轮播图和文字信息对学院进行总体介绍。
(3)导览详情。获取校园各分类场所的地点信息,并在地图上进行标注,选中某地点可以进行路线导航。
(4)语音讲解。可以播放所选地点的解说音频,为用户获取校园信息提供多种形式。
(5)自动定位。在地图上显示用户位置坐标。
(6)路线导航。打开导览地图,以用户当前位置作为起始点,所选位置作为目标地,规划出一条最短线路。
(7)用户反馈。当用户使用小程序碰到问题时,可提交用户反馈,并查看反馈列表。系统的功能用例如图 1 所示。

系统设计与实现

系统主要由授权登录、导览引导、学院简介、校园导览服务、导览详情、地点导航、用户反馈等模块组成。

3.1 导览引导页
校园导览引导页面由背景图、引导图标和学院的 logo 构成,点击图标可跳转至校园简介页
3.2 学院简介页
页面以轮播图的方式展示校园的风景图和学院介绍,并在页面上添加“地图导航”图标,点击图标可跳转至地点详情页。

3.2.1 获取 school 数据表中的数据项
通过 tableName 实例化一个 TableObject 对象来操作数据表,然后通过指定 recordID(记录 ID)执行来获取相应的记录[4],进而获取到记录的数据项,并将数据项设置到页面的 data 属性中。

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

3.3 校园导览服务页
该页面能够显示校园各场所的分布情况,点击分类标签可显示该分类下所有相关地点的位置及图片,点击底部可滚动视图区域的地点图片可跳转至校园导览详情页查看该地点的详情信息

3.3.1 获取某一分类下所有标记点数据
通 过 tableName 实 例 化 一 个 TableObject 对象,操作该对象即对表进行操作,接着示例化一个Query 对象,在该对象上添加查询条件

3.3.2 在地图上显示获取的标记点位置
根据表中记录的某分类下标记点的经纬度在地图上定位标记点的位置

3.3.3 给标记点绑定触发事件
当用户点击地图上的标记点定位图标时,可切换成激活图标,并更新底部可滚动视图区域滚动条的位置

3.4 校园导览详情页
校园导览详情页以轮播图的方式展示所选择地点的风景图和详细介绍,点击页面上语音播放,可调用 API 打开微信内置地图查看所在位置并进行路线的导航。

本文从当前高校校园导览的实际问题出发,利用微信小程序MINA 框架技术,依托第三方平台知晓云作为后台服务器,设计并实现了一套校园导览系统,为新生和校外人员提供了高效便捷的导览服务。实践表明,该平台具有方便快捷、灵活实用的特点。

 

智慧展馆里智慧讲解的标配:导览系统  自动讲解器  分区讲解系统