app的手机自带返回键 VUE |
您所在的位置：网站首页 › 真我手机怎么弄返回键 › app的手机自带返回键 VUE |
app的手机自带返回键 VUE
|
对于第一次弄这个项目的新手来说，简直了，网上百度了关于移动端手机物理返回的功能，结果有些好多是坑，就是不是坑也是他写的代码描述的功能不全，导致我浪费了时间。不过幸好的是，比之前我的逻辑能力好很多，因为我发现这个不对的时候，就先静下来理一理思路，后面就可以尝试自己的思路正不正确，为此我申请了三个账号，因为hbuilder一个账号一天设置了7次打包的权限。 第一步：在没有这个之前，APP在手机上只能通过代码写的返回键去返回操作，但是一按手机自带的物理返回键，噢噢，那就惨了，直接退出了程序了，不管在哪个页面，所以这第一步就是制止手机物理返回键一按就退出程序（APP） （1）先建一个back.js文件 //监听手机物理返回键的事件 document.addEventListener('plusready', function() { var first = null; plus.key.addEventListener('backbutton', function() { if(!first) { first = new Date().getTime(); //记录第一次按下回退键的时间 history.back(-1); //回退到上一页面 setTimeout(function() { //0.5s中后清除，因为1s的间隔相对于太长，这样连续按两次就退出去，效果不好 first = null; }, 500); } else { if(new Date().getTime() - first < 500) { //如果两次按下的时间小于0.5s，同上 plus.runtime.quit(); //那么就退出app } } }); })（2）在main.js中引入js文件 //导入back文件 防止手机自带的返回键退出程序 import Back from './js/back.js' var vm = new Vue({ el: '#app', Back, //实例化Back render: c => c(app), router })第二步：以上的步骤只是保证不让手机自带的物理返回键退出程序，但是请注意，上述back.js中我们只按一次返回键，那么就回退到历史的上一页面，问题来了，如果你按这个页面，又按另一个页面，当你只按一次返回键的时候，就会一直死循环，一直回退回退回退，这样依然不能达到效果，因为没有一个APP应用程序是这样的，所以，还需要进行以下的操作： （1）在需要的页面添加以下代码，什么叫需要的页面，就是当你连按两次返回键，发现他没有返回到tabs首页就直接退出程序，或是只按一次就一直死循环的。比如我一进入的页面的路径是'/tabs/home/'，那么当我去访问'/tabs/my/'的页面时，回到'/tabs/home/'，那么我按返回键的时候，他就会回到上一页，也就是我刚刚访问的'/tabs/my/'我的页面，所以需要给他加以下代码（我的APP不止这个页面加了，其他的十几个页面都加了，按需加，打包成APP的时候自己测试，发现哪不对了，就在哪个页面加上，一开始没有大局观的童鞋，可能考虑不周全，没加完，然后漏了这个漏了那个的，那么你就需要几个账号去打包了或是进行真机测试，就是通过usb连接手机去把APP放到手机上测试） mounted() { //挂载完成后，判断浏览器是否支持popstate var that = this if(window.history && window.history.pushState) { //监听手机物理的回退按钮，并阻止其默认事件 window.addEventListener('popstate', that.close, false) } }, destroyed() { //页面销毁时，取消监听。否则其他vue路由页面也会被监听 let that = this setTimeout(function() { window.removeEventListener('popstate', that.close, false) }, 0) }, methods: { close() { //replace替换原路由，作用是避免回退死循环 this.$router.replace('/tabs/home') } },这三个步骤一个都不能少，比如在开始时挂载，挂载完以后离开页面后销毁，最重要的一点就是close（）方法不能用其他的方法，比如push（）这类的，必须用replace（），他的作用就是为了避免回退死循环的，你说重不重要！！！！！ 就这几个步骤了，我开始搜的其他页面都不怎么可以实现，是综合了几个链接自己想出来的，看到此篇文章的同学，也可以去看看，但是他们的共同点就是说的不清楚，功能也说不清楚，分开来的话根本实现不了，只可以实现小小的一部分。 （转载：https://blog.csdn.net/qq_40650146/article/details/85236411?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task） （转载：https://bbs.csdn.net/topics/392322972?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task 这个要看评论 他是用插件来写的）
（转载：https://www.csdn.net/gather_22/MtTaAg2sOTcwOS1ibG9n.html）
|
【本文地址】
今日新闻 |
推荐新闻 |