基于天氣預(yù)警信息服務(wù)的微信小程序設(shè)計(jì)

隋遠(yuǎn)琦 潘靜 那月光 徐薇 王金丹

摘? 要：基于微信小程序的天氣預(yù)警信息服務(wù)系統(tǒng)前端使用HTML、CSS、JavaScript技術(shù)，程序后臺(tái)數(shù)據(jù)處理采用MySQL數(shù)據(jù)庫(kù)搭建，為天氣預(yù)報(bào)預(yù)警服務(wù)小程序作數(shù)據(jù)支撐。通過(guò)預(yù)警信息推送模塊、預(yù)警信息查詢模塊、預(yù)警信息庫(kù)三部分建設(shè)實(shí)現(xiàn)我省氣象災(zāi)害預(yù)警信息推送微信小程序。微信小程序能夠創(chuàng)新公共氣象服務(wù)供給模式，有效擴(kuò)展遼寧省氣象服務(wù)信息傳播渠道建設(shè)，讓公眾能更加便捷、高效地獲得預(yù)警信息，推進(jìn)氣象融入數(shù)字生活，加快數(shù)字化氣象服務(wù)普惠應(yīng)用。

關(guān)鍵詞：天氣預(yù)警信息；氣象服務(wù)；微信小程序

中圖分類號(hào)：TP311? ? 文獻(xiàn)標(biāo)識(shí)碼：A? 文章編號(hào)：2096-4706（2023）10-0006-04

Abstract： The front terminal of the weather early warning information service system based on Mini Program uses HTML， CSS， JavaScript technology， and the background data processing of the program is built by using MySQL database to support the weather forecast and early warning service program. Through the construction of early warning information push module， early warning information query module and early warning information database， the Mini Program for pushing early warning information of meteorological disasters in our province is realized. The Mini Program can innovate the public meteorological service supply mode， effectively expand the construction of meteorological service information dissemination channels in our province， and make the public more convenient and efficient to obtain early warning information， promote the integration of meteorology into digital life， and accelerate the inclusive application of digital meteorological services.

Keywords： weather early warning information; meteorological service; Mini Program

0? 引? 言

由天氣原因引起的自然災(zāi)害對(duì)人們?nèi)粘Ｉ钌械挠绊憳O大，為了更好地服務(wù)國(guó)家、服務(wù)人民，避免氣象災(zāi)害造成嚴(yán)重的社會(huì)影響和經(jīng)濟(jì)損失，我們需要進(jìn)一步拓寬預(yù)警信息傳播途徑，讓公眾獲取氣象災(zāi)害預(yù)警信息的渠道更加多樣、便捷。隨著科技的進(jìn)步，利用智能手機(jī)的優(yōu)越性發(fā)布信息成為發(fā)展的必然趨勢(shì)，很多氣象部門采用微信公眾平臺(tái)來(lái)傳遞天氣預(yù)報(bào)信息[1]。微信小程序是繼公眾號(hào)之后，微信公眾平臺(tái)推出的一種全新的將用戶與服務(wù)相結(jié)合的高效模式。微信小程序不需要訂閱和下載等煩瑣的操作，用戶不用擔(dān)心過(guò)于麻煩以及安裝太多應(yīng)用占內(nèi)存等問(wèn)題，所以小程序可以給用戶提供更加簡(jiǎn)單明了、方便快捷的服務(wù)體驗(yàn)。

與傳統(tǒng)氣象預(yù)警信息發(fā)布方式相比，小程序具有時(shí)效性強(qiáng)、覆蓋面廣、方便快捷的優(yōu)勢(shì)，通過(guò)手機(jī)微信平臺(tái)的實(shí)時(shí)發(fā)布預(yù)警信息，根據(jù)用戶個(gè)性化需求實(shí)時(shí)獲取、查詢統(tǒng)計(jì)預(yù)警信息，因此開發(fā)基于天氣預(yù)警信息服務(wù)的微信小程序通過(guò)發(fā)布快速、優(yōu)質(zhì)的氣象服務(wù)信息，向用戶廣泛、精準(zhǔn)推送服務(wù)消息，在一定程度上提高用戶體驗(yàn)和氣象服務(wù)質(zhì)量，使社會(huì)公眾能夠便捷地獲取準(zhǔn)確的氣象預(yù)警信息。拓展氣象預(yù)警信息發(fā)布手段和發(fā)布渠道，加強(qiáng)高品質(zhì)生活氣象服務(wù)供給，推動(dòng)氣象服務(wù)向高品質(zhì)和多樣化升級(jí)。

