论文部分内容阅读
摘要：为了建立企业、环境评估公司以及环评专家之间沟通的桥梁，设计并实现了基于移动平台的环境评估咨询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函数停止下拉刷新。 4.3 专家咨询模块
该模块分为留言与实时咨询两个部分，用户可以通过此模块与环境评估专家进行咨询交流。留言功能中，留言内容以表单数组的形式进行存储，使用json格式提交至服务端。实时咨询功能采用websocket协议建立长连接，使用GatewayWorker框架来实现即时通讯。GatewayWorker与MVC框架结合示意图如图2所示。
4.4 个人中心模块
个人中心模块主要包括浏览记录、个人资料与系统设置等功能。用户可以通过个人中心中的立即登录入口进行用户注册与登录操作。
5 系统测试
5.1 不同机型兼容性测试
为测试本客户端在不同型号手机上的兼容性，选用搭载iOS系统的iphone X、iphone 8、iphone 8 plus与搭载Android系统的Honor v10、Huaiwei mate 10、Redmi Note 9 Pro六部手机进行兼容性测试。测试结果如表1所示。
5.2 模块响应时长测试
为检测客户端模块的响应时长，在相同wifi环境下，对客户端分别在Huaiwei mate 10与iphone X手机上的首页模块与环评公示模塊打开时长进行统计记录，每个模块进行10次打开实验，记录模块启动响应的时间。
打开首页响应时间对比如图3（a）所示。
测试结果：Huaiwei mate 10打开首页的平均响应时长为1.43s，iphone X的平均响应时长为0.95s。
打开环评公示模块对比响应时间如图3（b）所示。
测试结果：Huaiwei mate 10打开环评公示模块的平均响应时长为1.76s，iphone X的平均响应时长为1.79s。
6 结束语
本文设计了一种基于跨平台移动开发框架的环境评估咨询App客户端，将移动互联网应用软件开发技术应用于环境影响评估咨询领域，方便了企事业单位与环境评估企业进行对接，为环境评估企业的业务推广提升了效率，满足了环境评估企业的相关需求。本系统App采用混合移动开发技术进行开发，已在不同型号的Android与iOS移动设备上进行测试，实验效果良好，具有一定的实用价值。
参考文献：
[1] 谭晖涛，孙洁，谢赞福，等.基于mui和H5 混合应用的菜篮子APP设计和实现[J].信息通信，2020，33（5）：98-101.
[2] 高国弘，缑晓辉，高恺宁.基于MUI前端框架绘制天气预报APP[J].电脑编程技巧与维护，2019（10）：56-60.
[3] 李勇，李园园.基于HTML5Plus和MUI的跨平台移动学习APP的开发研究[J].无线互联科技，2019，16（14）：42-44.
[4] 周舜.基于MUI的移动跨平台实验室管理系统的设计与实现[D].绵阳：西南科技大学，2018.
[5] 金敏.基于MUI的汽车服务系统设计与实现[D].南昌：南昌航空大学，2018.
[6] 郑慧飞.基于MUI网上银行WEBAPP设计与实现[D].长春：吉林大学，2016.
[7] 沈佳棋，倪珊，王杰，等.基于Vue SpringBoot的分类学科竞赛管理系统设计[J].无线互联科技，2020，17（17）：74-77.
[8] 张晓明.基于uni-app和Android的学生手机管控系统的设计与实现[D].兰州：兰州大学，2020.
[9] 许溜溜.基于HBuilder快速开发移动端APP的设计与实现[J].电脑知识与技术，2020，16（10）：74-75.
【通联编辑：谢媛媛】
关键词：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函数停止下拉刷新。 4.3 专家咨询模块
该模块分为留言与实时咨询两个部分，用户可以通过此模块与环境评估专家进行咨询交流。留言功能中，留言内容以表单数组的形式进行存储，使用json格式提交至服务端。实时咨询功能采用websocket协议建立长连接，使用GatewayWorker框架来实现即时通讯。GatewayWorker与MVC框架结合示意图如图2所示。
4.4 个人中心模块
个人中心模块主要包括浏览记录、个人资料与系统设置等功能。用户可以通过个人中心中的立即登录入口进行用户注册与登录操作。
5 系统测试
5.1 不同机型兼容性测试
为测试本客户端在不同型号手机上的兼容性，选用搭载iOS系统的iphone X、iphone 8、iphone 8 plus与搭载Android系统的Honor v10、Huaiwei mate 10、Redmi Note 9 Pro六部手机进行兼容性测试。测试结果如表1所示。
5.2 模块响应时长测试
为检测客户端模块的响应时长，在相同wifi环境下，对客户端分别在Huaiwei mate 10与iphone X手机上的首页模块与环评公示模塊打开时长进行统计记录，每个模块进行10次打开实验，记录模块启动响应的时间。
打开首页响应时间对比如图3（a）所示。
测试结果：Huaiwei mate 10打开首页的平均响应时长为1.43s，iphone X的平均响应时长为0.95s。
打开环评公示模块对比响应时间如图3（b）所示。
测试结果：Huaiwei mate 10打开环评公示模块的平均响应时长为1.76s，iphone X的平均响应时长为1.79s。
6 结束语
本文设计了一种基于跨平台移动开发框架的环境评估咨询App客户端，将移动互联网应用软件开发技术应用于环境影响评估咨询领域，方便了企事业单位与环境评估企业进行对接，为环境评估企业的业务推广提升了效率，满足了环境评估企业的相关需求。本系统App采用混合移动开发技术进行开发，已在不同型号的Android与iOS移动设备上进行测试，实验效果良好，具有一定的实用价值。
参考文献：
[1] 谭晖涛，孙洁，谢赞福，等.基于mui和H5 混合应用的菜篮子APP设计和实现[J].信息通信，2020，33（5）：98-101.
[2] 高国弘，缑晓辉，高恺宁.基于MUI前端框架绘制天气预报APP[J].电脑编程技巧与维护，2019（10）：56-60.
[3] 李勇，李园园.基于HTML5Plus和MUI的跨平台移动学习APP的开发研究[J].无线互联科技，2019，16（14）：42-44.
[4] 周舜.基于MUI的移动跨平台实验室管理系统的设计与实现[D].绵阳：西南科技大学，2018.
[5] 金敏.基于MUI的汽车服务系统设计与实现[D].南昌：南昌航空大学，2018.
[6] 郑慧飞.基于MUI网上银行WEBAPP设计与实现[D].长春：吉林大学，2016.
[7] 沈佳棋，倪珊，王杰，等.基于Vue SpringBoot的分类学科竞赛管理系统设计[J].无线互联科技，2020，17（17）：74-77.
[8] 张晓明.基于uni-app和Android的学生手机管控系统的设计与实现[D].兰州：兰州大学，2020.
[9] 许溜溜.基于HBuilder快速开发移动端APP的设计与实现[J].电脑知识与技术，2020，16（10）：74-75.
【通联编辑：谢媛媛】