場景：(vue cli2) app物理返回鍵在 tabbar 的頁面按一次提示 ：再按一次退出應(yīng)用 飘庄； 再按一次就退出app壹哺，在其余的頁面點(diǎn)擊返回上一頁(12/18補(bǔ)充：監(jiān)聽返回鍵關(guān)閉彈窗 )
document.addEventListener('plusready', function () {
var webview = plus.webview.currentWebview();
var first = null;
plus.key.addEventListener('backbutton', function () {
webview.canBack(function (e) {
if (e.canBack) {
webview.back(-1);
} else {
//首頁返回鍵處理
//處理邏輯：3秒內(nèi)，連續(xù)兩次按返回鍵蚂会，則退出應(yīng)用计济；
//首次按鍵，提示‘再按一次退出應(yīng)用’
if (new Date().getTime() - first < 3000) {
// console.log("關(guān)閉程序")
plus.runtime.quit();
} else {
//自定義的彈窗 （引入的vant.js 的toast）
Toast({
message: '再按一次退出應(yīng)用',
position: 'bottom'
})
first = new Date().getTime();
}
}
})
});
});
把上邊的代碼直接放在 main.js 中就可以用了
貼一張圖：
image.png
完成Ｇ镀鳌！谐丢！
2019/12/18 補(bǔ)充爽航，返回鍵關(guān)閉彈窗
首先分析一下生命周期 mounted ，很多人的第一反應(yīng)是dom掛載乾忱，執(zhí)行一次etc... 但是他有一個(gè)很容易被人忽略的功能：掛載＜フ洹！ 這個(gè)周期的時(shí)候你可以為當(dāng)前頁面掛載一個(gè)方法窄瘟，這個(gè)方法用來監(jiān)聽手機(jī)的物理返回鍵衷佃！
mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.fun, false);//false阻止默認(rèn)事件
}
},
methods: {
fun(){
console.log('監(jiān)聽到了')
this.show = false
},
},
destroyed(){
window.removeEventListener('popstate', this.fun, false);//false阻止默認(rèn)事件
},
別慌復(fù)制，你知道是復(fù)制在那里嗎蹄葱？
一般我們會把彈窗單獨(dú)封裝成一個(gè)組件氏义，所以，之接把他復(fù)制到你的組件里就行了新蟆！ 感恩觅赊！學(xué)習(xí)Ｓ胰铩琼稻！