1? 系統(tǒng)設(shè)計(jì)

1.1? 整體結(jié)構(gòu)設(shè)計(jì)

本系統(tǒng)根據(jù)功能需求可詳細(xì)劃分為應(yīng)用層、服務(wù)層、數(shù)據(jù)層和基礎(chǔ)層。應(yīng)用層負(fù)責(zé)業(yè)務(wù)邏輯處理，提供系統(tǒng)業(yè)務(wù)服務(wù)的具體應(yīng)用，顯示功能模塊和相應(yīng)數(shù)據(jù)信息，可供用戶直接進(jìn)行操作。服務(wù)層是面向具體的應(yīng)用、實(shí)現(xiàn)用戶操作的重要一層，可對(duì)相關(guān)業(yè)務(wù)組件進(jìn)行集成與封裝，包括安全組件、業(yè)務(wù)邏輯、微信鑒權(quán)、定時(shí)任務(wù)、服務(wù)網(wǎng)關(guān)、消息組件等內(nèi)容。數(shù)據(jù)層是為系統(tǒng)提供數(shù)據(jù)存儲(chǔ)管理的關(guān)鍵，為了提高并發(fā)處理能力和數(shù)據(jù)傳輸效率，采取關(guān)系型數(shù)據(jù)庫(kù)和緩存型數(shù)據(jù)庫(kù)相結(jié)合的存儲(chǔ)方式?；A(chǔ)層是系統(tǒng)搭建的基本保障，具體內(nèi)容包含本地/云服務(wù)器、域名ssl證明、微信認(rèn)證等，為整體系統(tǒng)建設(shè)提供了良好的基礎(chǔ)保障。系統(tǒng)的整體構(gòu)架如圖1所示。

1.2? 系統(tǒng)功能模塊設(shè)計(jì)

微信小程序主要由預(yù)警信息推送模塊、預(yù)警信息查詢、預(yù)警信息庫(kù)三大部分組成，如圖2所示?？傮w設(shè)計(jì)如下：

1）預(yù)警信息推送模塊設(shè)計(jì)：預(yù)警信息推送的接口遵循微信小程序數(shù)據(jù)接口規(guī)范，接口方式的接口內(nèi)容與取值方式保持一致。實(shí)現(xiàn)一鍵式發(fā)布遼寧省內(nèi)預(yù)警信息，有效縮短預(yù)警信息服務(wù)時(shí)間，實(shí)現(xiàn)預(yù)警信息快速、及時(shí)傳達(dá)。

2）預(yù)警信息查詢模塊設(shè)計(jì)：可根據(jù)用戶的個(gè)性化需求按照時(shí)間、災(zāi)種、地區(qū)等進(jìn)行分類查詢，在不同分類使信息獲取更加精準(zhǔn)、多樣、便捷。用戶可自主選擇時(shí)間段查詢預(yù)警信息，在災(zāi)種、地區(qū)分類中建立相關(guān)索引，提高查詢效率。

3）預(yù)警信息庫(kù)設(shè)計(jì)：與遼寧省突發(fā)事件預(yù)警信息發(fā)布系統(tǒng)數(shù)據(jù)庫(kù)進(jìn)行對(duì)接，獲取預(yù)警信息數(shù)據(jù)，完成預(yù)警信息庫(kù)預(yù)警信息表、用戶信息表、位置信息表的數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)，并按照數(shù)據(jù)結(jié)構(gòu)完成數(shù)據(jù)關(guān)聯(lián)表的設(shè)計(jì)與構(gòu)建，實(shí)現(xiàn)數(shù)據(jù)庫(kù)的數(shù)據(jù)存儲(chǔ)、修改、查詢、刪除功能。小程序開發(fā)內(nèi)容包括數(shù)據(jù)庫(kù)設(shè)計(jì)、實(shí)現(xiàn)、基礎(chǔ)數(shù)據(jù)采集、數(shù)據(jù)加工處理等。

