基于跨平臺移動開發框架的環境評估咨詢App設計

李昂

摘要：為了建立企業、環境評估公司以及環評專家之間溝通的橋梁，設計并實現了基于移動平臺的環境評估咨詢App。移動端采用跨平臺移動開發框架uni-app進行開發，提升了開發效率。為了驗證移動客戶端的跨平臺性能，在不同型號的Android與iOS系統終端上進行測試，實驗表明，該移動客戶端具有較好的兼容性，能夠滿足設計需求，具有一定的實用價值。

關鍵詞：uni-app;跨平臺;環境評估咨詢

Abstract： In order to build a bridge between enterprises， environmental assessment companies and environmental assessment experts， an environmental assessment consulting app based on mobile platform is designed and implemented. The mobile client uses the cross platform mobile development framework uni-app to improve the development efficiency. In order to verify the cross platform performance of the mobile client， tests are carried out on different types of Android and iOS system terminals. Experiments show that the mobile client has good compatibility， can meet the design requirements， and has a certain practical value.

Key words： uni-app; cross platform; environmental assessment and consultation

1 背景

在工業項目的建設過程中，預測和評價擬建的工業或其他建設項目對周圍環境可能產生的影響十分重要。環境評估結果是項目審批中的一個重要環節。傳統的工業企業尋找環境評估服務的渠道一般都是通過熟人介紹以及上網搜索，獲取環境治理與保護的方式都較為零散，缺少系統化，集中化與環境治理工程師直接咨詢的平臺。本系統立足于移動互聯網+環保主題，目的在于建立企業、環境監測公司以及環保專家之間的橋梁。通過本平臺，使需要進行環評的企事業單位能方便找到環境檢測公司，獲取并學習最新的環保政策法規，有問題及時咨詢專家。項目結合GatewayWorker即時通信技術，讓有需求的企業和個人能與環境專家、工程師進行線上交流。

目前，跨平臺移動開發框架的應用研究十分廣泛，但大多基于MUI與H5+框架進行開發[1-6]。MUI是一種輕量級且不依賴第三方js庫的框架，本質上是一種UI框架，其面向js開發的相關文檔比較匱乏，在配合vue.js開發時，在數據渲染、地圖SDK支持與下拉刷新等方面都會存在一些問題。本項目采用一種新的跨平臺移動開發框架uni-app進行構建。該框架與vue.js兼容性良好，已經有數千款插件開源，2020年以來陸續開始有一些關于uni-app開發框架的應用論文發表[7-8]。

2 uni-app框架介紹

uni-app是一個跨平臺移動開發框架，由Dcloud公司使用vue.js開發[9]。使用uni-app開發的項目可以運行于Android、iOS與微信小程序等多種平臺。uni-app的頁面文件遵循vue單文件組件規范，使用flex布局以兼容多端運行。作為一個跨平臺移動開發框架，uni-app提供了條件編譯，其中的組件、代碼片段與配置文件均支持條件編譯，可針對不同的平臺進行代碼的差異化編譯。在用戶界面方面，uni-app提供了uni-ui擴展組件庫，方便了ui界面的開發。

3 總體設計

本系統分為移動客戶端與服務端兩個部分。移動端采用跨平臺移動開發框架uni-app進行構建。服務端使用JAVA語言，采用Springboot+Mybaits框架進行構建，數據庫使用MySQL關系型數據庫。移動端與服務端通過JSON格式數據進行通信。移動客戶端的功能結構圖如圖1所示。

本移動客戶端采用組件式開發思想，通過vue組件來設計用戶界面布局，將常用的界面功能模塊進行封裝。客戶端用戶界面包括主頁界面、項目公示界面、新聞界面、專家咨詢界面、視頻播放界面以及個人中心界面。主頁界面使用swiper滑塊視圖容器實現輪播圖效果，自定義模板實現導航按鈕，使用List組件實現新聞列表與項目公示界面。使用video組件實現視頻播放區域。在個人中心界面中，使用map組件連接騰訊地圖模塊來實現地圖定位效果。基于響應式設計思想，為減小總工程文件大小，提升頁面性能，降低圖片獲取http的請求量，移動客戶端中所有圖標均采用iconfont矢量圖標，以字符圖標形式引入工程并在代碼中進行調用。

4 功能模塊設計與實現

4.1 首頁模塊

首頁具有導航功能，可以通過首頁上的導航按鈕進入其他功能模塊。在uni-app項目中的page.json文件中使用tabBar 配置項設置四個底部導航欄按鈕，分別為首頁、環評公示、專家咨詢以及個人中心。首頁模塊中的輪播圖與列表數據為動態數據，使用uni.request函數發起網絡請求，將服務端提供的api地址設置為“url”參數獲取相應的數據。

4.2 環評公示模塊

該模塊對完成環境影響評估的項目進行公布，方便企業單位查看項目的環評驗收情況。環評公示以列表的形式進行展示。數據獲取方式與首頁相同，并且以onPullDownRefresh函數實現下拉刷新功能，刷新數據加載完畢后，使用stopPullDownRefresh函數停止下拉刷新。