基于微信小程序的公共卫生间位置查询平台

2022-04-01 14:16车明亮张季一王英利赵忠杰
地理空间信息 2022年3期
关键词:视图卫生间框架

周 霞,张 驰,车明亮,张季一,王英利,赵忠杰*

(1.苏州信息职业技术学院 大数据与互联网学院,江苏 苏州 215200;2.南通大学 地理科学学院,江苏 南通 226007)

如今移动互联网已成为人们日常生活中必不可少的重要内容,是未来网络发展的核心和最重要的趋势之一[1]。它是移动和互联网融合的产物,继承了移动通信随时、随地、随身的特点以及互联网开放、共享、互动的优势,继而提供类型丰富、可交互、高品质的信息服务[2]。微信是移动互联网的重要组成部分。国内电信运营商与微信的合作(如中国联通与腾讯联合推出的微信沃卡[3])促使基于微信的各种服务平台井喷式增长。微信小程序作为新兴技术,在简洁性和内存占用方面比常规App(即原生应用,Native App)更具优势,其减压、减负式创新特点有助于用户的推广使用[4]。生活服务是微信的重要功能[5],但其主要面向购物、餐饮、外卖、旅游、影视、游戏等内容[6],对具有公益性质的公共卫生间位置信息服务等内容涉及较少。公共卫生间作为生活服务中必不可少的重要内容,其信息化建设不可忽视。通常人们在外出活动时,为了寻找就近的公共卫生间,会使用高德、百度、腾讯等网络地图App进行搜索;但这些地图App需要预先安装、功能繁多、使用复杂,还有各种广告信息和喜好推荐,使人们感到信息累赘。

目前存在少量针对公共卫生间的应用研究[7-9],也有研究利用混合型App架构,融合移动互联网和物联网设计智慧公共卫生间平台的概念性框架[10];但关于设计开发面向移动互联网的公共卫生间位置查询平台的研究则较少见,因此本文将通过设计微信平台并开发小程序来实现公共卫生间的信息化建设,使人们可以迅速、便捷地查找所在位置周围的公共卫生间网点。

1 关键技术

实现基于微信小程序的公共卫生间查询平台,需要解决3个方面问题:①构建基于微信小程序的公共卫生间查询平台架构;②获取基于第三方数据的公共卫生间位置数据;③搜索目标卫生间和路线选择。本文将针对上述3个问题展开详细阐述。

1.1 平台架构

基于微信小程序的公共卫生间查询平台架构如图1所示,包括前端和后端两个部分,前端主要实现数据的表达以及与用户的交互,后端主要涉及业务逻辑和数据交互。平台采用的基本架构为模型—视图—视图模型(MVVM)结构,包括数据模型(Model)、视图(View)和视图模型(ViewModel),是一种基于前端开发的架构模式。其中,Model定义了数据修改和操作的业务逻辑,View负责将数据模型转化为交互界面,ViewModel用于连接模型及其视图。通过MVVM结构,View可通过事件绑定Model,Model可通过数据绑定View,利用ViewModel可实现数据与View的完全分离。

图1 平台架构

在利用微信开发者工具开发小程序代码时,前端架构涉及的文件类型主要包括wxml文件、wxss文件和Javascript文件3种。在该框架中,界面由wxml文件描述(微信标记语言)。它是微信框架提供的一套标签语言,用于编写静态页面。在微信小程序框架中,官方提供了大量高频率使用的组件,如基本视图组件view、基本内容组件text、多媒体组件image等。在前端架构中,View和ViewModel实现了双向数据绑定,使得ViewModel的状态改变可自动传递给View。wxss文件是微信样式表文件,用于设计页面样式。在微信小程序框架中,通过在全局样式(app.wxss)文件和独立页面样式文件编写CSS样式,以此设计页面显示风格。Javascript文件为脚本文件,用于编写组件行为和代码逻辑,起到承上启下的作用,既可用于前端用户交互,又可调用后端服务。

后端架构主要由Node.JS和Express框架构成。Node.JS是基于Chrome V8引擎开发设计的Javascript运行环境。它采用事件驱动、非阻塞式I/O模型和事件驱动模型,使得其可并发处理许多链接,每个链接都会触发一个回调函数,整个过程中不会阻塞用户请求。Express框架中包含一个数据库模块,是一个实现了MySQL协议的Node.JS运行环境的Javascript客户端。借助Express框架,Node.JS可以有效地与数据库(本文采用MySQL数据库)进行交互,从而实现数据流转。JSON文件在该架构中起到了两个作用:①作为静态配置文件,实现开发者工具的个性化定制,如界面颜色、编译配置等;②实现数据传输,保护前、后端的数据交互以及后端与数据库的数据交互。

1.2 数据获取和处理方法

平台的公共卫生间位置数据主要来源于网络地图,通过调用网络地图提供的API,可获取研究区内公共卫生间的位置数据。由于初次获取的位置数据存在冗余,因此需进行去重处理。基于Node.JS,平台通过Axios库调用接口获取位置数据,并对获取的数据进行去重处理。其关键代码为:

在Node.JS的基础上,对MySQL数据库进行操作,将去重后的数据按照字段进行入库,最终获取的南通市公共卫生间POI数据如图2所示。

图2 研究区POI数据空间分布图

1.3 公共卫生间查询与步行路径规划

平台的核心功能是查询,需支持包括但不限于根据用户当前位置、用户搜索位置、搜索半径条件搜索周围公共卫生间。因此,关键需要实现以下3个功能。

1)公共卫生间数据查询。平台采用小程序自带封装好的request函数对接口进行请求调用,实现对公共卫生间数据的查询。其关键代码为:

2)检索特定卫生间。在搜索结果中选择特定公共卫生间是平台的核心功能之一。当用户需要查看一个公共卫生间时,通过点击该公共卫生间图标,能在下方信息区域显示公共卫生间的位置以及用户当前位置到公共卫生间的距离信息。用户点击公共卫生间图标的函数代码为:

3)步行路径显示和路径分析。步行路径显示和路径分析是平台的核心功能之一。当用户点击选择公共卫生间路线时,地图中能显示具体路线图并在下方信息区域显示从用户当前位置到公共卫生间的步行路径分析。路线规划的关键代码为:

2 平台实现

通过上述方法,本文实现了基于微信小程序的南通市公共卫生间查询平台。首先通过微信搜索平台小程序标识“NTWCSearch”进入小程序(也可扫二维码进入),初始界面如图3a所示;然后根据当前位置按默认缓冲区半径搜索公共卫生间集合,并选择其中某个公共卫生间,可查看公共卫生间的详细信息,如图3b所示;最后在页面底端点击路线按钮,将在地图中显示步行路线,同时在信息区域显示步行路径分析,如图3c所示。

图3 平台运行界面

3 结语

本文利用微信开发者工具构建了南通市公共卫生间查询平台。首先采用MVVM模式构建了系统的前端和后端,实现了前、后端交互以及数据库的访问框架;然后通过调用网络地图提供的API,获取了公共卫生间数据;最后实现了公共卫生间数据的查询以及路径规划等功能。本文主要解决了公共卫生间查询平台的关键技术问题,今后将对该平台的相关功能进行完善。

猜你喜欢
视图卫生间框架
有机框架材料的后合成交换
框架
一家公司的卫生间能有多惊艳
我帮你上卫生间
浅谈框架网页的学习
低碳达人
Y—20重型运输机多视图
SA2型76毫米车载高炮多视图
《投影与视图》单元测试题
Django 框架中通用类视图的用法