资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/微信开发，仿原生实现 “再按一次返回”功能

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

remcarpediem / 2921人阅读

摘要：应用场景在微信开发菜单的时候，遇到一个问题，当从菜单进去的页面后，如果立刻按返回键，则出现返回到微信公众号的微信界面。并没有任何提示，但我看到京东微信公众号点击进去，立刻按返回键时是有提示的，在微信开发文档中并未找到相关的说明。

应用场景 
</>复制代码 
  1. 在微信开发菜单的时候，遇到一个问题，当从菜单进去的页面后，如果立刻按返回键，则出现返回到微信公众号的微信界面。并没有任何提示，但我看到【京东微信公众号】点击进去，立刻按返回键时是有提示的，在微信JSSDK 开发文档中并未找到相关的说明。注意【京东】右上角，都是可以自定义的。

方案原理 
</>复制代码 
  1. 利用HTML5的window.history.pushState特性，例如 当从A页面进入时，先判断window.history.length==1那么调用window.history.pushState 写进一个空历史记录。并且监听返回键，当按下返回键时（我们是没办法阻止返回事件的，但由于上一个历史记录是空白的，所以的还是当前页面。）,监听到返回事件 使用layer弹框插件提示，“您确定要返回微信吗？”  或者其他。点击【再逛逛】，则再次写入空白历史记录，点击【确定】或者再次点击【返回键】则关闭微信浏览器。
方案代码 
</>复制代码 
  1.      if(window.history.length==1){//判断是第一次从微信菜单进入页面
  2.          //写入空白历史记录
  3.          pushHistory();  
  4.      }
  5.      
  6.      //延时监听   
  7.      setTimeout(function () {  
  8.           //监听物理返回按钮  
  9.           window.addEventListener("popstate", function(e) {  
  10.                 
  11.                    
  12.                 layer.open({
  13.                         content: "您确定要返回微信吗？",
  14.                       
  15.                         btn: ["确认", "再逛逛"],
  16.                         shadeClose: false,
  17.                     
  18.                         yes: function(){
  19.                             //调用微信浏览器私有API关闭浏览器
  20.                             WeixinJSBridge.call("closeWindow");
  21.                         }, no: function(){
  22.                             //点击【再逛逛】，再次写入空白历史记录
  23.                             pushHistory();
  24.                         }
  25.                 });
  26.           }, false);  
  27.       
  28.        }, 300);  
  29.       /**
  30.        * [pushHistory 写入空白历史记录]
  31.        * @author 邱先生
  32.        * @copyright 烟火里的尘埃 
  33.        * @version [V1.0版本] 
  34.        * @date 2016-07-30
  35.        * @return {[type]} [description]
  36.        */         
  37.      function pushHistory() {  
  38.          var state = {  
  39.              title: "title",  
  40.              url: "#"  
  41.          };  
  42.          window.history.pushState(state, "title", "#");  
  43.      }
云服务器 GPU云服务器 微信主动实现群发功能 仿原生ios时间 原生js实现 微信支付 原生支付

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49958.html

相关文章

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

    摘要：应用场景在微信开发菜单的时候，遇到一个问题，当从菜单进去的页面后，如果立刻按返回键，则出现返回到微信公众号的微信界面。并没有任何提示，但我看到京东微信公众号点击进去，立刻按返回键时是有提示的，在微信开发文档中并未找到相关的说明。 应用场景 在微信开发菜单的时候，遇到一个问题，当从菜单进去的页面后，如果立刻按返回键，则出现返回到微信公众号的微信界面。并没有任何提示，但我看到【京东微信公众...

    binta 评论0 收藏0

  • 微信小程序资源汇总

    awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

    Olivia 评论0 收藏0

  • 微信小程序实战（一）之仿美丽说

    摘要：被美丽说少女粉吸引，就想着自己也写一个来练练手，正好最近在学习微信小程序。微信小程序的组件真的很强大，以前写图片切换功能都好麻烦，小圆点的切换都要自己写。 被美丽说少女粉吸引，就想着自己也写一个来练练手，正好最近在学习微信小程序。接下来让我们分享一下我的学习历程吧！ 选题 其实纠结了好久该仿什么，看到别人都写的差不多了，自己却还没有动手，很着急，那两天一直在思考在查找，弄得自己特别烦躁...

    wangdai 评论0 收藏0

发表评论

登陆后可评论

0条评论

remcarpediem

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<