作者信息

周延、蒋丞丞、张聪、秦梦窦

（电子科技大学资源与环境学院，四川 成都）

”

[摘要] 针对传统纸质校园地图导览手册更新查询滞后、普通移动地图服务应用难以聚焦特定校园建筑、缺乏校园信息资源等问题，提出一种基于微信小程序的轻量级校园框架设计完成。地图导航小程序。基于前后端分离模型，我们使用框架和工具构建小程序的前端页面，并使用腾讯地图开源SDK实现实时多场景路线规划。使用腾讯云数据库配置数据库环境，使用User Dash API编写独立的运营后台系统，并基于云数据库开发校园服务接口，整合校园信息。以电子科技大学校园环境和数据为例，对所实现的校园地图导航小程序进行性能测试和实际评分结果表明，小程序运行稳定可靠，满足实时性要求。规划校园路线和获取校园服务。

【关键词】微信小程序；地图导航；轻量级校园地图；小程序设计；校园服务

【中文图书馆分类号】P208 【文献识别码】A 【文章编号】1672-1586（2021）01-0061-07

”

引用格式：周岩，蒋程程，张聪，等。轻量级校园地图导航小程序的设计与实现[J].地理信息世界, 2021, 28(1): 61-67.

文本

0 简介

目前，基于移动设备的地图应用正逐渐取代传统的纸质校园地图导览手册，成为新生和来访者熟悉校园环境的主要工具。这类地图应用可以实现实时导航功能。但用于校园导航时，存在地理信息粗粒度、难以支持校园重点地标定位、页面内容混杂、信息资源缺乏多样化等问题。对于校园环境等小规模地图导航应用场景，需要一种“轻量级”的应用，既能满足用户的及时需求，又能容纳校园环境数据量，最大限度地节省资源。

轻量化的概念起源于汽车行业，是指在保证性能稳定提升的基础上，优化零部件和能源消耗。延伸到移动应用领域，用来描述以“小程序”为代表的一种占用空间较小、硬件要求较低的新型应用。作为一种易于获取和开发的轻量级应用，微信小程序是其区别于传统应用的特点之一。实际使用中，无需安装和拆卸，操作简单，适合校园各种业务场景。在开发生产过程中，官方为开发者提供了大部分功能的开放接口，允许自定义组件，技术和成本门槛低，开发灵活性和自由度高。目前，微信小程序在校园服务场景的应用主要集中在地图导航和校园服务方面。

地图导航小程序调用腾讯地图、高德地图等开源SDK，实现用户当前位置的实时定位和路线规划。例如，利用原生地图组件补充标注地点位置、手绘地图等个性化信息，丰富地图内容，凸显地点风格；或者扩展地图导航功能，为每个位置点添加语音讲解信息，增强小程序的实用性和交互性。性别。校园服务微信小程序通常根据校园服务类型分为不同的模块，以展示各类信息或访问功能。例如，主要分享校园信息，小程序分为新生指南、教学信息等信息模块。根据微信小程序，程序客户端接收查询请求，从后台数据库调用相应内容，并及时返回页面。这类小程序本质上可以看作是供应者和需求者之间的中介工具。通过官方提供的组件和接口，如文件组件、支付接口等，信息和资源进行有效连接。小程序作为校园服务平台，专注于特定的功能或服务，如后勤报修、图书馆移动服务等。

校园地图导航小程序需要展现校园本身的特点，同时避免导航页面过深、界面拥挤、列表式信息展示方式单一等问题，尽可能符合人们日常使用地图应用的习惯。可能的。鉴于此，围绕校园精准导航和校园服务两个核心点，采用前后端分离模式，结合组件化开发思想，融合主流前后端技术地理信息系统（GIS）、框架、腾讯云服务等工具。旨在实现轻量级校园地图导航小程序的核心功能，通过图片、文字、音频为新生和访客提供后续校园导航服务。在满足用户位置导航基本需求的同时，还考虑到用户校园导航、信息获取等通用需求。通过定制组件和个性化界面设计，优化用户体验，展示独特的校园风格。

1 总体设计

采用前后端分离模式，保证小程序运行的可靠性。前端基于微信开发者工具，前端基于微信开发者工具，使用语言进行开发，并结合组件化的思想，实现页面的高复用性。后端数据库环境为腾讯云数据库，配置Node.js环境，结合User Dash API编写独立后端，建立基于云数据库的校园信息服务功能接口，并使用云功能、文件存储以及微信云提供的数据库建立。校园生活服务功能接口与后台集成，实现数据存储和查询，减少响应时间和响应负载。轻量级校园地图导航小程序的系统架构如图1所示。

