利用HBuilder打包Vue開發的webapp爲app

衆所周知，前端開發完成的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中便可