之前項目開發用的vue寫的h5，通過hbuilder打包成安卓后，發現手機返回鍵按一次直接退出應用到桌面了，下面的代碼片段直接復用到 項目源碼的index.html就ok!

document.addEventListener('plusready', function () {

? ? ? var first = null;

? ? ? var webview = plus.webview.currentWebview();

? ? ? plus.key.addEventListener('backbutton', function () {

? ? ? ? webview.canBack(function (e) {

? ? ? ? ? if (e.canBack) {

? ? ? ? ? ? webview.back(); //這里不建議修改自己跳轉的路徑 ?

? ? ? ? ? } else {

? ? ? ? ? ? //首次按鍵，提示‘再按一次退出應用’ ?

? ? ? ? ? ? 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(); //退出應用 ?

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? })

? ? ? });

? ? });

<script>document.addEventListener('plusready', function () {var first = null;var webview = plus.webview.currentWebview();plus.key.addEventListener('backbutton', function () {webview.canBack(function (e) {if (e.canBack) {webview.back(); //這里不建議修改自己跳轉的路徑 } else {//首次按鍵，提示‘再按一次退出應用’ 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(); //退出應用 }}}})});});</script>

總結

以上是生活随笔為你收集整理的vue h5通过hbuilder打包为App的返回键兼容问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。