轻量化校园地图导览小程序的设计与实现
目前，基于移动设备的地图应用逐渐取代传统纸质校园地图导览手册，成为新生、访客熟悉校园环境的主要工具。此类地图应用能实现实时导航功能，然而应用于校园导览时，存在地理信息粒度粗，难以支撑校园内关键地标定位、页面内容混杂以及缺乏多样性信息资源等问题。针对校园环境这类小范围内的地图导览应用场景，需要一种满足使用者及时需求、能容纳校内环境数据体量并极大化节省资源的“轻量化”应用。
轻量化概念起源于汽车行业，是指在确保稳定提升性能的基础上，优化零部件及能源消耗。引申到移动应用领域，用以形容以“小程序”为代表的空间占用较小、硬件要求较低的一类新型应用程序。微信小程序作为一种易获取、易开发的轻型应用，轻量化是其区别于传统应用程序的特征之一。在实际使用时，无需安卸，操作简洁，适用于校园各类服务场景。在开发制作时，官方为开发者提供多数功能的开放接口，允许自定义组件，技术和成本门槛低，开发灵活性及自由度高。目前，微信小程序在校园服务场景中的应用主要聚焦于地图导航、校园服务两方面。地图导航类小程序通过调用腾讯地图、高德地图等开源SDK，实现用户当前位置的实时定位及路线规划功能。如基于原生地图组件补充标志地点位置，手绘地图等个性化信息以丰富地图内容和突显地点风格；或者对地图导航功能进行扩展，为每个位置点添加语音讲解信息，增强小程序实用性及互动性。校园服务类微信小程序通常按照校园服务类型划分不同模块，展现各类信息或接入功能，如以共享校园信息为主，将小程序划分为新生指南、教学信息等信息模块，根据从微信小程序客户端接收到查询需求，从后台数据库中调用对应内容，并及时返回到页面。此类小程序实质上可视为供应者与需求者的中间工具，信息和资源通过官方提供的组件和接口进行有效对接，如文件组件、支付接口等，小程序作为校园服务平台，专注于特定功能或服务，如后勤报修、图书馆移动服务等。校园地图导览小程序需要在展现校园自身特色的同时，避免导航页面层级深、界面拥挤、列表式信息展示方式单一等问题，尽可能符合人们日常使用地图应用的习惯。鉴于此，围绕校园精准导航和校园服务两个核心点，采用前后端分离模式，结合组件化开发思想，融合地理信息系统（Geographic Information System，GIS）及mpvue、React框架、Webpack、腾讯云服务等主流前后端技术和工具，设计实现轻量化校园地图导览小程序核心功能，通过图片、文字和音频等方式向新生、访客提供跟随式的校园导览服务。在满足用户位置导航基础需求同时，兼顾用户校园导览、信息获取等泛性需求，通过自定义组件和个性化界面设计，优化用户使用体验，展现校园特色风格。
一、总体设计
采用前后端分离模式，保证小程序运行可靠性，前端基于mpvue、React框架，利用Webpack及微信开发者工具，使用JavaScript语言开发，并结合组件化思想使页面达到高复用性。后端数据库环境为腾讯CynosDB云数据库，配置Node.js环境，结合User Dash API编写独立的后台，在云数据库基础上建立校园信息服务功能接口，同时利用微信云提供的云函数、文件存储和数据库建立校园生活服务功能接口并进行后台整合，实现数据的存储与查询，以减少响应时间和响应负载。轻量化校园地图导览小程序的系统架构如图1所示。
1.1 架构设计
轻量化校园地图导览小程序系统整体结构可分为逻辑层、视图层和系统层，如图1所示。视图层（View）负责渲染页面，由WXML（WeiXin Markup language）、WXS（WeiXin Script）和WXSS（WeiXin Style Sheet）编写，描述页面结构及样式，并由组件（Component）展示。逻辑层（App Service）负责逻辑处理、数据请求、接口调用，由JavaScript编写业务代码，包含多个JS脚本。为提高渲染速度并降低性能消耗，微信小程序的底层架构为双线程模型，由两个线程分别管理逻辑层与视图层。双线程的渲染结合了模板数据绑定和虚拟文档对象模型（Document Object Model，DOM）机制，逻辑层采用JSCore线程运行JS脚本，视图层采用WebView线程渲染页面，由于小程序包含多个页面，每个页面各自有一个WebView线程，通常视图层包含多个WebView线程。系统层（Native）位于结构底层，负责管理及通信，包括数据存储、网络请求及其他硬件能力等，逻辑层和视图层通过系统层的WeixinJSBridge进行通信，逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈；视图层把逻辑层的数据反映成视图，并将触发的事件发送给逻辑层进行业务处理。
1.2 数据库设计
由于校园地图导览小程序功能需求涉及的数据种类繁多，数据之间相关程度不高，因此，根据页面内容，在后台数据库中创建学校简介（intro）、学院（college）、风光（scene）、师资（teachers）、历史（history）、教师团队（team）、导航地点（navigator）、美食（cate）、拍照打卡地点（photo）以及用户（user）等数据表。导航地点（navigator）表字段描述见表1，当接收到微信小程序客户端的HTTP Request请求时，根据查询请求返回对应地点信息。由于表格的原始数据量较大，数据形式除文本外，还包含音频文件、高清图片，在获取图片数据时，对图片进行压缩处理，提升使用数据的加载速度。
二、 关键功能设计
轻量化校园地图导览小程序旨在为访问校园的新生和游客提供全面可靠的服务，围绕校园精准地图导航和校园服务，将小程序划分为介绍、地图和攻略3个功能模块。地图模块是校园地图导览小程序的核心，实现校园精准地图导航，包括精准定位及多情境路线规划功能；介绍及攻略模块实现校园服务，分别提供校园基本信息与生活服务信息。
2.1 介绍模块
介绍模块主要为师生及访客提供校园基本信息。由于校园相关信息分散冗杂且形式多样，用户难以快速剥离出有效信息。将不同途径获取到的庞杂信息进行汇总分类，梳理出较为完整且准确的信息，从校园简介、办学历史、校园环境和师资队伍4个方面进行展示，因此，介绍模块细分为简介、历史、风光、师资4个部分。
1）简介：根据校园官网信息及媒体资源，以文字、轮播图和语音形式对学校概况进行简单介绍，便于到访师生及游客速览校园基本情况。
2）历史：以文字和视频形式展示学校重大历史事件，并使用时间轴的形式标注出重要史略发生的时间节点，让用户了解学校自建校以来的发展变化和所获成就。
3）风光：基于前期实地拍摄及处理的图片资料，以图片流的形式展示学校特色建筑及生态环境。
4）师资：以文字形式展示学校各个学院的教师团队及其研究方向，方便学生加深对学院各位老师的了解。
2.2 地图模块
地图模块主要提供精准定位及路线规划功能。由于传统静态地图需要用户寻找参照物，无法准确定位，而通用的地图服务应用难以顾及校园各个特色建筑，并且缺乏相关参考内容，用户无法快速掌握地理位置及其相关属性信息。地图模块通过精准定位和多情境路线规划两个核心功能，帮助用户掌握实时位置信息，并针对不同出行方式，提供多种规划路线作为出行辅助方案。
2.2.1 精准定位
精准定位功能通过引导式位置查询及实时精准定位实现，用户可根据小程序提供的校园建筑类型引导条目，结合当前位置实时定位信息，快速掌握校园建筑的全局分布情况。在引导式位置查询方面，为了帮助用户概览校园中不同类型建筑的分布位置及说明信息，基于校园实际环境，通过前期实地采集到的数据，结合校园各个建筑的功能性质，将校园内所有地点分类展示到导航栏中，同时为每个地点补充“图文+语音解说”介绍信息，用户可按照分类引导或利用搜索功能查询目的地点，根据附带的辅助内容加深了解。在实时精准定位方面，轻量化校园地图导览小程序基于腾讯位置服务微信小程序JavaScript SDK，通过调用wx.getLocation( )接口实时获取当前位置信息，由于小程序默认坐标是WGS84，API的type参数的默认值为‘wgs84’，而在开发工具中定位模拟是使用的IP地址，存在一定误差，因此，在开发时需要设置type参数为‘gcj02’，转换为国测局坐标，并使用真机测试以避免坐标偏移。
2.2.2 多情境路线规划
路线规划是导航的核心，此功能基于步行、骑行、驾车这3种出行方式，为不同需求的用户规划多种合理的导航路径，并在导航时实时更新到达目的地的距离和时长，基于用户当前位置及行进状态动态调整路线方案。
2.3 攻略模块
攻略模块主要为师生及访客提供校园生活服务信息。饮食、游玩、校内交通是校园新生及访客关注的重点，而相关信息通常由不同校园平台管理，难以直接传达给信息需求者。针对以上3种校园服务类型，将攻略模块划分为美食推荐、拍照打卡和班车查询3个功能，分别整合相关校园平台的共享信息，并与官方平台保持同步更新，确保信息的准确性及多样性。
1）美食推荐：以图片形式展示学校各个餐厅的不同美食，并且附带所属餐厅名称、喜爱人数及路线导航功能，用户可基于图文介绍及互动信息掌握校园饮食服务概况，并可通过路线导航直接前往目标餐厅。
2）拍照打卡：以卡片形式展示校园重要景点并附带路线导航，用户可以按照所选方案的导航路线前往目标景点。
3）班车查询：根据收集到的校园交通时刻表，以图片形式展示校内各种交通方式的发车时间及站点，并在各站点名称旁接入路线导航功能，方便用户制定出行规划。
三、界面设计
轻量化校园地图导览小程序的基础界面主要包括：主界面、介绍页面、地图页面和攻略页面。主界面是小程序首页，包括介绍、地图和攻略按钮控件，分别指向对应的功能界面。小程序界面是对用户可见的直观表现形式和信息交互接口，提供小程序的功能入口并指引用户进行相关操作。为了帮助用户快速掌握小程序操作流程及原理，向用户传递正确信息的同时展现小程序风格和特色，因此在设计小程序界面时，需要顾及人机交互、界面逻辑和界面美观设计3个方面因素，在符合交互操作逻辑及设计原则基础上，进一步体现小程序的定位风格。
四、微信小程序开发实例
以电子科技大学为小程序实例，对校内各类型建筑进行实地拍摄，记录坐标信息以支撑导航功能；将收集到的文字、图片及音频数据分类存入云数据库；开发后期在不同型号的移动终端、网络质量条件下进行性能测试及调整，测试内容见表3。同时，微信官方开发者工具中嵌套的体验评分功能[8]，从性能、体验、最佳实践3个模块划分出27条评分规则，如首屏时间、请求耗时、窗口变化适配等，对小程序在运行时的页面渲染、交互等表现情况进行自动实时评分。根据官方制定的评分方法，通过的体验规则计分为100分，不通过则为0分，最后综合各规则权重计算出总分。每项体验分数低于70分时，系统会在console面板中打印warning信息提示，开发者可根据得分结果及优化建议对导览程序进行针对性调整。图4为开发者工具中体验评分功能示意图，图5为轻量化校园地图导览小程序在不同设备及无线网络环境中的体验评分结果，3种设备的总分均处于90分以上。介绍模块提供校园信息服务入口，帮助用户快速掌握校园信息，由“简介”“历史”“风光”“师资”4个子页面组成，以文字、图片、视频、音频等方式全方面地介绍校园历史及教学资源信息，如图7a～图7d所示，默认界面为简介页面，用户可根据底部标签栏进行页面切换并浏览对应信息。地图模块支撑精准地图导航功能，提供详细的地图场景及不同情境下的路线规划服务，其子页面为导览服务界面，是小程序的核心界面，实现精准定位、多情境路线规划两项核心功能。基于校园建筑类型的实地考察结果和常见出行方式，界面提供多种校园建筑类型及交通方式的切换功能，为用户规划出不同场景下的路线方案。地图模块如图8a所示，界面主体为地图组件，用于显示用户位置及规划路线，顶端为导航栏，包含14种类型的校内建筑，并能实现校区切换功能；侧边栏包含搜索及定位按钮，方便用户输入关键字进行地点搜索。当用户选择某一地点后，进入导览服务子页面，如图8b所示，页面顶部包含3种交通方式，通过切换可以快速规划出不同方案。攻略模块提供校园生活服务入口，帮助用户熟悉校园环境及校园综合服务，由“美食攻略”“拍照攻略”“校园交通服务”3个子页面组成，从游玩和校园交通两方面深入校园生活场景，利用图片形式详细介绍校园服务，同时附加目标地点导航功能，为用户快速制定游玩方案。攻略模块主页面如图9a所示，包含美食、拍照、班车查询3个功能的图片入口，通过点击图片可进入对应子页面。
五、结束语
针对通用移动地图难以专注校园范围内的特色地标、缺乏相关校园信息等问题，基于微信小程序框架，采用前后端分离模式，以电子科技大学为例，设计并实现了集成校园精准导航、校园服务功能的校园地图导览小程序。该成果获得“2019年中国高校计算机大赛/微信小程序应用开发赛”全国三等奖，在实际校园环境中得到成功应用，是对校园数字化文化建设的一次有益探索，同时，提出的校园地图导览小程序可推广应用于旅游、交通等行业领域，技术和方法具备一定参考意义。基于该研究成果，后期将与学校相关部门合作，接入教学管理功能，进一步优化和拓展小程序的服务功能，以覆盖更多的校园信息服务。