微信开辟,仿原生完成 “再按一次返回”功用

运用场景

在微信开辟菜单的时刻,碰到一个题目,当从菜单进去的页面后,假如马上按返回键,则涌现返回到微信民众号的微信界面。并没有任何提醒,但我看到【京东微信民众号】点击进去,马上按返回键时是有提醒的,在微信JSSDK 开辟文档中并未找到相干的申明。注重【京东】右上角,都是能够自定义的。

《微信开辟,仿原生完成 “再按一次返回”功用》

《微信开辟,仿原生完成 “再按一次返回”功用》

计划道理

应用HTML5的window.history.pushState特征,比方 当从A页面进入时,先推断window.history.length==1那末挪用window.history.pushState 写进一个空历史记录。而且监听返回键,当按下返回键时(我们是没办法阻挠返回事宜的,但由于上一个历史记录是空缺的,所以的照样当前页面。),监听到返回事宜 运用layer弹框插件提醒,“您肯定要返回微信吗?” 或许其他。点击【再走走】,则再次写入空缺历史记录,点击【肯定】或许再次点击【返回键】则封闭微信浏览器。

计划代码


     if(window.history.length==1){//推断是第一次从微信菜单进入页面
         //写入空缺历史记录
         pushHistory();  

     }
     
     //延时监听   
     setTimeout(function () {  
          //监听物理返回按钮  
          window.addEventListener("popstate", function(e) {  
                
                   
                layer.open({
                        content: '您肯定要返回微信吗?',
                      
                        btn: ['确认', '再走走'],
                        shadeClose: false,
                    
                        yes: function(){
                            //挪用微信浏览器私有API封闭浏览器
                            WeixinJSBridge.call('closeWindow');
                        }, no: function(){
                            //点击【再走走】,再次写入空缺历史记录
                            pushHistory();
                        }
                });
          }, false);  
      
       }, 300);  
      /**
       * [pushHistory 写入空缺历史记录]
       * @author 邱教师
       * @copyright 烟火里的灰尘 
       * @version [V1.0版本] 
       * @date 2016-07-30
       * @return {[type]} [description]
       */         
     function pushHistory() {  
         var state = {  
             title: "title",  
             url: "#"  
         };  
         window.history.pushState(state, "title", "#");  
     }  


    原文作者:烟火里的尘埃
    原文地址: https://segmentfault.com/a/1190000006123059
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