目前，基于移动设备的地图应用逐渐取代传统纸质校园地图导览手册，成为新生、访客熟悉校园环境的主要工具。此类地图应用能实现实时导航功能，然而应用于校园导览时，存在地理信息粒度粗，难以支撑校园内关键地标定位、页面内容混杂以及缺乏多样性信息资源等问题。针对校园环境这类小范围内的地图导览应用场景，需要一种满足使用者及时需求、能容纳校内环境数据体量并极大化节省资源的“轻量化”应用。
轻量化概念起源于汽车行业，是指在确保稳定提升性能的基础上，优化零部件及能源消耗。引申到移动应用领域，用以形容以“小程序”为代表的空间占用较小、硬件要求较低的一类新型应用程序。微信小程序作为一种易获取、易开发的轻型应用，轻量化是其区别于传统应用程序的特征之一。在实际使用时，无需安卸，操作简洁，适用于校园各类服务场景。在开发制作时，官方为开发者提供多数功能的开放接口，允许自定义组件，技术和成本门槛低，开发灵活性及自由度高。目前，微信小程序在校园服务场景中的应用主要聚焦于地图导航、校园服务两方面。地图导航类小程序通过调用腾讯地图、高德地图等开源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请求时，根据查询请求返回对应地点信息。由于表格的原始数据量较大，数据形式除文本外，还包含音频文件、高清图片，在获取图片数据时，对图片进行压缩处理，提升使用数据的加载速度。