前幾年經常用到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原生的方法
網友的方法:
本人實際專案出來，再附上相關安卓物理返回鍵的程式碼
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單頁面專案，再新增到此文章