iOS 7 新版微信 URL 不支持跳转 App Store 的解决方案

最新推荐文章于 2022-08-22 15:42:31 发布

w36680130

最新推荐文章于 2022-08-22 15:42:31 发布

阅读量760

点赞数

文章标签： app 解决 app store 微信 url

原文地址为： iOS 7 新版微信 URL 不支持跳转 App Store 的解决方案

今天早上刚到公司，就收到反馈说公司前端页面的下载按钮在 iOS 7 的微信内置浏览器里面点击无效，经过确认之后，前端代码是正常的，问题出在了微信上，然后谷歌之，原来腾讯在***。

是 BUG 还是刻意为之？

最新版微信在所有开放的 webview（网页界面）里禁止了通过链接打开本地 app 或跳转到 app store，只有自家使用的 webview 能够打开 app 或跳转 app store。而且这种做法不像是 bug 所致，而是刻意为之。

可能的用意：微信是一个重要的互联网入口和应用入口，但是微信为了自家利益，需要控制入口和流量，进而加强对公共帐号和第三方应用的控制，打击竞争对手

该怎么办呢？

经过讨论之后，我们发现微信内置浏览器右上角的跳转按钮“在 Safari 中打开”可以间接的跳转 App Store ，所以最终我们的解决方案是如果是 iOS 的微信内置浏览器，点击按钮后，用弹出提示的方法来取代直接跳转。

效果如下图所示：

preview

前端实现

index.html

 
 <div id='popweixin'>
 <div class='tip top2bottom animate-delay-1'>
 <img src='/static/img/wechat_appstore_popup.jpg'/>
 </div>
</div>
 

app.css

 
 #popweixin {
 width:100%;
 height:100%;
 overflow:hidden;
 position:fixed;
 z-index:1000;
 background:rgba(0,0,0,.5);
 top:0;
 left:0;
 display:none;
}
#popweixin .tip {
 width:100%;
 background:#fff;
 z-index:1001;
}
.top2bottom {
 -webkit-animation:top2bottom 1.2s ease;
 -moz-animation:top2bottom 1.2s ease;
 -o-animation:top2bottom 1.2s ease;
 animation:top2bottom 1.2s ease;
 -webkit-animation-fill-mode:backwards;
 -moz-animation-fill-mode:backwards;
 -o-animation-fill-mode:backwards;
 animation-fill-mode:backwards
}
.animate-delay-1 {
 -webkit-animation-delay:1s;
 -moz-animation-delay:1s;
 -o-animation-delay:1s;
 animation-delay:1s
}
@-webkit-keyframes top2bottom {
 0% {
 -webkit-transform:translateY(-300px);
 opacity:.6
}
100% {
 -webkit-transform:translateY(0px);
 opacity:1
}
}@keyframes top2bottom {
 0% {
 transform:translateY(-300px);
 opacity:.6
}
100% {
 transform:translateY(0px);
 opacity:1
}
 

app.js

 
 function a(){
 var ua = navigator.userAgent.toLowerCase();
 if (/iphone|ipod/.test(ua)) {
 if(/micromessenger/.test(ua)){
 document.getElementById("popweixin").style.display = "block";
 }
 }
}
 