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

是 BUG 还是刻意为之?

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

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

该怎么办呢?

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

效果如下图所示:

前端实现

index.html

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

app.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#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

1
2
3
4
5
6
7
8
function a(){
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipod/.test(ua)) {
if(/micromessenger/.test(ua)){
document.getElementById("popweixin").style.display = "block";
}
}
}

iOS 7 新版微信 URL 不支持跳转 App Store 的解决方案的更多相关文章

  1. 根据appid跳到App Store某个APP的详情页

    需求 本手机是否装了某个APP 示例百度appid 382201985  scheme BaiduSSO:// 1.是,直接打开百度APP 2.否,跳到App Store百度APP的详情页 NSStr ...

  2. iOS 10 适配 ATS(app支持https通过App Store审核)

    iOS 10 适配 ATS 一. HTTPS 其实HTTPS从最终的数据解析的角度,与HTTP没有任何的区别,HTTPS就是将HTTP协议数据包放到SSL/TSL层加密后,在TCP/IP层组成IP数据 ...

  3. 点击页面判断是否安装app并打开,否则跳转app store的方法

    常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用 ...

  4. 小知识点-ios跳过app store更新版本

    版本更新实现的思路 获取自身的版本号 获取AppStore的版本号 自身的版本号和AppStore的比较 弹窗提示所需数据的获取的方式 1.获取自身的版本号 2.AppStore的版本号 Wechat ...

  5. iOS 上传appstore 一直卡在正在通过 App Store 进行鉴定(转)

    原帖地址:https://www.jianshu.com/p/d28714f3ef74 手动操作一下执行xcode包里面的命令行操作: (1)找到前往>应用程序里面的xcode (2)显示包内容 ...

  6. iOS 跳转到 App Store 下载评分页面

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  7. 二维码跳转不同的 app store

    说道二维码 之前是用来跳转app store  然后在就是出来的 扫码付款什么的 用的很平常,其实里面也很简单   自己刚开始接触的时候     同事说要做一个二维码下载 应用 => 我=懵逼 ...

  8. 手机浏览器通过Scheme跳转APP,兼容各种手机浏览器

    一个比较完整的产品线,必定有APP和网站,另外还有微信公众号网页和小程序.那么有一个比较常见的需求就是在手机浏览器内打开APP,实现起来也比较简单,只要APP配置的有URLScheme即可. 但是因为 ...

  9. html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia

    以前在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上. 优势在于结构简单,可插拔式的录音格式支持,几乎可以支持任意格式(前提有相应的编码器):默认提供 ...

随机推荐

  1. JDOM

    JDOM是什么: To provide a complete, Java-based solution for accessing, manipulating, and outputting XML ...

  2. .net source code

    .NET 类库的强大让我们很轻松的解决常见问题,作为一个好专研的程序员,为了更上一层楼,研究CLR的基础类库实现是快速稳定的捷径. 一般场景下,采用 Reflector可以反射出.NET 的部分实现出 ...

  3. Java集合类操作优化总结

    清单 1.集合类之间关系 Collection├List│├LinkedList│├ArrayList│└Vector│ └Stack└SetMap├Hashtable├HashMap└WeakHas ...

  4. asp.net mvc4 Controller与Action执行过程的研究(学习笔记)

    当IIS收到一个http请求,把请求信息发给对应的HttpModel(实际是实现类UrlRoutingModule),在HttpModel中会注册HttpApplication 类中的PostReso ...

  5. Discuz帖子列表页无法ajax加载下一页问题

    上周末抽空重构了一下JX3PVE的PVE栏目,只上线了宏库栏目,结果出了一堆Bug.奈何公司这段时间都在搞完美假期这专题,太忙也没去处理.这不是周末拿时间来看一下. 发现其中有一个是点“下一页”aja ...

  6. logger.debug,logger.info,logger.warn,logger.error,logger.fatal的区别

    logger.debug,logger.info,logger.warn,logger.error,logger.fatal的区别 logger.debug,logger.info,logger.wa ...

  7. PHP传引用报错(5.4版本)

    php5.3系列版本以及以前版本,传引用没有什么问题,升级到php5.4以后,传引用的地方,全报错 Fatal error: Call-time pass-by-reference has been ...

  8. python邮件收发SAMPLE

    #!/usr/bin/env python # -*- encoding: utf-8 -*- import os, socket from time import localtime, strfti ...

  9. http://jinnianshilongnian.iteye.com/blog/1996071

    http://jinnianshilongnian.iteye.com/blog/1996071 http://my.oschina.net/jkcui/blog/388400 http://tian ...

  10. Button with Hover Effect (Learned from 百度脑图)

    今天想学学PM的技能, 打开了百度脑图的网站, 看到中间那个按键的hover效果蛮好看, 遂学习一下. 效果如下: Demo 其实就是利用:before绘制了半透明白色的遮罩, 平时用transfor ...