基于跨平台移动开发框架的环境评估咨询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函数停止下拉刷新。