微信開(kāi)發(fā)，仿原生實(shí)現(xiàn) “再按一次返回”功能

binta 發(fā)布于2019-08-21 10:57 / 2012人閱讀

摘要：應(yīng)用場(chǎng)景在微信開(kāi)發(fā)菜單的時(shí)候，遇到一個(gè)問(wèn)題，當(dāng)從菜單進(jìn)去的頁(yè)面后，如果立刻按返回鍵，則出現(xiàn)返回到微信公眾號(hào)的微信界面。并沒(méi)有任何提示，但我看到京東微信公眾號(hào)點(diǎn)擊進(jìn)去，立刻按返回鍵時(shí)是有提示的，在微信開(kāi)發(fā)文檔中并未找到相關(guān)的說(shuō)明。

應(yīng)用場(chǎng)景

在微信開(kāi)發(fā)菜單的時(shí)候，遇到一個(gè)問(wèn)題，當(dāng)從菜單進(jìn)去的頁(yè)面后，如果立刻按返回鍵，則出現(xiàn)返回到微信公眾號(hào)的微信界面。并沒(méi)有任何提示，但我看到【京東微信公眾號(hào)】點(diǎn)擊進(jìn)去，立刻按返回鍵時(shí)是有提示的，在微信JSSDK 開(kāi)發(fā)文檔中并未找到相關(guān)的說(shuō)明。注意【京東】右上角，都是可以自定義的。

方案原理

利用HTML5的window.history.pushState特性，例如 當(dāng)從A頁(yè)面進(jìn)入時(shí)，先判斷window.history.length==1那么調(diào)用window.history.pushState 寫(xiě)進(jìn)一個(gè)空歷史記錄。并且監(jiān)聽(tīng)返回鍵，當(dāng)按下返回鍵時(shí)（我們是沒(méi)辦法阻止返回事件的，但由于上一個(gè)歷史記錄是空白的，所以的還是當(dāng)前頁(yè)面。）,監(jiān)聽(tīng)到返回事件 使用layer彈框插件提示，“您確定要返回微信嗎？”  或者其他。點(diǎn)擊【再逛逛】，則再次寫(xiě)入空白歷史記錄，點(diǎn)擊【確定】或者再次點(diǎn)擊【返回鍵】則關(guān)閉微信瀏覽器。

方案代碼

     if(window.history.length==1){//判斷是第一次從微信菜單進(jìn)入頁(yè)面
         //寫(xiě)入空白歷史記錄
         pushHistory();  

     }
     
     //延時(shí)監(jiān)聽(tīng)   
     setTimeout(function () {  
          //監(jiān)聽(tīng)物理返回按鈕  
          window.addEventListener("popstate", function(e) {  
                
                   
                layer.open({
                        content: "您確定要返回微信嗎？",
                      
                        btn: ["確認(rèn)", "再逛逛"],
                        shadeClose: false,
                    
                        yes: function(){
                            //調(diào)用微信瀏覽器私有API關(guān)閉瀏覽器
                            WeixinJSBridge.call("closeWindow");
                        }, no: function(){
                            //點(diǎn)擊【再逛逛】，再次寫(xiě)入空白歷史記錄
                            pushHistory();
                        }
                });
          }, false);  
      
       }, 300);  
      /**
       * [pushHistory 寫(xiě)入空白歷史記錄](méi)
       * @author 邱先生
       * @copyright 煙火里的塵埃 
       * @version [V1.0版本] 
       * @date 2016-07-30
       * @return {[type]} [description]
       */         
     function pushHistory() {  
         var state = {  
             title: "title",  
             url: "#"  
         };  
         window.history.pushState(state, "title", "#");  
     }

云服務(wù)器 GPU云服務(wù)器微信主動(dòng)實(shí)現(xiàn)群發(fā)功能仿原生ios時(shí)間原生js實(shí)現(xiàn) 微信支付原生支付

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86470.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

binta

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow如何使用

閱讀 2278·2023-04-25 23:15
效率倍增，PyCaret：一個(gè)開(kāi)源、低代碼的 Python 機(jī)器學(xué)習(xí)工具

閱讀 1943·2021-11-22 09:34
python scrapy 代理中間件，爬蟲(chóng)必掌握的內(nèi)容之一

閱讀 1564·2021-11-15 11:39
傳感與檢測(cè)技術(shù)，Pt100熱電阻測(cè)溫實(shí)驗(yàn)報(bào)告，江南大學(xué)物聯(lián)網(wǎng)

閱讀 971·2021-11-15 11:37
C語(yǔ)言進(jìn)階：程序預(yù)處理

閱讀 2166·2021-10-14 09:43
CYUN：國(guó)慶鉅惠！美國(guó)CERA高防云服務(wù)器、香港CN2 GIA云服務(wù)器最低5折起

閱讀 3506·2021-09-27 13:59
重溫 Flex 布局

閱讀 1517·2019-08-30 15:43
一步步教你用 CSS 為 SVG 添加濾鏡

閱讀 3480·2019-08-30 15:43

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

微信開(kāi)發(fā)，仿原生實(shí)現(xiàn) “再按一次返回”功能

相關(guān)文章