基于React+Webpack的“健康資訊”App開發(fā)

李 歡,李云紅,張震宇

(西安工程大學(xué) 電子信息學(xué)院,陜西 西安 710048)

0 引 言

隨著移動(dòng)互聯(lián)網(wǎng)日益盛行,瀏覽器功能日益完善,越來越多的項(xiàng)目?jī)A向于采用BS架構(gòu)[1-3]．為了提高開發(fā)效率和代碼復(fù)用率,大量的網(wǎng)頁開發(fā)框架開始流行,例如Vue[4-7]、React[8-9]、Angular[10-11]等．其中由于React的組件化和高性能等特點(diǎn),現(xiàn)在已經(jīng)成為手機(jī)App[12-14]開發(fā)中的主流．

潘婷婷[15]在傳統(tǒng)App開發(fā)模式的基礎(chǔ)上,介紹了一種新型前端框架React Native在App設(shè)計(jì)中的優(yōu)勢(shì)．江慶[16]等在銀行App的開發(fā)中,使用Vue+Webpack框架實(shí)現(xiàn)了App的結(jié)構(gòu)設(shè)計(jì)以及功能實(shí)現(xiàn)．葛臻[17]通過Android Studio開發(fā)了一款課堂筆記App．以上研究雖然在某種程度上提高了App的開發(fā)效率,但是仍然會(huì)存在代碼引入混亂,操作DOM頻繁,不利于后期維護(hù),同時(shí)存在系統(tǒng)不兼容問題．為此，文中采用React+Webpack模式，開發(fā)了“健康資訊”App，通過API接口能夠?qū)崟r(shí)獲取最新資訊,保證內(nèi)容的時(shí)效性,為人們的健康生活起到了很好的引導(dǎo)作用．同時(shí)，解決了系統(tǒng)不兼容問題,方便后期維護(hù)．

1 總體架構(gòu)

App設(shè)計(jì)過程包括總體架構(gòu)、技術(shù)架構(gòu)和功能架構(gòu)．App開發(fā)過程包括對(duì)用戶的需求分析、前端制作、技術(shù)開發(fā)、測(cè)試等幾個(gè)主要步驟．具體過程如圖1所示．

圖 1 App開發(fā)流程圖Fig.1 App development flow chart

(1) 需求分析．包括用戶登錄、注冊(cè),對(duì)感興趣內(nèi)容進(jìn)行搜索、收藏和分享等功能,同時(shí)保證展示給用戶的信息可以實(shí)時(shí)更新．

(2) 前端制作．需要準(zhǔn)備App開發(fā)的UI設(shè)計(jì)稿,確定需要的UI素材,通過PS繪制以及修改圖片,確保完美的視覺效果和良好的用戶體驗(yàn)．

(3) 技術(shù)開發(fā)．使用React+Webpack搭建開發(fā)環(huán)境．

(4) 測(cè)試．在ios、android的不同版本下進(jìn)行測(cè)試,確保App正常使用．

2 技術(shù)架構(gòu)

App的開發(fā)包括Webpack的構(gòu)建和React的渲染過程．

2.1 構(gòu)建Webpack框架

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

(2) 利用HBuilder新建項(xiàng)目文件夾,然后再分別創(chuàng)建app、public文件，app文件夾存放源碼,public文件夾存放編譯后的代碼．

(3) 生成package.json并在工程目錄package.json中添加依賴,然后打開命令工具執(zhí)行npm init．

(4) 創(chuàng)建webpack.config.js文件,該配置文件包括入口(entry)、輸出(output)、loader、插件(plugins)．

在項(xiàng)目開發(fā)過程中,為了實(shí)現(xiàn)系統(tǒng)兼容,方便后期維護(hù),主要使用了webpack的loader和plugins功能．其中l(wèi)oader可以將各種類型的文件轉(zhuǎn)換為瀏覽器識(shí)別的語言．安裝postcss-loader,則可以為CSS代碼自動(dòng)添加瀏覽器兼容的CSS前綴,避免頁面出現(xiàn)假死狀態(tài);React項(xiàng)目開發(fā)中采用JSX語法,通過babel-loader將JSX轉(zhuǎn)化為最新版本的JavaScript,省略了頁面中引入babel.min.js的步驟．Plugins通過‘npm install …’命令安裝ExtractTextPlugin和CommonsChunkPlugin插件,ExtractTextPlugin插件實(shí)現(xiàn)了Webpack功能的拓展,使js和css樣式分離,防止引起頁面加載錯(cuò)亂．CommonsChunkPlugin插件用于合并公共代碼．UglifyJsPlugin是Webpack自帶的一個(gè)壓縮插件,可以壓縮js文件．

2.2 React渲染過程

React的開發(fā)主要依賴webpack完成App頁面渲染．在頁面的渲染過程中,React具有虛擬DOM的功能,可以減少對(duì)DOM的操作．