图1 轻量级校园地图导航小程序系统架构

图 1 和

1.1 架构设计

轻量级校园地图导航小程序系统整体结构可分为逻辑层、视图层和系统层，如图1所示。视图层（View）负责页面的渲染，由WXML（）、WXS编写( )和WXSS ( )，描述页面结构和样式，并由组件( )显示。逻辑层（App）负责逻辑处理、数据请求、接口调用。它编写业务代码并包含多个JS脚本。为了提高渲染速度、降低性能消耗，微信小程序的底层架构是双线程模型，两个线程分别管理逻辑层和视图层。双线程渲染结合了模板数据绑定和虚拟文档对象模型（DOM）机制。逻辑层使用线程运行JS脚本，视图层使用线程渲染页面。由于小程序包含多个页面，每个页面都有一个线程，通常视图层包含多个线程。

系统层（）位于结构的最底层，负责管理和通信，包括数据存储、网络请求等硬件能力。逻辑层和视图层通过系统层进行通信。逻辑层处理数据并将其发送到视图层。同时接收视图层的事件反馈；视图层将逻辑层的数据反映为视图，并将触发的事件发送给逻辑层进行业务处理。

1.2 数据库设计

由于校园地图导航小程序的功能需求涉及的数据种类繁多，且数据之间的相关性不高，因此，根据页面内容，创建学校简介（）、学院（）、风景（）、师资队伍后台数据库中有()、()、教师团队(team)、导航位置()、食物(cate)、照片打卡位置()和用户(user)等数据表。导航()表的字段描述如表1所示。当收到微信小程序客户端的HTTP请求时，根据查询请求返回相应的位置信息。由于表中原始数据量较大，数据格式除文本外还包括音频文件和高清图片。在获取图片数据时，对图片进行压缩，以提高所用数据的加载速度。

表1 导航()表字段说明

标签。 1 为

2 关键功能设计

轻量级校园地图导航小程序旨在为新生和参观校园的游客提供全面可靠的服务。该小程序围绕校园精准地图导航和校园服务，分为简介、地图、攻略三个功能模块，如图2所示。地图模块是校园地图导航小程序的核心，实现校园精准地图导航，包括精准定位、多场景路线规划功能；简介和策略模块实现校园服务，分别提供校园基础信息和生活服务信息。

图2 轻量级校园地图导航小程序功能模块示意图

图2 和

2.1 模块介绍

简介模块主要为教师、学生和参观者提供校园的基本信息。由于校园相关信息分散、复杂、形式多样，用户难以快速提取有效信息。对通过不同渠道获取的复杂信息进行汇总和分类，整理出更加完整、准确的信息，从校园介绍、学校历史、校园环境、师资队伍四个方面进行展示。因此，导论模块细分为导论、历史、风景、师资4个部分。

1）简介：基于校园官网信息和媒体资源，以文字、轮播图片、音频等形式对学校简介进行简要介绍，以便来访教师、学生和游客快速了解学校基本情况校园。

2）历史：以文字和视频的形式展示学校的重大历史事件，并用时间轴标记重要历史事件发生的时间点，让用户了解学校自成立以来的发展、变化和成就。

3）风景：根据前一阶段现场拍摄并处理的图片数据，以图片流的形式展示学校的特色建筑和生态环境。

4）师资队伍：以文字形式展示学校各学院的师资队伍和研究方向，方便学生加深对学院教师的了解。

2.2 地图模块

地图模块主要提供精准定位和路线规划功能。由于传统静态地图需要用户寻找参考对象，无法准确定位，一般地图服务应用无法兼顾校园内的各种特色建筑，缺乏相关参考内容，导致用户无法快速掌握地理位置及其相关内容。属性信息。地图模块通过精准定位和多场景路线规划两大核心功能帮助用户掌握实时位置信息，并针对不同出行方式提供多种规划路线作为出行辅助解决方案。

2.2.1 精准定位