1.3? 小程序詳細(xì)模塊設(shè)計(jì)

1.3.1? 用戶登錄

用戶登錄模塊主要是驗(yàn)證用戶身份以及獲取訪問(wèn)控制權(quán)限。為了簡(jiǎn)化登錄流程，用戶可選擇通過(guò)對(duì)小程序授權(quán)直接進(jìn)行微信自動(dòng)登錄，點(diǎn)擊登錄按鈕的同時(shí)觸發(fā)事件GetUserInfo，小程序自動(dòng)獲取用戶的頭像、昵稱。平臺(tái)在獲取用戶授權(quán)之后方可獲取加密的用戶信息，并將用戶信息數(shù)據(jù)存儲(chǔ)到后臺(tái)數(shù)據(jù)庫(kù)，數(shù)據(jù)存儲(chǔ)成功后前端用戶登錄成功跳轉(zhuǎn)到小程序首頁(yè)[2，3]。登錄小程序流程圖如圖3所示。

1.3.2? 預(yù)警信息推送

在用戶登錄成功后，首頁(yè)顯示遼寧省近期發(fā)布的預(yù)警信息，用戶需點(diǎn)擊訂閱氣象預(yù)警方可獲取全部的預(yù)警信息，發(fā)布新的預(yù)警信息會(huì)自動(dòng)推送到用戶微信端，由于微信顯示字?jǐn)?shù)受限，用戶可點(diǎn)擊查看完整的預(yù)警內(nèi)容。預(yù)警推送模塊簡(jiǎn)化用戶操作過(guò)程，提高使用效率，有利于提高預(yù)警信息的公眾覆蓋面。

1.3.3? 預(yù)警信息查詢

用戶點(diǎn)擊查詢模塊，根據(jù)用戶的個(gè)性化需求選擇時(shí)間、災(zāi)種、地區(qū)等信息后點(diǎn)擊查詢按鈕，自動(dòng)跳轉(zhuǎn)到所查詢預(yù)警信息結(jié)果的頁(yè)面，頁(yè)面展示查詢信息的總數(shù)以及具體內(nèi)容，單頁(yè)展示內(nèi)容有限，無(wú)法展示全部預(yù)警內(nèi)容可點(diǎn)擊下一頁(yè)獲取。

1.3.4? 預(yù)警信息數(shù)據(jù)傳輸

微信小程序是主要基于氣象局內(nèi)部私有云平臺(tái)進(jìn)行建設(shè)，數(shù)據(jù)環(huán)境主要基于遼寧省氣象大數(shù)據(jù)云平臺(tái)-天擎數(shù)據(jù)環(huán)境，預(yù)警信息數(shù)據(jù)來(lái)源于遼寧省突發(fā)事件預(yù)警信息發(fā)布平臺(tái)[4]。

預(yù)警信息處理、傳輸模塊利用Hibernate對(duì)應(yīng)模型數(shù)據(jù)進(jìn)行持久化，將預(yù)警信息編碼化后以邏輯的數(shù)據(jù)模型匹配發(fā)布區(qū)域、發(fā)布手段信息調(diào)用傳輸接口，將形成的預(yù)警信息包放入對(duì)應(yīng)的傳輸通道信息橫向傳輸、縱向傳輸、跨網(wǎng)絡(luò)域傳輸。

2? 關(guān)鍵技術(shù)

