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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.3.1? 用戶登錄

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

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

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

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

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

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

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

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

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

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

2.1? 微信小程序

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

2.2? JavaScript

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

2.3? CSS框架

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

2.4? HTML5

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

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

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

2.6? Ehcache緩存技術(shù)

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

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

2.7? Maven項目管理

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

3? 實驗結(jié)果

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

3.1? 登錄模塊

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

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

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

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

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

4? 結(jié)? 論

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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

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

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

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