通过引导位置查询、实时精准定位实现精准定位功能。用户可以根据小程序提供的校园建筑类型引导条目，结合当前位置的实时定位信息，快速掌握校园建筑的全球分布情况。在引导位置查询方面，为了帮助用户大致了解校园内不同类型建筑的分布位置和描述信息，基于实际校园环境，通过前期在现场收集的数据，结合结合各校园建筑的功能属性，将校园内所有地点分类显示在导航栏中，同时为每个地点补充“图文+音频解说”的介绍信息。用户可以按类别引导或使用搜索功能查询目的地位置，并根据附带的辅助内容加深了解。在实时精准定位方面，轻量级校园地图导航小程序基于腾讯位置服务微信小程序SDK，通过调用wx.()接口实时获取当前位置信息。由于小程序的默认坐标为，因此API的类型参数默认值为''，开发工具中用于定位模拟的IP地址存在一定误差。因此，开发时需要将type参数设置为''，转换为国家测量局坐标，并用真机测试，避免坐标偏差。转移。

2.2.2 多场景路径规划

路径规划是导航的核心。该功能基于步行、骑行、驾车三种出行方式。它为不同需求的用户规划多种合理的导航路径，并在导航过程中实时更新到达目的地的距离和时长。根据用户当前位置和出行状态动态调整路线规划。在开发路线规划功能时，我们也使用了腾讯位置服务SDK，设计流程如图3所示。

图3 多场景路径规划设计

图3和

通过设置接口的mode参数值来实现校园内不同出行场景的路线规划，包括驾车()、步行()、骑行()等。步行模式路线查询部分代码如下：

对于实时导航更新策略，轻量级校园地图导航小程序的刷新机制为：调用API以固定时间间隔刷新数据，更新时间和距离参数，累计达到时更新当前显示路径一定的时间阈值，同时设置定时器清零，重新计时，重复上述步骤，直到用户到达目的地，从而实现动态导航。考虑到不同出行场景下用户的移动速度和设备使用频率，以及刷新机制对后台资源的使用情况，三种出行场景下路径规划的默认更新方案设置如表2所示。

表2 航线规划更新计划

标签。 2

2.3 策略模块

策略模块主要为教师、学生和访客提供校园生活服务信息。饮食、娱乐和校内交通是校园新生和游客关注的焦点。但相关信息通常由不同的校园平台管理，难以直接传达给需要信息的人。针对以上三类校园服务，导览模块分为美食推荐、拍照打卡、班车查询三个功能。他们整合相关校园平台的共享信息，并与官方平台保持更新，确保信息的准确性和多样性。 。

1）美食推荐：以图片的形式展示学校各个餐厅的不同美食，并附带餐厅名称、喜欢的人数、路线导航功能。用户可以根据图文介绍和互动信息了解校园餐饮服务的概况，并可以直接使用路线导航。前往目标餐厅。

2）拍照打卡：以卡片形式展示校园重要景点，并附有路线导航。用户可以按照所选方案的导航路线到达目标景点。

3）班车查询：根据采集到的校园交通时刻表，以图片的形式显示校园内各种交通方式的发车时间和站点，并在各站点名称旁边连接路线导航功能，方便用户制定旅行计划。

3 界面设计

轻量级校园地图导航小程序的基本界面主要包括：主界面、介绍页面、地图页面和攻略页面。主界面是小程序的首页，包括简介、地图和策略按钮控件，指向相应的功能界面。

小程序界面是用户可见的直观表示和信息交互界面。提供小程序的功能入口，引导用户进行相关操作。为了帮助用户快速掌握小程序的操作流程和原理，向用户传递正确的信息，同时展现小程序的风格和特点，在设计小程序界面时，需要考虑三个方面：人机交互交互、界面逻辑、美观的界面设计。在遵守交互操作逻辑和设计原则的基础上，进一步体现小程序的定位风格。校园地图导航小程序采用“One ONE”开源库进行界面开发设计。界面的导航栏、轮播图、搜索框基于相应的组件，卡片效果基于“One ONE”开源库。

它是一个专注于视觉交互、支持高度定制组件的样式库。其组件制作精良，封装良好。组件代码具有良好的兼容性和可扩展性。每个独立的选择器都是一个封装的 CSS 组件。易于灵活组装和修改。首先从网站下载官方维护的原文件并解压，将文件.wxss和icon.wxss复制到校园地图导航小程序项目的根路径下，并在项目的全局样式文件app.wxss中添加以下代码: "@"icon.wxss";@".wxss";"引入样式库。之后根据校园地图导航小程序的界面风格，在导航栏、轮播图、搜索框组件库的基础上进行了定制化调整。导航栏的部分代码如下：

“一”是一款开源的第三方图文推送APP，以卡片的形式向用户推荐图文并提供分享功能。此卡片效果推荐表可应用于校园地图导游拍照、打卡功能。从网站下载官方开源文件one.wxss，将该文件复制到校园地图导航小程序“拍照打卡”功能根路径下，并添加代码：“@'./one”。到“拍照打卡”功能的样式文件。 wxss';”，拍照和签到部分代码如下：

