基于React+Webpack的“健康资讯”App开发

李 欢,李云红,张震宇

(西安工程大学 电子信息学院,陕西 西安 710048)

0 引 言

随着移动互联网日益盛行,浏览器功能日益完善,越来越多的项目倾向于采用BS架构[1-3]．为了提高开发效率和代码复用率,大量的网页开发框架开始流行,例如Vue[4-7]、React[8-9]、Angular[10-11]等．其中由于React的组件化和高性能等特点,现在已经成为手机App[12-14]开发中的主流．

潘婷婷[15]在传统App开发模式的基础上,介绍了一种新型前端框架React Native在App设计中的优势．江庆[16]等在银行App的开发中,使用Vue+Webpack框架实现了App的结构设计以及功能实现．葛臻[17]通过Android Studio开发了一款课堂笔记App．以上研究虽然在某种程度上提高了App的开发效率,但是仍然会存在代码引入混乱,操作DOM频繁,不利于后期维护,同时存在系统不兼容问题．为此，文中采用React+Webpack模式，开发了“健康资讯”App，通过API接口能够实时获取最新资讯,保证内容的时效性,为人们的健康生活起到了很好的引导作用．同时，解决了系统不兼容问题,方便后期维护．

1 总体架构

App设计过程包括总体架构、技术架构和功能架构．App开发过程包括对用户的需求分析、前端制作、技术开发、测试等几个主要步骤．具体过程如图1所示．

图 1 App开发流程图Fig.1 App development flow chart

(1) 需求分析．包括用户登录、注册,对感兴趣内容进行搜索、收藏和分享等功能,同时保证展示给用户的信息可以实时更新．

(2) 前端制作．需要准备App开发的UI设计稿,确定需要的UI素材,通过PS绘制以及修改图片,确保完美的视觉效果和良好的用户体验．

(3) 技术开发．使用React+Webpack搭建开发环境．

(4) 测试．在ios、android的不同版本下进行测试,确保App正常使用．

2 技术架构

App的开发包括Webpack的构建和React的渲染过程．

2.1 构建Webpack框架

(1) 在https://nodejs.org/en/直接下载安装node.js.

(2) 利用HBuilder新建项目文件夹,然后再分别创建app、public文件，app文件夹存放源码,public文件夹存放编译后的代码．

(3) 生成package.json并在工程目录package.json中添加依赖,然后打开命令工具执行npm init．

(4) 创建webpack.config.js文件,该配置文件包括入口(entry)、输出(output)、loader、插件(plugins)．

在项目开发过程中,为了实现系统兼容,方便后期维护,主要使用了webpack的loader和plugins功能．其中loader可以将各种类型的文件转换为浏览器识别的语言．安装postcss-loader,则可以为CSS代码自动添加浏览器兼容的CSS前缀,避免页面出现假死状态;React项目开发中采用JSX语法,通过babel-loader将JSX转化为最新版本的JavaScript,省略了页面中引入babel.min.js的步骤．Plugins通过‘npm install …’命令安装ExtractTextPlugin和CommonsChunkPlugin插件,ExtractTextPlugin插件实现了Webpack功能的拓展,使js和css样式分离,防止引起页面加载错乱．CommonsChunkPlugin插件用于合并公共代码．UglifyJsPlugin是Webpack自带的一个压缩插件,可以压缩js文件．

2.2 React渲染过程

React的开发主要依赖webpack完成App页面渲染．在页面的渲染过程中,React具有虚拟DOM的功能,可以减少对DOM的操作．

2.2.1 虚拟DOM 通过原生js或jquery渲染页面时,浏览器会从构建DOM树开始从头到尾执行一遍流程．当有多次DOM操作时,每次都需要更新DOM,对浏览器的性能要求较高．虚拟DOM则可以解决浏览器的性能问题,在有多次更新DOM时,虚拟DOM会通过diff算法将多次更新的内容保存在本地js中,最后一次性完成更新．

2.2.2 React渲染 “健康资讯”App利用React的组件化特性实现了代码复用．该App由首页、分类页、搜索页和详情页组成．因此,可以根据页面渲染的特点分为公共组件和特有组件．React通过class来完成App组件的构成,首先使用export default命令先导出App,之后使用import命令再导入App．

图 2 App基本组件Fig.2 Basic components of the project

App组件如图2所示,每个页面都有header组件,不同的页面会有不同的组件设置．一个完整的页面是由几个不同的组件组合起来,完成页面的渲染．

3 功能架构

App的功能实现包括组件化效果、React路由实现和React+Webpack的App测试．

3.1 组件化效果实现

组件写好后通过Webpack打包生成浏览器能识别的前端资源．运行“build”命令,结果如下:

“webpack —progress —p —profile —colors —config webpack. production.config.js”．

在浏览器的地址栏输入预先设置好的端口号8080,在本地服务器上运行,就可以看到如图3所示的效果．图3(a)为数据加载时的页面,图3(b)为从服务器获取数据后的页面,同时也是App的首页．

(a) 页面初始化时渲染结果 (b) App获取数据后的渲染结果图 3 React的组件式视图组合Fig.3 React component view combination

3.2 React路由实现

路由可以实现页面之间的相互跳转,在App开发过程中使用React-Router来完成页面之间的跳转．代码如下所示,其中path规定了具体要跳转的路由,component指定了具体组件．

const Routes=

;

App应用界面如图4所示,底部包括首页、分类、搜索3个图标,分别为3个页面相应的跳转按钮．

用户在注册、登录App后,在内容详情页有收藏和分享按钮,可以对自己感兴趣的内容进行收藏与分享,除了一般App包括的功能外,“健康资讯”App还为用户提供了运动模块和自定义模块．运动模块为用户提供制定计划功能,可以选择自己喜欢的小动物来提高运动的热情．用户可以在自定义模块中,实现与其他用户的交流与分享,可以获得更多的健康信息．

(a) 分类页 (b) 搜索页图 4 App应用界面Fig.4 App application interface

3.3 React+Webpack的App测试

React+Webpack对包括图片在内的页面资源进行打包压缩整理,资源整理前后对比情况如表1所示,代码量由原来的5.35 M减少到3.21 M,约为原来的60%,提高了工作效率．开发的App分别在ios及android4.0以上版本浏览器进行测试,页面显示正常,动画效果也达到了预期效果,因此App兼容性得到了解决,性能也得到优化．

4 结束语

表 1 资源整理前后对比

基于React+Webpack框架开发了一款健康咨讯App,设计过程包括总体架构、技术架构和功能架构．与传统App性能相比,由于采用了React+Webpack的框架结构,开发效率和代码复用率得到了显著提高.测试表明App性能得到优化,功能得以完善．用户可以通过App随时随地了解当日的健康新闻以及一些日常必备健康小常识,提高了用户的运动热情．