2.2.1 虛擬DOM 通過原生js或jquery渲染頁面時(shí),瀏覽器會(huì)從構(gòu)建DOM樹開始從頭到尾執(zhí)行一遍流程．當(dāng)有多次DOM操作時(shí),每次都需要更新DOM,對(duì)瀏覽器的性能要求較高．虛擬DOM則可以解決瀏覽器的性能問題,在有多次更新DOM時(shí),虛擬DOM會(huì)通過diff算法將多次更新的內(nèi)容保存在本地js中,最后一次性完成更新．

2.2.2 React渲染 “健康資訊”App利用React的組件化特性實(shí)現(xiàn)了代碼復(fù)用．該App由首頁、分類頁、搜索頁和詳情頁組成．因此,可以根據(jù)頁面渲染的特點(diǎn)分為公共組件和特有組件．React通過class來完成App組件的構(gòu)成,首先使用export default命令先導(dǎo)出App,之后使用import命令再導(dǎo)入App．

圖 2 App基本組件Fig.2 Basic components of the project

App組件如圖2所示,每個(gè)頁面都有header組件,不同的頁面會(huì)有不同的組件設(shè)置．一個(gè)完整的頁面是由幾個(gè)不同的組件組合起來,完成頁面的渲染．

3 功能架構(gòu)

App的功能實(shí)現(xiàn)包括組件化效果、React路由實(shí)現(xiàn)和React+Webpack的App測(cè)試．

3.1 組件化效果實(shí)現(xiàn)

組件寫好后通過Webpack打包生成瀏覽器能識(shí)別的前端資源．運(yùn)行“build”命令,結(jié)果如下:

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

在瀏覽器的地址欄輸入預(yù)先設(shè)置好的端口號(hào)8080,在本地服務(wù)器上運(yùn)行,就可以看到如圖3所示的效果．圖3(a)為數(shù)據(jù)加載時(shí)的頁面,圖3(b)為從服務(wù)器獲取數(shù)據(jù)后的頁面,同時(shí)也是App的首頁．

(a) 頁面初始化時(shí)渲染結(jié)果 (b) App獲取數(shù)據(jù)后的渲染結(jié)果圖 3 React的組件式視圖組合Fig.3 React component view combination

3.2 React路由實(shí)現(xiàn)

路由可以實(shí)現(xiàn)頁面之間的相互跳轉(zhuǎn),在App開發(fā)過程中使用React-Router來完成頁面之間的跳轉(zhuǎn)．代碼如下所示,其中path規(guī)定了具體要跳轉(zhuǎn)的路由,component指定了具體組件．

const Routes=

;

App應(yīng)用界面如圖4所示,底部包括首頁、分類、搜索3個(gè)圖標(biāo),分別為3個(gè)頁面相應(yīng)的跳轉(zhuǎn)按鈕．

用戶在注冊(cè)、登錄App后,在內(nèi)容詳情頁有收藏和分享按鈕,可以對(duì)自己感興趣的內(nèi)容進(jìn)行收藏與分享,除了一般App包括的功能外,“健康資訊”App還為用戶提供了運(yùn)動(dòng)模塊和自定義模塊．運(yùn)動(dòng)模塊為用戶提供制定計(jì)劃功能,可以選擇自己喜歡的小動(dòng)物來提高運(yùn)動(dòng)的熱情．用戶可以在自定義模塊中,實(shí)現(xiàn)與其他用戶的交流與分享,可以獲得更多的健康信息．

(a) 分類頁 (b) 搜索頁圖 4 App應(yīng)用界面Fig.4 App application interface

3.3 React+Webpack的App測(cè)試

React+Webpack對(duì)包括圖片在內(nèi)的頁面資源進(jìn)行打包壓縮整理,資源整理前后對(duì)比情況如表1所示,代碼量由原來的5.35 M減少到3.21 M,約為原來的60%,提高了工作效率．開發(fā)的App分別在ios及android4.0以上版本瀏覽器進(jìn)行測(cè)試,頁面顯示正常,動(dòng)畫效果也達(dá)到了預(yù)期效果,因此App兼容性得到了解決,性能也得到優(yōu)化．

4 結(jié)束語

表 1 資源整理前后對(duì)比

基于React+Webpack框架開發(fā)了一款健康咨訊App,設(shè)計(jì)過程包括總體架構(gòu)、技術(shù)架構(gòu)和功能架構(gòu)．與傳統(tǒng)App性能相比,由于采用了React+Webpack的框架結(jié)構(gòu),開發(fā)效率和代碼復(fù)用率得到了顯著提高.測(cè)試表明App性能得到優(yōu)化,功能得以完善．用戶可以通過App隨時(shí)隨地了解當(dāng)日的健康新聞以及一些日常必備健康小常識(shí),提高了用戶的運(yùn)動(dòng)熱情．