webpack + Vue + Hbuilder 打包成App，混合app開發，一我的搞定

前幾年常常用到Hbuilder的開發期，那時候react, vue尚未造成趨勢，項目通常採用mui UI組件庫，對Hbuilder相關開發略知一二

Hybrid 混合式開發

近幾年國內vue大火，公司項目採用Hybrid 混合式開發, 用Hybrid + Vue的開發模式

人員配置：

• 1位安卓人員
• 1位ios開發人員
• 1-2位前端開發，
• N位後臺

在人員配置方面，可能少了幾位原生開發，但人員仍是須要一位原生開發工程師，對於中小公司的話，項目經費仍是太重的，更想1-2位前端開發就能搞定App

Hbuilder APP

Hbuilder官網

Hbuilder 官網推薦的UI組件是Mui, 本身定義了方法，剝去了jquery方法，反正我沒多少用過，一臉懵逼 ，畢竟學習成本又加劇了。

這裏展現Hbuild app打包的過程，本身能夠下載Hbuilder本身體驗

本身沒有ios開發者證書，只能打包安卓包

真機調試

運行 - 真機運行

iphone真機調試，請下載xcode(必須在mac電腦) 安卓真機調試，請下載android studio (mac/window均可)

自行百度下載以及安裝

Vue React + Hbuilder

vue react的熱門程度我在這裏也不說了，看招聘網站可想而知。

試試手 vue + Hbuilder結合

在我看來，若是將vue/dist項目的代碼直接複製放在Hbuilder新建的項目裏面，而後運行 - 真機運行，是否可以運行呢？

結果是能夠的

cnpm run build後 dist/index.html，打包後複製黏貼到mui項目下 以下圖

原來最關鍵的地方在於mainifest.json，只要項目中存在該文件json並放置項目文件中，就能被Hbuilder所打成apk包

該步驟便可生成apk包，下載安裝！

安卓手機安裝apk，仍是有些步驟的！我在這裏提供一個方法: 蒲公英應用內測官網

去蒲公英註冊帳號，並上傳您生成的apk包，掃碼下載，簡單，操做也比較容易;

點擊查看Hbuilder打包過程利用HBuilder將vue項目打包成移動端app

plus 原生方法

在vue項目中咱們採用的是vue-router來構建路由的，是單頁面，但在安卓手機存在物理返回鍵，物理返回鍵沒辦法執行咱們的this.$router.back()頁面返回，因此咱們就得調用native原生的方法

網友的方法:

• HBuilder網站打包的app怎麼設置按返回鍵返回上一頁面？
• Hbuilder打包APP時返回鍵問題的實際解決方案
• 解決Hbuilder打包的app返回鍵直接退出

本人實際項目出來，再附上相關安卓物理返回鍵的代碼

HTML5中國產業聯盟

API Reference 封裝好了不少原生辦法函數，直接在項目上編輯，而後在Hbuilder打包，就能夠運行plus方法

• plus.nativeUI.alert( "Plus is ready!") alert彈框
• plus.nativeUI.toast( message, options ) toast彈框
• plus.nativeUI.pickDate( successCB, errorCB, options ); 日期選擇器
• plus.key.addEventListener( keyevent, listener, capture ); 該返回能夠監聽物料返回鍵

能夠前去查看

代碼如何體現，以下方：

最後介紹

MogoH5+

MogoH5+框架利用vue和builder的特性的一種框架，可採起mui vant vux plus原生 axios等方式構成你想要的UI組件庫

注意：

• 不推薦採用vue-router單頁面，並且採用多頁面形式來開發
• node版本最好是8以上，實際運行中node 6版本運行報錯

對於小公司，項目外包app是一種不錯的選擇，省去了ios開發和安卓開發人員，本身一我的擼得飛起來

若是不採用MogoH5+ vue多頁面框架，想直接用webpack + vue + vue-router來構建項目，最得注意的一點就是安卓的物理返回鍵，否則點擊物流返回鍵則是退出App

本身尚未真正的app項目，由於我想不到需求作什麼，因此沒有demo可看，這幾天簡單新建個MogoH5 和 Vue單頁面項目，再添加到此文章