基于跨平臺移動開發(fā)框架的環(huán)境評估咨詢App設(shè)計

李昂

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

關(guān)鍵詞：uni-app;跨平臺;環(huán)境評估咨詢

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 背景

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

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

2 uni-app框架介紹

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

3 總體設(shè)計

本系統(tǒng)分為移動客戶端與服務(wù)端兩個部分。移動端采用跨平臺移動開發(fā)框架uni-app進行構(gòu)建。服務(wù)端使用JAVA語言，采用Springboot+Mybaits框架進行構(gòu)建，數(shù)據(jù)庫使用MySQL關(guān)系型數(shù)據(jù)庫。移動端與服務(wù)端通過JSON格式數(shù)據(jù)進行通信。移動客戶端的功能結(jié)構(gòu)圖如圖1所示。

本移動客戶端采用組件式開發(fā)思想，通過vue組件來設(shè)計用戶界面布局，將常用的界面功能模塊進行封裝?？蛻舳擞脩艚缑姘ㄖ黜摻缑?、項目公示界面、新聞界面、專家咨詢界面、視頻播放界面以及個人中心界面。主頁界面使用swiper滑塊視圖容器實現(xiàn)輪播圖效果，自定義模板實現(xiàn)導(dǎo)航按鈕，使用List組件實現(xiàn)新聞列表與項目公示界面。使用video組件實現(xiàn)視頻播放區(qū)域。在個人中心界面中，使用map組件連接騰訊地圖模塊來實現(xiàn)地圖定位效果?；陧憫?yīng)式設(shè)計思想，為減小總工程文件大小，提升頁面性能，降低圖片獲取http的請求量，移動客戶端中所有圖標(biāo)均采用iconfont矢量圖標(biāo)，以字符圖標(biāo)形式引入工程并在代碼中進行調(diào)用。

4 功能模塊設(shè)計與實現(xiàn)

4.1 首頁模塊

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

4.2 環(huán)評公示模塊

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