基于微信小程序的公众气象服务应用的设计与实现

高超越 李玮祎

摘要：微信小程序具有不占内存、使用门槛低、分享裂变能力强等优点，契合公众气象服务需求，为此开发了一款基于微信小程序的公众气象服务应用。该应用包含天气实况、城镇预报、预警信息、分钟级雷达降水趋势预报和气象图形产品等多个功能页面，能够为公众提供更加精细化、智慧化的气象服务。

关键词：微信小程序；公众气象服务

中图分类号：TP311     文献标识码：A

文章编号：1009-3044（2023）36-0042-00

开放科学（资源服务）标识码（OSID）

0 引言

微信小程序是依附于微信App的应用程序，具有不占内存、使用门槛低、分享裂变能力强等优点。小程序于2017年1月９日正式上线，截至2021年，全网微信小程序数量已超700万，小程序开发者突破300万，日活跃用户数量超过4.5亿。微信小程序有着操作简单、使用方便、获取方式多种多样等特点，且分享传播非常方便快捷，用户可以基于微信随时一键分享，任何人都可直接打开体验。其获取便捷、传播性强的特性，与公众气象服务在提升信息传播速度和覆盖面上的需求高度契合[1]。

“内蒙古天气”公众号原有的功能基于传统H5技术开发与运行，传统H5技术对于业务逻辑复杂、交互要求高的应用使用起来体验不佳，经常出现顶部绿色进度条需等待一段时间，而小程序在使用流畅度方面更有优势，用户使用体验更好。通过将小程序和公众号结合起来使用，一个负责实现功能和服务，一个负责实现消息的推送和用户留存，可以完美发挥小程序和公众号各自的优势。

为了使公众能够通过微信及时享受便捷的气象服务，随时随地掌握由气象部门发布的精细化气象服务产品，同时对“内蒙古天气”微信公众号的功能进行扩充和完善，利用微信小程序的开发技术，研发基于微信小程序的公众气象服务应用，将为气象部门构建和发展智慧气象服务以及实现高质量气象现代化提供有力支撑。

1 小程序的设计

1.1 功能模块设计

小程序的服务对象定位为社会公众，设计目标是能够解决用户面临的日常生活中常见的天气问题。小程序主要功能有：城市定位、天气预报、天气实况、预警信息、地点搜索、降水早知道、图形产品等，以简单实用的功能给公众提供所需的气象服务[2]。小程序包括三个主要功能模块，分别为“预报预警”“实况监测”和“专题服务”。小程序功能模块结构图如图1所示。

1）“预报预警”模块，提供公众日常生活所需的基本的天气服务信息，包括“看天气”和“查预警”两个子模块。其中“看天气”模块的功能包括当前天气实况、空气质量指数、预警信息提示、今明两天天气预报、未来24小时逐小时预报、未来15天逐日预报和城市生活气象指数等气象信息的展示。用户打开小程序时默认打开的首页就是“看天气”模块，该模块通过手机定位显示基于用户当前位置的实时天气信息，同时也提供地点搜索功能，用户可查询全国其他地方的天气信息。“查预警”模块的主要功能是以地图形式展示所有全区当前生效中的预警信息，预警图标会按照预警覆盖范围定位到地图相应的位置上。除地图形式外还支持切换到以列表方式展示全区预警，在列表界面可按照预警种类、预警等级和发布单位进行分类查询。点击地图中的预警图标或列表中的单条预警将进入预警信息详情页。

2）“实况监测”模块，为公众提供相对专业的实况监测图形产品，使公众对当前天气形势有更加直观的了解，增强小程序的实用性。该模块主要包括降水早知道、全区实况、卫星云图和雷达拼图四个展示内容。其中全区实况是以地图形式展示实况数据，根据格点实况数据渲染色斑图，将色斑图叠加到地图瓦片上。展示的图形产品分为气温、降水和风速三部分，其中气温包括逐小时气温、24小时最高气温、24小时最低气温；降水包括过去1小时、3小时、6小时、12小时、24小时、48小时累计降水量；风速包括2分钟平均风速和极大风速。卫星云图展示内容为FY4A彩色云图，雷达拼图展示内容为华北、东北、西北和全国雷达拼图。卫星云图和雷达拼图都可按时间进度自动连播或拖动进度条查看，也可单独点击查看当天各时次的图形。

3）“专题服务”模块，初期计划内容为旅游气象，提供内蒙古自治区主要旅游景点天气实况及天气预报服务。此模块可以后期增加其他专题气象服务模块，比如在2024年十四届冬运会气象服务保障期间链接十四冬专题气象服务网站。

