基于微信小程序的救災(zāi)救助信息管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

劉建橋 陳艷* 唐世勇 劉帥

（湖北大學(xué)知行學(xué)院，湖北武漢 430011）

1 概述

近年來，受全球氣候變暖影響，出現(xiàn)越來越多的極端惡劣氣候，導(dǎo)致地質(zhì)災(zāi)害頻繁爆發(fā)，給人民群眾帶來嚴(yán)重?fù)p失，使得政府及民眾愈發(fā)重視災(zāi)害發(fā)生的預(yù)防和救治工作。由于災(zāi)害的突發(fā)性，在救援行動中涉及眾多部門，各部門建立的信息體系較為混亂，且不能及時(shí)有效共享；二是災(zāi)情信息獲取準(zhǔn)確性不高，無法具體明確救助者真實(shí)救助信息，容易導(dǎo)致救災(zāi)過程中救援力量和救援物資分配不均衡。[1-2]

本團(tuán)隊(duì)成員調(diào)研發(fā)現(xiàn)當(dāng)前傳統(tǒng)救災(zāi)設(shè)施設(shè)備功能相對單一，發(fā)展更新較慢，沒有信息溝通設(shè)施，無法實(shí)現(xiàn)精準(zhǔn)救助，救助效率低下?；诖?，我們借助現(xiàn)代信息化技術(shù)，利用微信開發(fā)者工具開發(fā)一款以帳篷為基本單元格，對救助對象、救助信息等各方資訊的上報(bào)和反饋的實(shí)用小程序，實(shí)現(xiàn)信息互通，提高救災(zāi)精準(zhǔn)度，給救援工作提供便利，以期實(shí)現(xiàn)提升救災(zāi)效率和質(zhì)量。

微信開發(fā)者工具集成了開發(fā)調(diào)試、代碼編輯及程序發(fā)布等功能，幫助開發(fā)者簡單和高效地開發(fā)微信小程序[3]，使之具有體量輕小，無需安裝、卸載，觸手可及、用完即走的技術(shù)創(chuàng)新特點(diǎn)，越來越多地被應(yīng)用于不同場景中。小程序開發(fā)主要用到WXML語言、WXSS 樣式、JS 邏輯交互等前端知識，后臺數(shù)據(jù)運(yùn)用微信開發(fā)者工具的“云開發(fā)”功能，在云數(shù)據(jù)庫中對數(shù)據(jù)進(jìn)行操作，實(shí)現(xiàn)界面技術(shù)[4]。

2 救災(zāi)救助信息管理系統(tǒng)設(shè)計(jì)

2.1 信息管理系統(tǒng)功能分析與設(shè)計(jì)

在救災(zāi)救助信息管理系統(tǒng)設(shè)計(jì)方面，以救災(zāi)現(xiàn)場單個(gè)帳篷作為基本網(wǎng)格單元，基于信息通訊需求，實(shí)現(xiàn)帳篷內(nèi)部救助人員信息上報(bào)與后臺統(tǒng)計(jì)、救援物資需求上報(bào)與后臺統(tǒng)計(jì)、緊急信息上報(bào)與后臺反饋、后臺志愿服務(wù)訊息發(fā)布及前臺申請、接收救災(zāi)實(shí)時(shí)信息、心理健康疏導(dǎo)等功能，做到單帳篷救災(zāi)信息與救災(zāi)指揮部的精準(zhǔn)互通，提高救助時(shí)效性，滿足救助者的物質(zhì)需求、心理需求和精神需求等。

系統(tǒng)設(shè)計(jì)包含管理員端和用戶端，用于信息的發(fā)布、上報(bào)、查看和統(tǒng)計(jì)查詢等。

系統(tǒng)用戶端設(shè)置四大模塊，分別是“新聞通知”、“信息提交”、“我的帳篷”和“我的”。用戶可在“新聞通知”頁面可查看受災(zāi)地區(qū)災(zāi)情信息、緊急通知、辟謠信息、物資發(fā)放、心理疏導(dǎo)等信息，也可通過“信息提交”頁面提交本人的基本信息及必要的需求信息上報(bào)，方便管理人員統(tǒng)計(jì)管理。在“我的帳篷”頁面，用戶可查看自己所在帳篷人員的一些基本信息。在“我的”頁面，用戶可以進(jìn)行“志愿者申請”成為志愿者，根據(jù)管理員分配的志愿服務(wù)項(xiàng)目任務(wù)為災(zāi)區(qū)救援和人們的生活貢獻(xiàn)自己的力量；用戶也可以點(diǎn)擊“失物招領(lǐng)”，可發(fā)布用戶撿到的或丟失的物品。如果缺少一些基本生活物資，或需要接受心理咨詢等可通過此處“信息反饋”或“信息提交”頁面提交申請。系統(tǒng)用戶端設(shè)計(jì)基本框架如圖1 所示。