小程序使用微信官方發(fā)布的微信開發(fā)者工具和微信原生框架，系統(tǒng)主要是由界面前端和后臺(tái)數(shù)據(jù)兩部分構(gòu)成，如圖4所示。界面前端主要是面向用戶并對(duì)其展示程序主界面和各子界面，設(shè)計(jì)思路考慮用戶的實(shí)用性和可訪問(wèn)性，為用戶提供更專業(yè)的可視化服務(wù)。程序界面前端的實(shí)現(xiàn)主要采用JavaScript、CSS、HTML5等開發(fā)語(yǔ)言編寫[5]，采用Vant UI框架設(shè)計(jì)用戶交互界面。程序后臺(tái)數(shù)據(jù)處理主要采用MySQL數(shù)據(jù)庫(kù)搭建，為本天氣預(yù)報(bào)預(yù)警服務(wù)小程序提供有效的數(shù)據(jù)支撐，為了減輕服務(wù)器的壓力，采用Ehcache緩存框架實(shí)現(xiàn)緩存數(shù)據(jù)庫(kù)的搭建。小程序客戶端的頁(yè)面是通過(guò)網(wǎng)絡(luò)與服務(wù)器API接口來(lái)實(shí)現(xiàn)的，利用接口進(jìn)行數(shù)據(jù)的傳輸。根據(jù)業(yè)務(wù)需求，Web服務(wù)器向數(shù)據(jù)庫(kù)獲取訪問(wèn)權(quán)限以及包含相應(yīng)數(shù)據(jù)的PHP文件，進(jìn)而對(duì)數(shù)據(jù)進(jìn)行加工處理，生成可滿足用戶個(gè)性化需求的數(shù)據(jù)返回到客戶端，經(jīng)過(guò)頁(yè)面視圖的渲染后呈現(xiàn)給用戶。

2.1? 微信小程序

微信小程序的框架核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，該系統(tǒng)由視圖層和邏輯層兩部分構(gòu)成[6]。視圖層是系統(tǒng)操作界面，面向的是用戶。邏輯層包括Web管理系統(tǒng)，能夠完成API調(diào)用。當(dāng)用戶進(jìn)行操作時(shí)，視圖層將事件發(fā)送給邏輯層，邏輯層接收視圖層事件反饋后，將處理后數(shù)據(jù)發(fā)送回視圖層。小程序利用JavaScript框架將視圖層和邏輯層有效的連接起來(lái)，JavaScript框架起到兩者橋梁的作用，有效保證視圖層與邏輯層的良好交互。整體的小程序系統(tǒng)框架如圖5所示。

2.2? JavaScript

JavaScript是一種可科跨平臺(tái)的解釋型的編程語(yǔ)言。廣泛用于Web應(yīng)用開發(fā)中，通常情況下是嵌入HTML中來(lái)實(shí)現(xiàn)其功能的。微信小程序開發(fā)框架的邏輯層是由JavaScript編寫，為了實(shí)現(xiàn)數(shù)據(jù)與用戶之間的交互。使用JavaScript來(lái)調(diào)用小程序的API來(lái)完成視圖層與邏輯層的業(yè)務(wù)需求[7]。

2.3? CSS框架

CSS是一種Web前端開發(fā)的基礎(chǔ)語(yǔ)言，有規(guī)范項(xiàng)目開發(fā)流程，CSS代碼具有清晰、簡(jiǎn)單、便于維護(hù)等優(yōu)勢(shì)，有利于提高微信小程序的工作效率。本文利用CSS框架對(duì)小程序頁(yè)面排版、網(wǎng)格布局、表單樣式等模塊進(jìn)行設(shè)計(jì)。

2.4? HTML5

HTML5是構(gòu)建Web內(nèi)容的一種語(yǔ)言描述方式，用來(lái)描述微信小程序頁(yè)面的結(jié)構(gòu)[8]。相較于傳統(tǒng)的技術(shù)，HTML5的語(yǔ)法特征更加明顯，使用更加便捷，更重要的是與SVG的內(nèi)容相結(jié)合，便于在網(wǎng)頁(yè)中使用多媒體技術(shù)。

2.5? 位置坐標(biāo)獲取

微信小程序與定位引擎系統(tǒng)已經(jīng)成功對(duì)接，用戶首次進(jìn)入小程序會(huì)接受授權(quán)提醒，在獲得用戶位置權(quán)限后，調(diào)用微信小程序JavaScript SDK接口，獲取用戶的定位坐標(biāo)，服務(wù)器將坐標(biāo)信號(hào)以Json字符串的形式存儲(chǔ)到定位數(shù)據(jù)庫(kù)中，然后通過(guò)jQuery Ajax技術(shù)將這些信息發(fā)送至高德地圖，高德地圖平臺(tái)利用坐標(biāo)轉(zhuǎn)換技術(shù)計(jì)算得到城市名稱，顯示在小程序首頁(yè)。

