基于天氣預警信息服務的微信小程序設計

隋遠琦 潘靜 那月光 徐薇 王金丹

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

關鍵詞：天氣預警信息；氣象服務；微信小程序

中圖分類號：TP311? ? 文獻標識碼：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? 引? 言

由天氣原因引起的自然災害對人們日常生活生中的影響極大，為了更好地服務國家、服務人民，避免氣象災害造成嚴重的社會影響和經濟損失，我們需要進一步拓寬預警信息傳播途徑，讓公眾獲取氣象災害預警信息的渠道更加多樣、便捷。隨著科技的進步，利用智能手機的優越性發布信息成為發展的必然趨勢，很多氣象部門采用微信公眾平臺來傳遞天氣預報信息[1]。微信小程序是繼公眾號之后，微信公眾平臺推出的一種全新的將用戶與服務相結合的高效模式。微信小程序不需要訂閱和下載等煩瑣的操作，用戶不用擔心過于麻煩以及安裝太多應用占內存等問題，所以小程序可以給用戶提供更加簡單明了、方便快捷的服務體驗。

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

1? 系統設計

1.1? 整體結構設計

本系統根據功能需求可詳細劃分為應用層、服務層、數據層和基礎層。應用層負責業務邏輯處理，提供系統業務服務的具體應用，顯示功能模塊和相應數據信息，可供用戶直接進行操作。服務層是面向具體的應用、實現用戶操作的重要一層，可對相關業務組件進行集成與封裝，包括安全組件、業務邏輯、微信鑒權、定時任務、服務網關、消息組件等內容。數據層是為系統提供數據存儲管理的關鍵，為了提高并發處理能力和數據傳輸效率，采取關系型數據庫和緩存型數據庫相結合的存儲方式。基礎層是系統搭建的基本保障，具體內容包含本地/云服務器、域名ssl證明、微信認證等，為整體系統建設提供了良好的基礎保障。系統的整體構架如圖1所示。

1.2? 系統功能模塊設計

微信小程序主要由預警信息推送模塊、預警信息查詢、預警信息庫三大部分組成，如圖2所示。總體設計如下：

1）預警信息推送模塊設計：預警信息推送的接口遵循微信小程序數據接口規范，接口方式的接口內容與取值方式保持一致。實現一鍵式發布遼寧省內預警信息，有效縮短預警信息服務時間，實現預警信息快速、及時傳達。

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

3）預警信息庫設計：與遼寧省突發事件預警信息發布系統數據庫進行對接，獲取預警信息數據，完成預警信息庫預警信息表、用戶信息表、位置信息表的數據結構設計，并按照數據結構完成數據關聯表的設計與構建，實現數據庫的數據存儲、修改、查詢、刪除功能。小程序開發內容包括數據庫設計、實現、基礎數據采集、數據加工處理等。

1.3? 小程序詳細模塊設計

1.3.1? 用戶登錄

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

1.3.2? 預警信息推送

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

1.3.3? 預警信息查詢

用戶點擊查詢模塊，根據用戶的個性化需求選擇時間、災種、地區等信息后點擊查詢按鈕，自動跳轉到所查詢預警信息結果的頁面，頁面展示查詢信息的總數以及具體內容，單頁展示內容有限，無法展示全部預警內容可點擊下一頁獲取。

1.3.4? 預警信息數據傳輸

微信小程序是主要基于氣象局內部私有云平臺進行建設，數據環境主要基于遼寧省氣象大數據云平臺-天擎數據環境，預警信息數據來源于遼寧省突發事件預警信息發布平臺[4]。

預警信息處理、傳輸模塊利用Hibernate對應模型數據進行持久化，將預警信息編碼化后以邏輯的數據模型匹配發布區域、發布手段信息調用傳輸接口，將形成的預警信息包放入對應的傳輸通道信息橫向傳輸、縱向傳輸、跨網絡域傳輸。

2? 關鍵技術

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

2.1? 微信小程序

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

2.2? JavaScript

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

2.3? CSS框架

CSS是一種Web前端開發的基礎語言，有規范項目開發流程，CSS代碼具有清晰、簡單、便于維護等優勢，有利于提高微信小程序的工作效率。本文利用CSS框架對小程序頁面排版、網格布局、表單樣式等模塊進行設計。

2.4? HTML5

HTML5是構建Web內容的一種語言描述方式，用來描述微信小程序頁面的結構[8]。相較于傳統的技術，HTML5的語法特征更加明顯，使用更加便捷，更重要的是與SVG的內容相結合，便于在網頁中使用多媒體技術。

2.5? 位置坐標獲取

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

2.6? Ehcache緩存技術

Ehcache是一種較輕量級的開源分布式緩存，是當前使用較廣泛的基于Java的通用緩存，具有快速、使用簡單、包容性強等優勢[9]。它支持內存和磁盤存儲，是內存充裕的緩存加載器。可以與RMI、REST、可插入API等技術相結合，在減輕數據庫壓力的同時縮短交互響應時間。

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

2.7? Maven項目管理

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

3? 實驗結果

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

3.1? 登錄模塊

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

3.2? 登預警信息推送模塊

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

3.3? 登預警信息查詢模塊

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

4? 結? 論

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

參考文獻：

[1] 畢陟，宋海強.微信公眾平臺在公共氣象服務領域中的應用 [J].現代商業，2016（28）：180-181.

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

[3] 溫志達，崔韶，高雷博，等.農業氣象服務系統的微信小程序設計與實現 [J].甘肅農業，2022（3）：112-115.

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

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

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

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

[8] 鄒瓊俊.H5+跨平臺移動應用實戰開發 [M].北京：北京航空航天大學出版社，2019：52-93.

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

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

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