圖1 系統(tǒng)用戶端設(shè)計(jì)基本框架圖

在系統(tǒng)“我的”頁面設(shè)置“管理員登陸”接口，將系統(tǒng)管理員端嵌入到用戶端頁面，可以實(shí)現(xiàn)用戶端和管理員端共用同一系統(tǒng)，減少獨(dú)立開發(fā)管理員端的系統(tǒng)，合二為一，提高系統(tǒng)適用性和融合性。為防止用戶誤登入管理員端，在系統(tǒng)設(shè)置管理員登陸專用賬號和登陸密碼即可。

系統(tǒng)管理員端主要分為“新聞管理”、“志愿者管理”、“物資管理”、“帳篷人員管理”等板塊?！靶侣劰芾怼笨蓪?shí)現(xiàn)災(zāi)情緊急通知、辟謠專區(qū)、災(zāi)情信息、物資發(fā)放、心理疏導(dǎo)等信息的發(fā)布，發(fā)布內(nèi)容將在“新聞通知”界面以模塊化界面顯示?！爸驹刚吖芾怼笨砂l(fā)布志愿者招募信息，可對提交申請的人員進(jìn)行志愿工作的分配?！拔镔Y管理”可查看受災(zāi)人員提交的需求申請，及時(shí)予以反饋。“帳篷人員管理”可查看受災(zāi)人員信息，對受災(zāi)人員進(jìn)行網(wǎng)格化管理。系統(tǒng)管理員端設(shè)計(jì)基本框架圖如圖2 所示。

圖2 系統(tǒng)管理員端設(shè)計(jì)基本框架圖

2.2 系統(tǒng)模塊功能實(shí)現(xiàn)

微信開發(fā)者工具使用流程為點(diǎn)擊新建項(xiàng)目，輸入項(xiàng)目名稱，AppID 等信息，確認(rèn)即可進(jìn)入開發(fā)頁面。在開發(fā)者頁面app.json中配置各個(gè)項(xiàng)目文件，在pages 文件夾中為每個(gè)頁面建立文件夾，在子文件中編寫對應(yīng)頁面的代碼，點(diǎn)擊編譯在左側(cè)模擬器中可查看效果，可以根據(jù)展示效果對代碼進(jìn)行補(bǔ)充和修改。

2.2.1 用戶端模塊設(shè)計(jì)

2.2.1.1 總體設(shè)計(jì)

根據(jù)圖1 布局，本小程序設(shè)計(jì)四個(gè)主要模塊頁面，即“新聞通知”、“信息提交”、“我的帳篷”和“我的”，在底部導(dǎo)航欄予以顯示（如圖3 所示），需首先完成app.json 中的設(shè)置，其核心代碼為

2.2.1.2“新聞通知”模塊的實(shí)現(xiàn)

該部分模塊內(nèi)容主要調(diào)取管理員端發(fā)布的相關(guān)數(shù)據(jù)，實(shí)現(xiàn)前端顯示，頂部導(dǎo)航欄包含“緊急通知”“辟謠專區(qū)”等5 個(gè)單元。以“緊急通知”為例，界面如圖3 所示，前端顯示新聞標(biāo)題、圖片、正文內(nèi)容、發(fā)布時(shí)間以及消息來源，用戶可以實(shí)時(shí)瀏覽管理員端發(fā)布的最新通知詳情內(nèi)容，其相關(guān)核心代碼為

圖3“緊急通知”界面

圖4“信息提交”界面

圖5“我的”界面

圖6“失物招領(lǐng)”界面

2.2.1.4“我的帳篷”模塊的實(shí)現(xiàn)

該模塊內(nèi)容顯示單帳篷內(nèi)各成員基本情況，方便相互了解情況，有助于互幫互助，數(shù)據(jù)內(nèi)容主要調(diào)取后臺從“信息提交”頁面獲得的數(shù)據(jù)，根據(jù)相關(guān)設(shè)定，展現(xiàn)基本關(guān)鍵信息，其實(shí)現(xiàn)的核心代碼為

2.2.1.5“我的”模塊的實(shí)現(xiàn)

