前端制作之微信小技巧__避免a标签跳转到手机自带浏览器

Posted 2020-09-26

随着微信的越来越大众化，微信的使用程度也越来越高。随之，产生了一种新的推广模式，即微信推广。在这个微信的大平台上会衍生出许许多多的推广手段。而移动前端作为服务于手机用户的手机网页技术，也不可避免的加入进来。

 

一些客户不仅仅满足于自己的网站可以在手机浏览器上完美的展现出来，同时还要求可以在微信中进行广泛推广。这就要求移动前端的制作者在制作移动端网站的过程中，还要考虑是否兼容微信的推广。

 

就制作技术而言，如果可以完美的在手机浏览器中显示，那么在微信推广里也可以完美显示。因为微信中调用的网页引擎就是你手机支持的网页引擎。但在微信中显示的网页和在手机浏览器中显示的网页还是有一些细微的差别，这些细微的差别则决定了一些使用小技巧的可能。

 

微信对手机网页的支持不是百分之百的，它因为自身业务发展的需要，对网站中的a标签进行了二次封装定义。一些使用在a标签的js代码，在某些特定情况下不产生效果了。而有些a标签则莫名的产生了一些问题。

 

我举2个例子来说明：

 

例子1：<a href="tel:[phone]" >XXX</a>

这个a标签里的href调用的是手机号码。当点击这个a标签的时候则弹出是否拨打该号码的提示。在手机浏览器中使用是没有任何问题的，但在微信中，在安卓系统手机，微信5.0.1以上版本时该标签就失效了。（最新的微信版本是否解决了这个问题目前还不清楚）。这种情况下，将：

<a href="tel:[phone]" >XXX</a>改为

<a link="tel:[phone]" >

则可以解决部分安卓机型，（但不是全部的），有些机型依然不行。这个和微信客户端有关。目前没有找到满意的解决办法。

 

例子2：

这个例子比较抽象。我截图说明：

 

当点击阅读全文的时候进入到一个网站的首页，这时这个首页下面的三个按钮则是使用<a>标签制作的，当点击其中一个按钮时，他会莫名其妙的跳回到首页。这个是由于当前微信端调用的是微信的视图窗口，而非本身手机浏览器窗口。当点击a标签的时候，它会由当前的微信视图窗口自动跳到由微信调用的手机浏览器窗口上。所以才会出现这种情况，解决这种情况的出现则加上以下代码即可：说原理其实就是阻止了a标签的跳转：

$(document).on("click","a",function (event){
    event.preventDefault();
    if ($(event.target).attr("href")){
        location.href = $(event.target).attr("href");
    } else {
        location.href = $(event.target).parent().attr("href");
    }

}
);

 

这样一来，就可以在微信端视图窗口中阻止了a标签的跳转，也就是阻止了由微信端视图窗口跳到微信端调用的手机浏览器窗口的动作了。

 

可能有人会觉得这里有点绕。没有关系，介绍下面的小技巧的时候，再发一张截图就可以说明问题了。也就不绕了。

 

 

刚才的这个界面是通过微信端的阅读全文来进入的。此时进入的是微信端自己的视图窗口，而非微信端调用手机浏览器的窗口！但是如果我在这个页面中，随便点击一个可跳转的按钮，再进入新的页面的时候，这个时候就不是微信端自己的视图窗口了。而是来到了微信端调用手机浏览器的窗口，以下是截图：

 

 

注意我画红圈的地方，如果出现了这个工具条则证明你现在已经在微信端调用手机浏览器的窗口中了。而
微信端自己的视图窗口是不带这个工具条的。就像刚才的图那样

这个是不带工具条的。

 

这个就是微信端自己的视图窗口和微信调用手机浏览器窗口二者的最大区别！

 

我使用的手机是iphone4s，众所周知现在的手机屏幕是越来越大。但还是有相当一部分人在使用iphone4s，4s的屏幕较小。所以可视区域也较小。尤其高度！这个时候问题就来了。如果当前的网站只有一个页面的话，在微信端窗口中浏览还尚可，但如果是多个网页的话，当跳转到新的页面的时候微信会调用手机浏览器窗口了。此时页面中就会出现刚才我画红圈部分的工具条。这个工具条再加上上面的标题栏工具条。极大的减少了可视区域的面积。能否将它去掉呢？答案是可以的。加入以下代码就可以去掉微信中下面的工具条：

 

document.addEventListener(‘WeixinJSBridgeReady‘, function onBridgeReady(){

  WeixinJSBridge.call(‘hideToolbar‘);

});

 

其实不光可以去掉下面的工具条，还可以去掉其他在微信中一些功能性按钮。比如右上角的功能按钮：

document.addEventListener(‘WeixinJSBridgeReady‘, function onBridgeReady(){

  WeixinJSBridge.call(‘hideOptionMenu‘);
});

这个只是不经常用。如果功能按钮都隐藏了。像什么发送给朋友，分享到朋友圈等功能就不能用了。这也就失去了微信推广的功能。失去了使用微信的本质。除非有特殊需求，一般是不会隐藏该按钮的，没有多大现实意义。