微信公众号WebApp接管返回键实现“再按一次退出程序”功能

╰+哭是因爲堅強的太久メ 2022-08-09 00:56 125阅读 0赞

按微信产品部副总经理张颖“每一个公众号都是一个APP”的说法，我们确实可以利用微信内置浏览器访问为公众号设计WebApp单页应用，以使得客户在访问公众号时有近似原生App的体验，不过目前这样的公众号很少，原因除了使用javascript开发单页应用的难度比开发一般的Web页面难度更高一些，更重要的一点是使用微信内置浏览器访问Web页面时，Android用户一按物理返回键就回到微信界面，而Android用户按物理返回键的习惯预期是回到上一页，这样就使得微信公众号的WebApp客户体验非常差。

有什么方法改变这一点么？最理想的解决办法是微信自己接管用户按物理返回键这个事件，然后类似像getNetworkType一样提供javascript事件给开发者使用。不过很遗憾，腾讯目前没有提供这个事件，而且看样子将来也不打算提供。

这个问题不是大问题，但如果不解决会影响Android用户的客户体验。幸运的是，我找到了解决办法，方法就是利用javascript window history来解决。

由于安全原因javascript不允许修改history里已有的url链接，但可以使用pushState方法往history里增加url链接，并且提供popstate事件监测从history栈里弹出url。我们可以利用这一点，在WebApp加载主界面后先往history里压入“\#”链接，然后监听popstate事件，在Android手机的浏览器，按下物理返回键默认的操作是执行window.history.back()，此时将触发popstate事件。收到popstate事件时代码显示“再按一次退出程序”div顶层标签，此时history栈已经为空，如用户再次按下物理返回键将执行默认操作回到微信。接着，我们要设定一个定时器，在指定的时间（比如2秒）后如用户没有再次按下物理返回键将再次往history里压入“\#”链接，并隐藏“再按一次退出程序”div顶层标签，等待用户下一次按下物理返回键。

javascript实现代码如下：

1.  pushHistory();  
2.  setTimeout(**function** () \{  
3.    window.addEventListener("popstate", **function**(e) \{  
4.      showBox("再按一次退出程序", 2000, **function**() \{          
5.        pushHistory();  
6.      \});  
7.    \}, **false**);  
8.  \}, 300);  
9.    
10. **function** pushHistory() \{  
11.   **var** state = \{  
12.     title: "title",  
13.     url: "\#"  
14.   \};  
15.   window.history.pushState(state, "title", "\#");  
16. \}  
17.   
18. **function** showBox(msg, timeOut, onTimeOut) \{  
19.   **if** (**typeof** alertBoxDiv === "undefined") \{  
20.     alertBoxDiv = $("<div/>").addClass("alert-box hide").append( $("<div/>").addClass("label label-primary")).appendTo($("body"));  
21.   \}  
22.   alertBoxDiv.children(".label").html(msg);  
23.   alertBoxDiv.removeClass("hide");  
24.   **if** (**typeof** timeOut === "undefined") timeOut = 2000;  
25.   setTimeout(**function**() \{  
26.     alertBoxDiv.addClass("hide");  
27.     **if** (**typeof** onTimeOut !== "undefined") onTimeOut();  
28.   \}, timeOut);  
29. \}

监听popstate事件的代码稍作修改就可以用于任意控制单页应用中javascript生成的任意动态页面的跳转，此方法已经在微信公众号WebApp中使用，可在微信中搜索“myfunds”公众号关注体验。

源引：http://blog.csdn.net/rilyu/article/details/37742595