該模塊內(nèi)容主要以個(gè)人事務(wù)性行為相關(guān)的信息收集為單元（管理員登陸除外），其界面如圖5 所示，方便開展行為信息交流，包括發(fā)布失物招領(lǐng)、志愿活動申請、信息反饋等，加強(qiáng)不同帳篷單元內(nèi)救助者之間的互幫互助，以失物招領(lǐng)為例，用戶可以點(diǎn)擊頁面發(fā)布按鈕以文字或圖片形式發(fā)布撿到的物品或丟失的物品內(nèi)容，發(fā)布成功后可在撿到物品界面以及丟失物品界面予以展示，并可對物品信息狀態(tài)予以更新展示，界面如圖6 所示。該模塊主要實(shí)現(xiàn)形式主要同信息提交模塊相似，此處不再贅述。

2.2.2 管理員端模塊設(shè)計(jì)

在上文已述，管理員端登陸接口嵌在用戶端“我的”模塊之下，管理員通過此處進(jìn)行信息數(shù)據(jù)的發(fā)布與管理，為避免普通用戶誤入，特在系統(tǒng)設(shè)置管理員賬戶及密碼，需通過校驗(yàn)后予以登陸，登陸成功后，顯示管理員頁面，界面如圖7 所示。頂部顯示歡迎圖片，主體部分是4 個(gè)模塊的入口，采用不同顏色進(jìn)行渲染，包含新聞管理，志愿者管理，需求統(tǒng)計(jì)和帳篷人員管理。

圖7 管理員操作界面

新聞管理模塊主要實(shí)現(xiàn)后臺發(fā)布數(shù)據(jù)內(nèi)容，管理員以文字、圖片等形式上傳后，在前端顯示給救助者用戶有關(guān)新聞通知類，管理員點(diǎn)擊新聞發(fā)布按鈕按界面圖顯示步驟操作即可完成各類信息發(fā)布，亦可對已發(fā)布資訊進(jìn)行刪除操作，單擊已發(fā)布文檔即可進(jìn)行操作。

志愿者管理模塊為管理員根據(jù)需求按類別發(fā)布具體服務(wù)內(nèi)容，并根據(jù)志愿者申請?zhí)顖?bào)信息可對志愿申請進(jìn)行統(tǒng)籌安排，并下發(fā)具體安排信息至申請者前端，實(shí)現(xiàn)志愿服務(wù)信息互通。帳篷人員管理模塊主要是對用戶端救助者進(jìn)行信息提交后，管理員在后臺根據(jù)實(shí)際管理需求，按一定條件對數(shù)據(jù)進(jìn)行統(tǒng)計(jì)管理，可用于服務(wù)管理者進(jìn)行動態(tài)決策管理，界面如圖8 所示。需求統(tǒng)計(jì)模塊主要是對用戶端救助者進(jìn)行需求信息提交后，管理員在后臺按類別對數(shù)據(jù)進(jìn)行統(tǒng)計(jì)管理，界面實(shí)現(xiàn)如圖9 所示。

圖8 帳篷人員管理搜索界面

圖9 需求統(tǒng)計(jì)界面

3 結(jié)論

本文以救災(zāi)救助為應(yīng)用場景，利用JavaScript + WXSS +WXML 等界面實(shí)現(xiàn)技術(shù)，完成了一種基于小程序的救災(zāi)救助信息管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)，構(gòu)筑了應(yīng)急救災(zāi)事故現(xiàn)場信息的社會化采集渠道，為應(yīng)急管理部門或救災(zāi)指揮部快速獲取現(xiàn)場情況提供精準(zhǔn)信息，同時(shí)設(shè)計(jì)有發(fā)布信息的功能，可為受災(zāi)群眾及時(shí)了解災(zāi)情信息提供便利。

小程序頁面人性化設(shè)置，操作流程簡單，功能實(shí)用，可以很好實(shí)現(xiàn)信息互通，提高救災(zāi)精準(zhǔn)度，極大程度上減少救災(zāi)人員的工作量，提高了救災(zāi)人員的工作效率，同時(shí)方便了受災(zāi)人員的妥善安置，提升救災(zāi)效率和質(zhì)量，給災(zāi)后救援工作提供便利，保障受災(zāi)群眾的切身利益，具有較好的實(shí)用性，實(shí)現(xiàn)以人為本。同時(shí)本系統(tǒng)可以搭載在各救災(zāi)設(shè)施運(yùn)用場景，使之在智能化與多功能化方面有較大突破，在救災(zāi)領(lǐng)域有很好的運(yùn)用市場，具備極高的市場推廣價(jià)值，同時(shí)為救災(zāi)產(chǎn)品的設(shè)計(jì)提供新的指導(dǎo)方向。