眾所周知，前端開發(fā)完成的webapp只能運行在瀏覽器上座咆，對運行環(huán)境有一定的限制，也就是除了瀏覽器其他的環(huán)境下不支持仓洼；那么現(xiàn)在如果有個需求是這樣的呢介陶？需要一套代碼三端運行呢？三端運行（黑人臉色建？哺呜？）是的，三端運行即web端箕戳，安卓端和IOS端 某残；先別急著說實現(xiàn)不了和不可能国撵，利用HBulder來試試；
HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE玻墅。 HBuilder的編寫用到了Java介牙、C、Web和Ruby澳厢。HBuilder本身主體是由Java編寫环础。它基于Eclipse，所以順其自然地兼容了Eclipse的插件剩拢。 HBuilder其實只是一款編輯器线得，擁有較為豐富的語法庫，對Vue的支持比較友好徐伐，工具輕量且功能強大贯钩；
官網(wǎng)地址：https://www.dcloud.io/
首先我們做一下準(zhǔn)備工作：
下載HBuilder并安裝完成
將開發(fā)完的webapp利用webpack打包完成
下載360手機助手，打包完成后方便安裝到手機上運行看效果
1.首先我們拿到我們的webapp并運行起來办素，確認(rèn)沒有異常之后利用webpack打包角雷，webpack打包后將會產(chǎn)生 dist/目錄（命名根據(jù)webpack來，內(nèi)含index.html和static/目錄）
2.打開HBuilder摸屠，然后點擊文件--新建--移動App谓罗，創(chuàng)建一個空白模板的移動App；
3.創(chuàng)建好了空白的移動App模板之后季二，我們可以看到我們的文件夾路徑變?yōu)檫@樣（可以刪除css、js揭措、img等文件夾）
4.將npm run build(打包后)生成的index.html內(nèi)容全部復(fù)制進Hbuilder的index.html里面去胯舷，并將產(chǎn)生的static/目錄復(fù)制到HBuilder本項目目錄下，此時我們的目錄結(jié)構(gòu)是這樣的：
5.打開index.html里面的對static的引用绊含，將=后面的'/'去掉
6.點擊一下瀏覽器運行桑嘶，看是否有異常，如果沒有異常躬充，我們接著往下走逃顶；HBuilder支持云端打包和離線打包，本文暫且只講述云端打包
7.項目文件夾中右鍵--發(fā)行--點擊云打包-打原生安裝包充甚，根據(jù)所需要的版本（安卓和IOS）進行打包
8.提示信息不管以政，直接點擊確認(rèn)沒有缺少權(quán)限，繼續(xù)打包
9.提交到云端之后伴找，直接點確定盈蛮，等制作安裝包，這里可能需要等個兩三分鐘技矮，請耐心等待打包完成
10.點擊手動下載就可以下載到我們打包好的apk了
11.這里我們可以使用手機模擬器來安裝apk應(yīng)用抖誉，也可以用360手機助手來安裝殊轴，我們來講講360手機助手安裝：管理我的手機--安裝本地應(yīng)用--選擇需要安裝的apk，然后即可安裝袒炉；其實360助手只是一個手段旁理，重點是apk，當(dāng)然可以通過微信助手發(fā)送apk手機安裝我磁；
12.這就是我們打包完之后的app孽文，運行的速度還比較流暢，占用內(nèi)存大小也還好十性，打包完之后只用了30+M叛溢；功能都正常，只是布局方面跟webapp相比部分略微大一點點劲适，幾乎可以忽略不計（圖片效果是因為是截圖楷掉，所以有點擠壓，打包完之后看效果是正常的）
解決HBuilder中打包app之后點擊物理鍵返回直接退出app的問題（這里特別感謝@雨落秋垣提出的建議和解決方案霞势，親測可用）：
/**
* 解決hbuilder打包app之后點擊手機返回鍵直接退出app的
*/
document.addEventListener('plusready', function() {
// 獲取當(dāng)前頁面所屬的Webview窗口對象
var webview = plus.webview.currentWebview();
// 注冊返回按鍵事件
plus.key.addEventListener('backbutton', function() {
webview.canBack(function(e) {
// 得到當(dāng)前url
var filename = location.href;
// 截取得到當(dāng)前的文件名
filename = filename.substr(filename.lastIndexOf('/') + 1);
// 文件名比較烹植，只有在首頁和登錄頁的時候
if(filename == "user_login" || filename == "") {
// 在首頁或者登錄頁物理鍵返回點擊確認(rèn)直接觸發(fā)關(guān)閉
if(window.confirm('是否退出？')) {
// 關(guān)閉webview窗口
webview.close();
return true;
} else {
return false;
}
// 不在首頁和登錄頁物理鍵返回
} else {
webview.back();
}
})
});
});
在項目中使用：我們只需要在項目中創(chuàng)建一個單獨的js文件愕贡，然后引入這個文件到main.js中即可