2.6? Ehcache緩存技術(shù)

Ehcache是一種較輕量級(jí)的開源分布式緩存，是當(dāng)前使用較廣泛的基于Java的通用緩存，具有快速、使用簡(jiǎn)單、包容性強(qiáng)等優(yōu)勢(shì)[9]。它支持內(nèi)存和磁盤存儲(chǔ)，是內(nèi)存充裕的緩存加載器。可以與RMI、REST、可插入API等技術(shù)相結(jié)合，在減輕數(shù)據(jù)庫(kù)壓力的同時(shí)縮短交互響應(yīng)時(shí)間。

遼寧氣象預(yù)警小程序?yàn)榱斯?jié)省用戶的時(shí)間成本、提高系統(tǒng)資源使用效率，在程序設(shè)計(jì)的時(shí)候利用Ehcache緩存技術(shù)，減少對(duì)后臺(tái)不必要的請(qǐng)求次數(shù)，節(jié)約系統(tǒng)資源。在獲取用戶請(qǐng)求時(shí)提供兩種查詢方式，首次直接調(diào)用數(shù)據(jù)庫(kù)進(jìn)行查詢，如果從數(shù)據(jù)庫(kù)中請(qǐng)求相同的數(shù)據(jù)信息，系統(tǒng)會(huì)自動(dòng)從緩存數(shù)據(jù)庫(kù)中獲取以往的數(shù)據(jù)信息，有效避免了重復(fù)調(diào)用的資源浪費(fèi)問(wèn)題，縮短了系統(tǒng)數(shù)據(jù)響應(yīng)時(shí)間，提高了用戶的使用體驗(yàn)感。

2.7? Maven項(xiàng)目管理

Maven是一種基于項(xiàng)目對(duì)象模型（POM）的項(xiàng)目管理工具，廣泛應(yīng)用于Java自動(dòng)構(gòu)建項(xiàng)目。它的基礎(chǔ)核心為為依賴管理系統(tǒng)，系統(tǒng)引入了Maven之后，會(huì)自動(dòng)把項(xiàng)目打包到Tomcat中，在Pom文件中形成依賴，無(wú)須在項(xiàng)目中煩瑣的添加jar包，操作簡(jiǎn)單便捷，有效節(jié)省了使用者的時(shí)間成本。

3? 實(shí)驗(yàn)結(jié)果

遼寧氣象預(yù)警小程序使用微信開發(fā)者工具和Idea開發(fā)工具。用戶需進(jìn)入小程序并訂閱預(yù)警信息，服務(wù)器接受定時(shí)任務(wù)，有預(yù)警信息的情況下存儲(chǔ)到數(shù)據(jù)庫(kù)中，如果有新的預(yù)警信息再?gòu)臄?shù)據(jù)庫(kù)返回到服務(wù)器，服務(wù)器將預(yù)警信息精準(zhǔn)發(fā)送給訂閱的用戶。圖6為遼寧氣象預(yù)警小程序運(yùn)行模式。為了驗(yàn)證系統(tǒng)的主要功能模塊，遼寧氣象預(yù)警服務(wù)小程序使用微信開發(fā)工具進(jìn)行測(cè)試。

3.1? 登錄模塊

用戶無(wú)須注冊(cè)，只需授權(quán)位置信息后便可實(shí)現(xiàn)微信快速登錄。登錄成功后進(jìn)入首頁(yè)展示，首頁(yè)上部展示小程序名稱，中上部展示近期發(fā)布的預(yù)警信息，方便用戶及時(shí)掌握預(yù)警信息，中部用戶可根據(jù)需求點(diǎn)擊訂閱氣象預(yù)警，以便后續(xù)用戶在第一時(shí)間獲取精準(zhǔn)的預(yù)警信息。底部添加了個(gè)人中心模塊，點(diǎn)擊可獲取用戶登錄信息及定位信息，如圖7所示。

3.2? 登預(yù)警信息推送模塊

