使用Webpack+Gulp開發運行於Dcloud平臺HTML5+引擎的混合APP項目經驗分享

什麼是5+Runtime?

首先簡單介紹一下5+Runtime:

HTML5 Plus Runtime(5+Rumtime)是由Dcloud開發的一套"加強版的手機瀏覽器引擎",與之配套的IDE時Hbuilder,使用Dcloud提供的這一套方案能夠方便快捷的開發和打包出具備原生能力的混合APP(Hybrid APP).

什麼是HTML5 Plus?

HTML5+ 是由"中國HTML5產業聯盟(Dcloud公司,中國信通院等是成員)"提出的一套HTML5的加強版規範,此規範讓HTML5使用js便可具有原生調用能力,包括但不限於攝像頭調用,第三方支付,第三方分享,窗口管理(多Webview管理),原生組件等.

5+Runtime與HTML5 Plus的關係:

5+Runtime引擎是對HTML5 Plus規範的一種實現.

HTML5 Plus規範與MUI的關係:

MUI是一套UI框架,是對HTML5 Plus規範中的js的再一次封裝.

HTML5 Plus & HBuilder & MUI:

HBuilder具有APP打包能力,其打包出的APP的瀏覽器引擎爲5+Runtime,能運行HTML5 Plus規範語法,簡言之其能夠打包出具備原生能力的混合APP.
您可直接編寫HTML5 Plus的js語法實現原生擴展能力的使用,或者使用MUI更加便捷的使用其封裝好的方法.

HTML5 Plus規範的其餘實現與例子:

具我所知的不肯定消息,360應用市場輕應用應該是使用了5+Runtime引擎實現了對HTML5+規範的支持,HBuilder也推出了"流應用"市場.

與以上一套"使用HTML5"開發APP的解決方案類似的其餘方案:

APICloud , 就是前段時間由於抄襲Dcloud,被Dcloud告而且官司失敗那個.

其餘類似技術的一些簡單說明:

Native APP. 使用前端技術開發原生APP(Native APP)的方案:React Native 和 Weex.這種方案能夠開發出原生APP,APP運行時最終渲染的UI爲原生組件,APP運行性能比Hybrid APP高.可是開發成本相對來講較低,學習難度也較大.

Hybrid APP. 使用前端技術開發混合APP(Hybrid APP)的方案:Dcloud(上文所述), APICloud 以及其餘.
使用這種方案開發出的APP,實質上是一個或多個Webview窗口,此類方案具有一些原生調用能力,以及一些簡單的原生組件的建立.開發效率較低,運行效率中等,優化好的話能夠開發出用戶體驗好的產品.

Web APP 使用前端技術開發的H5APP,只是爲其加了一層外殼,打包成了一個APP.其始終運行在一個Webview中.這種APP若是業務邏輯複雜,則運行效率低,用戶體驗差.開發效率較Hybrid APP快.

好了,以上簡單介紹了Dcloud方案的一套東西和原生app,混合app,Web APP之間的關係和差異.

那麼,本文要討論什麼問題?

本文要討論 : 如何使用Webpack + Gulp便捷開發運行於Dcloud平臺HTML5 Plus Runtime引擎的HybridAPP項目.

傳統HBuilder項目開發模式痛點:

• 很難使用ES6語法以及新特性,包特性,Promise,對象,數組新特性等.
• 繁瑣的重複任務,開發進度沒法加快,幾乎沒有自動化.
• 無相似於Vue和React的路由概念,傳統路由跳轉繁瑣

爲何不使用Vue和React開發運行於5+Runtime的單頁應用?

由於以前有過實踐,這種架構作出來就和Web APP差很少,幾乎很難使用到多窗口(Webview)調用能力,整個項目運行於一個Webview中,開發效率提高了可是其運行效率低和用戶體驗卻低.
這種架構基於Vue-cli,可使用到前端新特性,可是綜合考慮仍是很難作出運行效率告,用戶體驗好的產品.

爲何不直接使用Weex或RN開發原生應用?

這種技術坑多,開發難度大,開發效率慢,雖然能使用到新特性開發出原生應用,可是這種方案對於一些中小公司,是沒法承受和負擔的.

因此咱們到底要作什麼?

方便快捷愉快的編碼,最終開發出一個多頁Hybrid APP.

0.使用Node.js和npm/yarn

本項目基於Node.js和npm/yarn , 請確保您的主機安裝了這個環境.

1.使用Webpack進行項目架構

• 項目使用Webpack,配置sass對css的擴展,配置bable實現es6=>es5的編譯.還可配置一些圖片處理.
• 使用Webpack的多頁配置,每要新寫一個頁面,就得增長一條配置.同時通常須要手動新建3個文件 html & js & scss.

2.Webpack的入口數組

• Webpack的入口數組配置抽離到了./src/js/config/config.js
• 每次新增一個js應該在此文件中添加路徑.

3.使用Gulp實現上條所述的新建頁面的自動化任務

• 編寫了Gulp自動化任務,簡單的實現了經過命令行新增和移除頁面.
• 建立頁面 : gulp newPage --name testName
• 刪除頁面 : gulp delPage --name testName
• 執行上兩條命令,會自動建立和移除html & js & scss文件.以及自動往webpack.config.js配置文件添加配置信息.同時還會自動往上一條所述的配置文件添加配置信息.
• 執行新增命令時,會自動拷貝test.html/scss/js模板,因此你能夠手動更改該模板.
• 須要注意的是,每次執行完移除命令,須要手動刪除webpack.config.js中的配置信息.由於展現沒有實現自動刪除.

4.自動化任務編寫了git自動提交

每次執行新增和刪除命令後,會自動提交git變動前的版本和變動後的版本.經過一個僅能運行於Windows的包實現命令行執行.若是不須要git提交,可在gulpfile.js中註釋相關代碼.

5.公共JS方法類

公共JS方法類在./src/js/class/Tools.js , Webpack配置中已經配置好每一個頁面公共加載該文件.裏面有簡單的公共方法.後期會新增窗口建立/顯示/隱藏/關閉等方法,以及實現HTML5和5+Runtime不一樣端的不一樣操做.

6.Jquery的引用

• 由於在Webpack中導入全局Jquery太麻煩,項目又趕進度,暫時使用的cdn引入Jquery.
• 後期會實現導入本地Jquery.

7.關於SASS

*後期會使用less,由於在Windows下裝node-sass包太難了.

8.路由跳轉

不使用a標籤跳轉,而是在每一個須要跳轉事件的節點上 加入css類"Jump" 和data-uri參數,Tool方法初始化後會自動綁定跳轉事件.具體可查閱代碼.

9.分享出這簡單的建構配置的開源地址

這套方案是我對我以前一個方案的升級版,還不完整與嚴謹,在此簡單分享出個人想法,有興趣的朋友能夠與我一塊兒探討.以前那個版本的架構方案我在本文就不介紹了.寫出本文是由於以前零零散散的有在一些羣裏和你們討論過Dcloud下的開發分享,如今抽空簡單敘述一下.

碼雲地址:https://gitee.com/izcy/Webpac...

9.後記

由於使用此方案的項目前期剛作完靜態頁面就中途暫停了,因此不少方法還沒寫(像窗口管理和跳轉也不完善),整套方案不完整,我將持續的更新本文,以分享更多東西.也歡迎廣大Dcloud開發者參與進來.

10.聯繫我

http://www.zhangchaoyue.com

Zcy 於 2018年2月2日 11:51:51