I won't say much nonsense, let's just read the code~
<script>
//Toast These are all from others who stick to the Internet. But I can't find the source, please forgive me. function Toast(msg,duration){
duration=isNaN(duration)?3000:duration;
var m = ('div');
= msg;
="width: 60%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;bottom: 70px;left: 20%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";
(m);
setTimeout(function() {
var d = 0.5;
= '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
= '0';
setTimeout(function() { (m) }, d * 1000);
}, duration);
}
var time = '' // Used to save the last key press time; setTimeout(() => {
// Listen back button ('backbutton', function (evt) {
('Steps button');
var url = ('/')[1];
if (url === 'home' ) {// is on the app homepage, satisfying the exit app operation ('Satisfied')
if (new Date() - time < 2000) {// Less than 2s, exit the program ();
} else { // More than 2s, reset the timestamp, time = new Date();
Toast('Click to exit again', 2000);
}
return;
} else {
('The condition is not met')
(); // The exit operation is not satisfied, return to the previous page }
}, false);
}, 10)
</script>
The code is simple, and the logic is not very complicated. But let me tell you why you need to use setTime( ).
I added these codes in vue. I don't know why it didn't execute when I didn't add setTime(), and it was nothing wrong to check it several times. The boss who asked for advice at the end, he didn't know why. /Laughing but it works.
I also encountered an operation to turn off the virtual keyboard on the mobile phone before. He just doesn't execute it.
()
Later, it was also solved with settime( ).
Supplementary knowledge:Vue single page handles mobile phone return key problem
When developing a single-page app with Vue, sometimes you will encounter logic to process the return button, so that it will not return to the default previous page, but to go to the specified page. I checked it on Baidu and found that the methods given online are basically by listening to "popstate", which cannot be perfectly solved. Later, I thought of Router's "Navigation Guard" and just deal with it when I leave. Without further ado, just take the example:
beforeRouteLeave (to, from, next) {
if(){
next({path:'/home'});//Redirect to the specified path }else{
next()
}
}
Just redirect in the next() method. The solution is perfect, and you don't need to bind the monitor or unbind the monitor.
The above article vue mobile phone physical monitoring key + exit prompt code is all the content I share with you. I hope you can give you a reference and I hope you can support me more.