眾所周知，前端開發完成的webapp只能運行在瀏覽器上，對運行環境有一定的限制，也就是除了瀏覽器其他的環境下不支持；那么現在如果有個需求是這樣的呢？需要一套代碼三端運行呢？三端運行（黑人臉？？）是的，三端運行即web端，安卓端和IOS端 ；先別急着說實現不了和不可能，利用HBulder來試試；
HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。 HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。它基於Eclipse，所以順其自然地兼容了Eclipse的插件。 HBuilder其實只是一款編輯器，擁有較為豐富的語法庫，對Vue的支持比較友好，工具輕量且功能強大；
官網地址：https://www.dcloud.io/
首先我們做一下准備工作：
下載HBuilder並安裝完成
將開發完的webapp利用webpack打包完成
下載360手機助手，打包完成后方便安裝到手機上運行看效果
1.首先我們拿到我們的webapp並運行起來，確認沒有異常之后利用webpack打包，webpack打包后將會產生 dist/目錄（命名根據webpack來，內含index.html和static/目錄）
2.打開HBuilder，然后點擊文件--新建--移動App，創建一個空白模板的移動App；
3.創建好了空白的移動App模板之后，我們可以看到我們的文件夾路徑變為這樣（可以刪除css、js、img等文件夾）
4.將npm run build(打包后)生成的index.html內容全部復制進Hbuilder的index.html里面去，並將產生的static/目錄復制到HBuilder本項目目錄下，此時我們的目錄結構是這樣的：
5.打開index.html里面的對static的引用，將=后面的'/'去掉
6.點擊一下瀏覽器運行，看是否有異常，如果沒有異常，我們接着往下走；HBuilder支持雲端打包和離線打包，本文暫且只講述雲端打包
7.項目文件夾中右鍵--發行--點擊雲打包-打原生安裝包，根據所需要的版本（安卓和IOS）進行打包
8.提示信息不管，直接點擊確認沒有缺少權限，繼續打包
9.提交到雲端之后，直接點確定，等制作安裝包，這里可能需要等個兩三分鍾，請耐心等待打包完成
10.點擊手動下載就可以下載到我們打包好的apk了
11.這里我們可以使用手機模擬器來安裝apk應用，也可以用360手機助手來安裝，我們來講講360手機助手安裝：管理我的手機--安裝本地應用--選擇需要安裝的apk，然后即可安裝；其實360助手只是一個手段，重點是apk，當然可以通過微信助手發送apk手機安裝；
12.這就是我們打包完之后的app，運行的速度還比較流暢，占用內存大小也還好，打包完之后只用了30+M；功能都正常，只是布局方面跟webapp相比部分略微大一點點，幾乎可以忽略不計（圖片效果是因為是截圖，所以有點擠壓，打包完之后看效果是正常的）
解決HBuilder中打包app之后點擊物理鍵返回直接退出app的問題（這里特別感謝@雨落秋垣提出的建議和解決方案，親測可用）：
/** * 解決hbuilder打包app之后點擊手機返回鍵直接退出app的 */ document.addEventListener('plusready', function() { // 獲取當前頁面所屬的Webview窗口對象 var webview = plus.webview.currentWebview(); // 注冊返回按鍵事件 plus.key.addEventListener('backbutton', function() { webview.canBack(function(e) { // 得到當前url var filename = location.href; // 截取得到當前的文件名 filename = filename.substr(filename.lastIndexOf('/') + 1); // 文件名比較，只有在首頁和登錄頁的時候 if(filename == "user_login" || filename == "") { // 在首頁或者登錄頁物理鍵返回點擊確認直接觸發關閉 if(window.confirm('是否退出？')) { // 關閉webview窗口 webview.close(); return true; } else { return false; } // 不在首頁和登錄頁物理鍵返回 } else { webview.back(); } }) }); });
在項目中使用：我們只需要在項目中創建一個單獨的js文件，然后引入這個文件到main.js中即可