网页增加返回按钮

如题。

        最近在做微信移动端开发，微信移动端有个很恶心的东西就是上面左上角有一个返回按钮，一按就返回到微信公众平台点击进去的第一个页面。虽然微信内置浏览器有前进和返回的按钮，但是对于用户来说，显然习惯了点击左上角的返回按钮，于是就会造成许多的误操作。对于我们的微店来说，也是个很碍事的东西，必须去掉。

        首先，隐藏掉微信内置浏览器的工具栏，微信官方的开发接口提供了解决方法，在我们需要隐藏工具栏（导航栏）的页面加载如下脚本：

<script>document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {WeixinJSBridge.call('hideToolbar');});</script>

         这样子在页面加载完成之后微信内置浏览器就会自动将工具栏隐藏。

         然后，如果你不希望你的页面被人分享，也可以将微信右上角的按钮也隐藏掉：只需要在上面的javascript代码中增加如下代码：

WeixinJSBridge.call('hideOptionMenu');

         完成之后，我们需要整理一下微信公众平台下的页面访问逻辑：

         首先当你在公众平台点击任意一个链接的时候，打开的页面不是处于浏览器中的，而是微信内置的一个html或者网页的解释器，在此页面点击任意链接之后，才是真正进入到内置的浏览器之中。所有网页的操作才生效。

         我们目前采取的方法是，在微信的顶部栏下重新制作一个导航栏，添加返回和回到首页的功能。在这里大家需要知道一条定律，用户对于三层以上的返回是没有信心的。所以建议各位开发者将自己的页面的深度设置在3层以内，避免过于复杂的回退。

         返回的代码，我们使用a标签来实现，也可以使用input来实现：

        

<input type=button value=刷新 onclick="window.location.reload()"><input type=button value=前进 onclick="window.history.go(1)"><input type=button value=后退 onclick="window.history.go(-1)"><input type=button value=前进 onclick="window.history.forward()"><input type=button value=后退 onclick="window.history.back()"> 后退+刷新<input type=button value=后退 

<!--使用a标签实现--><a href="javascript:window.history.go(-1)">

         在进入微信内置浏览器的第一级页面，其history.back()和history.go()是无效的，原因如上所述，这是进入浏览器的第一个页面，所以没有缓存或者cookies可以调用，url栈中没有可以pop出来的东西.

         解决方法是，可以将其a标签的href设置成我们的微网站的首页，这样子当用户点击返回的时候，会直接在浏览器中跳转到首页，虽然等会用户使用微信左上角的返回按钮时首页会再出现一遍，但是这种方法已经是比较ＯＫ的解决方法了。

         同时，参考很多的微信公众平台做出来的微店，他们的做法是，全部返回按钮都使用history,go()的函数，然后在二级页面上突出“返回首页”的按钮，在一级页面中，返回按钮坐在微信的左上角，与其返回按钮相靠近，这样子当用户想要点击返回一级页面的时候，就会直接跳转回到点击链接跳转的页面。这样子实际上是比较取巧的方法。当时也能够解决问题，但是对于二级页面来说，其返回按钮就形同虚设，很容易造成误操作。所以不推荐这种做法。

          以上就是微信王也端开发的时候一个个人总结。