獲取用戶定位信息，顯示當(dāng)前所在城市名稱，并獲取遼寧省發(fā)布的預(yù)警信息，如圖8所示。用戶在成功訂閱氣象預(yù)警信息的前提下，微信端會(huì)自動(dòng)推送氣象災(zāi)害預(yù)警信息。

3.3? 登預(yù)警信息查詢模塊

為了簡(jiǎn)化用戶操作，用戶可根據(jù)自身需求在時(shí)間下滑欄選擇具體時(shí)間搜索[10]；在全省下滑欄選擇市級(jí)城市搜索；在災(zāi)種下滑欄中選擇不同災(zāi)種類型搜索。對(duì)應(yīng)的界面如圖9、圖10所示。

4? 結(jié)? 論

基于微信小程序的天氣預(yù)警信息服務(wù)系統(tǒng)經(jīng)過(guò)測(cè)試，各個(gè)模塊功能均已實(shí)現(xiàn)并且能夠穩(wěn)定運(yùn)行。本系統(tǒng)為所有小程序用戶提供一個(gè)快速便捷掌握、查詢氣象預(yù)警信息的平臺(tái)。與傳統(tǒng)氣象預(yù)警信息發(fā)布方式相比，預(yù)警服務(wù)小程序增強(qiáng)廣大公眾獲得預(yù)警信息的便捷性，有效提高了提高用戶體驗(yàn)和氣象服務(wù)質(zhì)量。微信小程序?yàn)槲沂庀箢A(yù)警工作的呈現(xiàn)又提供了新的渠道，更能夠體現(xiàn)我省氣象工作與時(shí)俱進(jìn)、服務(wù)至上的理念，推進(jìn)生活性氣象服務(wù)向高質(zhì)量和多元化目標(biāo)升級(jí)。

參考文獻(xiàn)：

[1] 畢陟，宋海強(qiáng).微信公眾平臺(tái)在公共氣象服務(wù)領(lǐng)域中的應(yīng)用 [J].現(xiàn)代商業(yè)，2016（28）：180-181.

[2] 彭佳麗，鄭劍.基于微信小程序開發(fā)的天氣小管家平臺(tái) [J].電腦知識(shí)與技術(shù)，2019，15（12）：67-69.

[3] 溫志達(dá)，崔韶，高雷博，等.農(nóng)業(yè)氣象服務(wù)系統(tǒng)的微信小程序設(shè)計(jì)與實(shí)現(xiàn) [J].甘肅農(nóng)業(yè)，2022（3）：112-115.

[4] 王家樂(lè).基于微信的“雨在哪”小程序設(shè)計(jì)與實(shí)現(xiàn) [J].電腦知識(shí)與技術(shù)，2021，17（15）：82-84.

[5] 毛雨萱，楊平恒.基于微信小程序的天氣預(yù)報(bào)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn) [J].電腦知識(shí)與技術(shù)，2022，18（20）：54-56.

[6] 周文潔.微信小程序開發(fā)零基礎(chǔ)入門 [M].北京：清華大學(xué)出版社，2019：1-36.

[7] 李正仁，周凱虎，王全貴，等.基于Node.js與微信小程序的活動(dòng)管理平臺(tái) [J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2019，28（12）：86-92.

[8] 鄒瓊俊.H5+跨平臺(tái)移動(dòng)應(yīng)用實(shí)戰(zhàn)開發(fā) [M].北京：北京航空航天大學(xué)出版社，2019：52-93.

[9]王萍.SpringBoot項(xiàng)目中EhCache緩存技術(shù)的實(shí)現(xiàn) [J].電腦知識(shí)與技術(shù)，2021，17（29）：79-81.

[10] 黑馬程序員.微信小程序開發(fā)實(shí)戰(zhàn) [M].北京：人民郵電出版社，2019：180-192.

作者簡(jiǎn)介：隋遠(yuǎn)琦（1995－），女，漢族，遼寧丹東人，助理工程師，碩士，主要研究方向：計(jì)算機(jī)應(yīng)用的研究；潘靜（1979－），女，漢族，遼寧沈陽(yáng)人，高級(jí)工程師，碩士，主要研究方向：氣象信息服務(wù)的研究。