李 歡,李云紅,張震宇

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

0 引 言

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

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

1 總體架構(gòu)

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

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

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

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

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

(4) 測試．在ios、android的不同版本下進行測試,確保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新建項目文件夾,然后再分別創(chuàng)建app、public文件，app文件夾存放源碼,public文件夾存放編譯后的代碼．

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

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

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

2.2 React渲染過程

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

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

2.2.2 React渲染 “健康資訊”App利用React的組件化特性實現(xiàn)了代碼復(fù)用．該App由首頁、分類頁、搜索頁和詳情頁組成．因此,可以根據(jù)頁面渲染的特點分為公共組件和特有組件．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所示,每個頁面都有header組件,不同的頁面會有不同的組件設(shè)置．一個完整的頁面是由幾個不同的組件組合起來,完成頁面的渲染．

3 功能架構(gòu)

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

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

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

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

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

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

3.2 React路由實現(xiàn)

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

const Routes=

;

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

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

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

3.3 React+Webpack的App測試

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

4 結(jié)束語

表 1 資源整理前后對比

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