热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信开发,仿原生实现“再按一次返回”功能

方案原理利用HTML5的window.history.pushState特性,例如当从A页面进入时,先判断window.history.length1那么调用window.history.p

方案原理

利用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);  
        
     function pushHistory() {  
         var state = {  
             title: "title",  
             url: "#"  
         };  
         window.history.pushState(state, "title", "#");  
     }  

 


推荐阅读
  • 用Vue实现的Demo商品管理效果图及实现代码
    本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]
  •     参考:微信JS-SDK文档其中包含有分享朋友圈、发送给朋友的js接口方法。(似乎不知道什么时候就会废弃)    文档中有完整的步骤,麻烦的是第三步:通过config接口注入权限验证配置。其 ... [详细]
  • GetWindowLong函数
    今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • WebSocket与Socket.io的理解
    WebSocketprotocol是HTML5一种新的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送 ... [详细]
  • 在编写业务代码时,常常会遇到复杂的业务逻辑导致代码冗长混乱的情况。为了解决这个问题,可以利用中间件模式来简化代码逻辑。中间件模式可以帮助我们更好地设计架构和代码,提高代码质量。本文介绍了中间件模式的基本概念和用法。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • angular.element使用方法及总结
    2019独角兽企业重金招聘Python工程师标准在线查询:http:each.sinaapp.comangularapielement.html使用方法 ... [详细]
  • 微信公众平台开发之如何上传下载多媒体文件
    这篇文章主要为大家展示了“微信公众平台开发之如何上传下载多媒体文件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑, ... [详细]
  • 微信开发之2048游戏的示例分析
    小编给大家分享一下微信开发之2048游戏的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有 ... [详细]
  • 微信开发之消息回复--文本消息(三)
    一、消息格式1<xml>2<ToUserName><![CDATA[toUser]]>3<ToUserName ... [详细]
  • 微信setData回调函数的示例分析
    这篇文章将为大家详细讲解有关微信setData回调函数的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收 ... [详细]
  • 微信开发中怎样接收视频消息的接口和参数
    这篇文章主要介绍微信开发中怎样接收视频消息的接口和参数,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!接收普通消息 ... [详细]
author-avatar
四海承风2502893247
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有