用HBuilderX 打包 vue 項目 爲 App 的步驟

首先打包你的 vue 項目 生成 dist 文件夾，教程請移步  https://www.cnblogs.com/taohuaya/p/10256670.html

看完上面的教程，請確保 你是 將：

項目目錄下的config文件夾裏的index.js文件中,將build對象下的assetsPublicPath中的「/」，改成「./」後，打包生成的 dist 文件。

 

開始使用 HBuiderX 打包。（工具下載地址：http://www.dcloud.io/）

 

 

 

 

 這是我vue 項目打包後的dist 文件。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 設置沉浸狀態欄：（什麼是沉浸狀態欄和設置方法 請移步： http://ask.dcloud.net.cn/article/32  地址裏的  http://ask.dcloud.net.cn/article/1150）

 上圖中添加位置的代碼：

        "statusbar": { //應用可視區域到系統狀態欄下透明顯示效果
            "immersed": true
        },

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 解決打包成App後，單擊 手機返回鍵退出應用的bug。（能夠直接把這段代碼放到你vue項目中，從新打包，再放回來，也能夠直接修改這個index.html）

上圖中的代碼：

 

<script type="text/javascript">
    //以下代碼主要是解決, 打包後的app點擊返回鍵直接退出的bug.
    /* 本身寫的 toast 提示框 */
    //下面用的是調的 Android 自身的 toast方法。 我把我本身寫的toast 註釋掉 
    /* 
    let flag = false;
    function toast(tip){
        if(flag) return;
        let oDiv  = document.createElement('div');
        let oBody = document.getElementsByTagName('body')[0];
        oDiv.innerText = tip;
        oDiv.style.background = 'rgba(50, 50, 51, 0.88)';
        oDiv.style.color = '#fff';
        oDiv.style.textAlign = 'center';
        oDiv.style.fontSize = '14px';
        oDiv.style.lineHeight = '30px';
        oDiv.style.width = '200px';
        oDiv.style.borderRadius = '4px';
        oDiv.style.position = 'fixed';
        oDiv.style.left = '50%';
        oDiv.style.transform = 'translateX(-50%)';
        oDiv.style.bottom = '100px';
        oDiv.style.zIndex = '1000';
        oBody.appendChild(oDiv);
        flag = true;
        setTimeout(function(){
            oBody.removeChild(oDiv);
            flag = false;
        },1000);
    }
     */
    /* 本身寫的 toast 提示框---END--- */
    
    document.addEventListener('plusready', function(a) { //等待plus ready後再調用5+ API：
                //// 在這裏調用5+ API
                var first = null;
                plus.key.addEventListener('backbutton', function() { //監聽返回鍵
                        //首次按鍵，提示‘再按一次退出應用’
                        if (!first) {
                            first = new Date().getTime(); //獲取第一次點擊的時間戳
                            // console.log('再按一次退出應用');//用自定義toast提示最好
                            // toast('雙擊返回鍵退出應用'); //調用本身寫的吐絲提示 函數
                            plus.nativeUI.toast("雙擊退出", {duration:'short'}); //經過H5+ API 調用Android 上的toast 提示框
                            setTimeout(function() {
                                first = null;
                            }, 1000);
                        } else {
                            if (new Date().getTime() - first < 1000) { //獲取第二次點擊的時間戳, 兩次之差 小於 1000ms 說明1s點擊了兩次,
                                plus.runtime.quit(); //退出應用
                            }
                        }
                    }, false);
            });
</script>

 

 上面這段代碼：我參考的文章和文檔連接：

https://blog.csdn.net/qq_25252769/article/details/76913083

這個是 H5+ API 的（經過js調取Android等平臺的原生方法）學習連接：http://ask.dcloud.net.cn/docs/

 

 

 至此就基本上完成了，可是還會有一下bug，我時間我再弄。

 這裏是我效果圖：

 

 

 

 

 現純的bug 是 進入詳情頁 ，點擊返回也只能提示    雙擊退出， 而不是後退一步。