4 微信小程序开发实例

以电子科技大学为例小程序，​​对学校内各类建筑进行现场拍照，并记录坐标信息，支持导航功能；将收集到的文字、图片、音频数据分类存储在云端数据库中；在开发后期，使用不同型号的移动终端，在网络质量条件下进行性能测试和调整。测试内容如表3所示。同时，微信官方开发者工具中嵌入的体验评分功能从性能、体验、最佳实践三个模块划分了27条评分规则，如首屏时间、请求时间、窗口变化适配等，对于小用户来说非常有用。程序在运行时的页面渲染、交互等性能都会实时自动评分。根据官方评分方式，通过的经验规则记为100分，未通过的记为0分。最后根据每条规则的权重计算总分。当每次体验得分低于70分时，系统会在面板中打印信息提示，开发者可以根据得分结果和优化建议对导航程序进行针对性调整。图4是开发者工具中体验评分功能的示意图。图5展示了轻量级校园地图导航小程序在不同设备和无线网络环境下的体验评分结果。三款设备的总分均在90分以上。

表3 校园地图导航小程序测试内容

标签。 3 地图和mini测试

图4 体验评分函数示意图

图 4 的

图5 小程序体验评分结果

图5 mini页面

轻量级校园地图导航小程序主界面如图6所示，是用户首次进入小程序的初始页面。它提供了三个功能按钮，方便用户直接进入相应的模块。

图6 校园地图导航小程序主界面

图6 和 的主页

简介模块提供校园信息服务入口，帮助用户快速掌握校园信息。分“简介”、“历史”、“风景”、“师资”四个分页。通过文字、图片、视频、音频等方式全面介绍校园历史和信息。教学资源信息如图7a至图7d所示。默认界面为介绍页。用户可以根据底部的标签栏切换页面并浏览相应的信息。

图7 校园地图导航小程序：简介模块

图7 地图和迷你图：

地图模块支持精准地图导航功能，提供详细的地图场景和不同情况下的路线规划服务。其子页面为导航服务界面，是小程序的核心界面，实现了精准定位和多场景路线规划两大核心功能。 。该界面根据校园建筑类型和常见出行方式的实地调查结果，提供多种校园建筑类型和交通方式的切换功能，为用户在不同场景下规划路线。地图模块如图8a所示。界面的主体是地图组件，用于显示用户的位置和规划的路线。顶部为导航栏，包含14类校园建筑，可实现校园切换功能；侧边栏包括搜索和定位。按钮，方便用户输入关键字来搜索地点。当用户选择位置后，进入导航服务子页面，如图8b所示。页面顶部包含3种交通方式，通过切换可以快速规划不同的选择。

图8 校园地图导航小程序：地图模块

图 8 和：地图

引导模块提供校园生活服务入口，帮助用户熟悉校园环境和综合校园服务。它由“美食指南”、“拍照指南”和“校园交通服务”三个子页面组成。它从娱乐、校园交通等方面深度覆盖校园生活场景，并以图片的形式详细介绍校园服务，还增加了目标地点导航功能，帮助用户快速制定出行计划。策略模块主页面如图9a所示，包含美食、摄影、班车查询三个功能的图片入口。点击图片即可进入相应的子页面。各子页面的示意图如图9b至图9d所示。

图9 校园地图导航小程序：策略模块

图 9 和：

5 结论

为了解决通用移动地图难以聚焦校园内独特地标、缺乏相关校园信息等问题，基于微信小程序框架和前后端分离模式，采取以电子科技大学为例，设计并实现了一个集成校园精准导航和校园服务的功能性校园地图导航小程序。该成果在“2019中国大学生计算机大赛/微信小程序应用开发大赛”中荣获全国三等奖，并成功应用于实际校园环境。是对校园数字文化建设的有益探索。同时，所提出的校园地图引导小程序可以在旅游、交通等行业推广应用，技术和方法具有一定的参考意义。基于研究成果，未来我们将与学校相关部门合作接入教学管理功能，进一步优化和拓展小程序的服务功能，覆盖更多的校园信息服务。

作者简介：周艳（1976-），女，陕西西安人，副教授，博士，主要从事地理信息系统和空间大数据分析研究工作。

电子邮件：

本期回顾

《地理信息世界》2021年期速览

·

新时代的地理信息科学

·

·

·

·

·

理论研究

·

·

·

·

·

·