4）特色功能：降水早知道，在小程序看天气及实况监测模块都会留有入口，該功能即分钟级雷达降水趋势预报。其原理是通过微信API接口获取用户位置信息后，使用电子地图解析定位用户所在位置，在地图上叠加雷达外推数据，提供未来两小时内的短时临近降水预报。该预报的空间分辨率可精确到街道，时间分辨率可达分钟级，能够为公众的道路交通、出行旅游提供更及时、更精细的气象服务。

1.2 系统架构设计

系统架构根据技术流程可详细划分为前端显示层、应用服务层、数据存储层、数据处理层和基础设施层。每一层实现其特定的核心任务，下层为上层提供数据或服务支撑[3]。

1）前端显示层

前端显示层即用户操作界面，显示系统提供的具体功能并展示相应的天气数据，可供用户直接进行操作，并对用户事件作出响应。

2）应用服务层

应用服务层是实现用户操作、面向具体应用的核心层，可对相关功能组件进行集成与封装，包括业务逻辑、安全组件、访问接口、定时任务、微信鉴权、服务网关、消息组件等内容。该层采用REST服务方式实现与前端显示层的请求交互，降低了系统开发的复杂性和耦合度，提高了系统的可扩展性。

3）数据存储层

数据存储层主要存储数据处理层采集到的各类气象数据，并提供给应用服务层进行访问。此外，还需保存系统运行所需的各种数据，比如：地图切片、图形产品、用户信息等。采取关系型数据库和缓存型数据库相结合的存储方式来提高并发处理能力和数据传输效率。

4）数据处理层

负责原始数据的采集和标准化处理，根据系统需要的各类气象数据，定时从不同的数据源获取基础气象数据，并进行必要的预处理，存放到数据库或者设定的文件系统目录。通过对基础数据进行解析、转换、分类、整理、清洗等，获得更加清晰准确的气象数据。

5）基础设施层

基础设施层是系统建设的基础条件，具体内容包含系统运行所需的软硬件环境、本地/云服务器、微信认证、域名SSL证明等，为微信小程序最终上线发布提供了基础保障。

2 小程序的实现

2.1 技术框架

本项目技术选型考虑到产品的性能指标和使用体验以及后续跨端发布、适配其他平台等需求，采用SOA分布式架构，它是一种支持面向服务的架构样式，中间件使用Spring Cloud的服务治理的核心框架来管理整个系统的服务。前端开发框架使用uni-app，该框架使用Vue.js语言开发各种前端应用，开发者只需编写一套代码就可快速发布到多个平台，比如iOS、Android、Web（响应式），以及各种小程序（微信、支付宝等）、快应用等。系统后台服务基于SpringBoot和MyBatis框架进行开发。利用SpringBoot框架，能够简单快速搭建一个Java Web后台服务，它是使用最为广泛的面向服务的开发框架之一。MyBatis是一个基于Java语言的数据持久化框架，内部封装了JDBC，并且对JDBC API的底层访问细节进行了屏蔽，将Java对象实体和数据库进行了映射，使得开发者操作数据库变得非常方便。数据存储层主要采用MySQL数据库搭建，为应用服务层提供有效的数据支撑。缓存数据库采用Ehcache缓存框架来实现，以减少对后台不必要的请求次数，节约系统资源。系统后台服务以Tomcat作为运行平台，以nginx作为负载均衡。

2.2 技术流程

小程序需要通过手机定位获取用户位置信息，为此小程序的前端会在用户首次打开时发送授权提醒，获取用户位置权限后，通过调用微信原生JavaScript SDK接口，获取用户的定位坐标，再调用百度或高德地图API，利用坐标转换技术计算得到用户所在位置的城镇名称[4]，然后通过Web服务接口向后台发起数据请求。后台Web服务根据前端请求的不同类型的数据，进行数据源分析。如果数据存储层有请求的数据，则Web服务向数据库读取相应的数据，然后对数据进行处理加工，将生成的数据文件返回到前端，经过页面视图的渲染后呈现给用户；如果数据不存在，数据处理层会进行即时处理，向数据库写入数据后再将结果反馈给前端。除了基本的气象数据，系统还应用了一些外部数据服务，获取数据的API接口主要包括中国天气网天气数据接口、百度或高德地图数据接口等。小程序需要的气象数据包括：气象预警信息数据、城镇天气预报数据、实况观测气象数据、天气雷达数据、生活气象指数预报数据、空气质量实况和预报数据、日出日落数据等。在综合考虑了预报准确度和系统复杂度等问题后，本系统所用到的气象数据，比如未来15天城镇预报和逐小时模式预报数据，均通过中国天气网API通用数据接口平台获取。

