使用Webpack+Gulp開發執行於Dcloud平臺HTML5+引擎的混合APP專案經驗分享

小張沒有名字發表於2018-02-02
WebCloudHTMLAPP

什麼是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

相關文章