首先打包你的 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 是 進入詳情頁 ，點選返回也只能提示    雙擊退出， 而不是後退一步。