2.3 前端界面设计

小程序根据功能模块结构和“内蒙古天气”微信公众号的底部菜单栏进行了结合，将菜单栏和三个功能模块一一对应。菜单栏的第一个模块的第一项内容，即“看天气”模块也是小程序的默认首页，用户从其他渠道比如扫二维码等方式进入小程序会直接打开该页面。首页的界面设计遵从了简洁实用的原则，排版布局比较清晰美观，符合当下主流的移动端天气应用的设计范式。在交互设计方面突出了操作便捷、功能明确等特点，为了提高用户体验度，各个功能均以醒目图标为入口，降低用户使用门槛。

下面以从上到下的顺序对首页界面设计进行说明：首页的页面顶部显示用户当前的定位位置，在上部主体区域显示的是基于用户当前位置的天气实况信息，包括实时气温和天气现象以及实时空气质量指数，其中空气质量指数可点击跳转至空气质量指数详情页。在其之下显示的是用户当前位置的自动站实况数据，展示的气象要素包括风力风向、降水量、相对湿度、气压和能见度。此区域还会显示最新预警信息的提示图标，点击可跳转至预警信息详情页。页面的中间部分主要显示天气预报数据，首先展示的是今明两天天气预报，这样设计的好处是用户在打开页面时将会快速获得最有用的信息。接下来是24小时预报，展示的是逐小时模式预报数据，气象要素包括温度、天气现象和风力风向。再下面是15天预报，即城镇天气预报，展示的气象要素包括最高/最低气温、天气现象、风力风向和空气质量预报。页面的靠下部分显示的是城市生活气象指数，展示的气象指数包括紫外线强度、运动指数、穿衣指数和洗车指数。页面的最底部是日出日落显示区域，展示用户当前位置的日出日落时间。小程序首页界面展示如图2所示。

2.4 后台数据处理

后台数据处理的流程首先是进行数据采集，通过数据采集系统将不同数据源的气象产品和原始数据集中采集、存储至数据库服务器[5]；然后由数据处理系统对原始数据进行解析、转换、文件名校验等标准化处理，同时进行数据加密和数据压缩，以提升安全性和节省存储空间；最后使用Spring和MyBatis框架，开发符合标准WebService接口规范的API接口服务，包括天气实况、天气预报、气象预警和图形产品等数据接口，实现前端和后台数据的交互。接口主要由服务地址、接口ID、接口参数和返回格式四部分组成，系统为每个数据源分配了一個唯一的接口ID，该ID能反映接口的基本功能、数据种类和检索条件等信息。

3 结束语

通过开发基于微信小程序的公众气象服务应用，满足了公众希望快速便捷查看天气信息的需求，将精细化气象服务产品和主流媒体渠道进行了对接，有效提高了用户体验和气象服务质量，为内蒙古气象部门

进行公众气象服务拓宽了新的渠道，体现了气象工作与时俱进、服务至上的宗旨。

目前“内蒙古天气”微信小程序已完成大部分软件开发，部分模块仍在进行调试、优化和改进。下一步，将继续深入研究微信小程序，挖掘公众对气象服务的需求，继续设计和开发更多精细化、定制化的气象服务产品。同时由于小程序可以在后台与公众号进行关联，今后将加强公众号和小程序的运营推广，利用微信的普及率，持续扩大公众气象服务的覆盖范围，推动公众气象服务向高质量和多元化目标迈进。

参考文献：

[1] 张锋，邓闯，李建，等.基于微信“小程序”的公众气象服务应用[J].气象科技，2019，47（2）：361-366.

[2] 曹锐怡.基于微信小程序的上下学出行气象服务产品设计与实现[J].中国新通信，2021，23（14）：30-31.

[3] 王家乐.基于微信的“雨在哪” 小程序设计与实现[J].电脑知识与技术，2021，17（15）：82-84.

[4] 隋远琦，潘静，那月光，等.基于天气预警信息服务的微信小程序设计[J].现代信息科技，2023，7（10）：6-9.

[5] 司林青.基于微信小程序的空管气象服务应用[J].信息与电脑（理论版），2022，34（11）：102-104.

【通联编辑：谢媛媛】