实现微信浏览器内打开App Store链接
hoosin opened this issue · comments
微信浏览器是不支持打开App Store 页面的,不知道微信为什么这么做。比如你页面写
html <a href=”http://itunes.apple.com/us/app/id399608199″>download</a>
,在微信浏览器点击链接是没有反应的,但是如果是其他的链接地址,比如百度那就没有问题
后来我发现如果你在微信官方后台编辑图文,把原文链接写为:http://itunes.apple.com/us/app/id399608199
,那就可以打开了,发现微信页面的“查看原文”是一个function,如下
function viewSource() {
var redirectUrl = sourceurl.indexOf('://') < 0 ? 'http://' + sourceurl : sourceurl;
//redirectUrl = http://itunes.apple.com/us/app/id399608199
redirectUrl = 'http://' + location.host + '/mp/redirect?url=' + encodeURIComponent(sourceurl);
//此处是关键,
redirectUrl = http://mp.weixin.qq.com/mp/redirect?url=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fid399608199%23rd
var opt = {
url: '/mp/advertisement_report' + location.search + '&report_type=3&action_type=0&url=' + encodeURIComponent(sourceurl) + '&uin=' + uin + '&key=' + key + '&__biz=' + biz + '&r=' + Math.random(),
type: 'GET',
async: !1
};
return tid ? opt.success = function(res) {
try {
res = eval('(' + res + ')');
} catch (e) {
res = {
};
}
res && res.ret == 0 ? location.href = redirectUrl : viewSource();
}
: (opt.timeout = 2000, opt.complete = function() {
location.href = redirectUrl;
}),
ajax(opt),
!1;
}
真正的url是:html http://mp.weixin.qq.com/mp/redirect?url=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fid399608199%23rd
看来微信允许打开mp.weixin.qq.com这个host下的网页,然后用js再打开真正的页面。
现在简单了,将页面的代码写为:html<a href=”http://mp.weixin.qq.com/mp/redirect?url=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fid399608199%23rd”>download</a>
,在微信浏览器内可以打开app store的地址了。
Cool!
此方案现在已经失效了
以下均指在 iOS 上的微信:
微信 webview 直接打开 App Store 链接会打不开。
曾经的方法是直接使用 mp.weixin 做 redirect(https://github.com/hoosin/mobile-web-favorites/issues/7),但是这个方法失效了——现在(15年4月2日)在微信 webview 里打开任意一个最美应用的的推荐 app 页,点击到 App Store 下载都可以复现问题。
猜测原因是微信会检测是从哪个域名跳转到 mp.weixin 做跳转的,有白名单。
- 可行的方法一:在微信 webview 里引导使用 Safari 打开,Appsolution 就是这样做的;
- 可行的方法二:与应用宝合作,将下载链接引导到应用宝的「微下载」,再自动跳转到 App Store,知乎是这样做的,搜狐视频可能也是这样做的;
- 可行的方法三:在网页中内置二维码图片,长按二维码识别出 mp.weixin redirect 链接的形式,因为识别二维码后是「新建了一个 webview(可以从出现动画看出来)」,因此就能通过。
但是微信对于网页中的二维码图片识别机理很微妙且不透明,跟二维码图片实际大小、周围白边大小,甚至是和设备宽度都有关系(iPad 能长按识别的二维码,iPhone 长按不能识别)。
因此总的来说,就是经过多次调试,实验微信可以识别出的二维码,目前的版本,测试在 4s、5s、6和 iPad Air 均可以长按识别二维码,并正常跳转到 App Store。
为什么我这里在微信里面是可以的.。 测试页面http://www.polande.com/demo/mobile.html
@polandeme os或者版本问题吧
最近发现这种做法失效了,我的微信版本是6.2.2,iOS版本是8.1。请问有人遇到和我一样的情况吗?
mark,我厂都是用着腾讯XX宝来做的
早就不行了,现在稳妥的做法是长按扫描或者上架应用宝
titancat notifications@github.com于2015年6月18日星期四写道:
最近发现这种做法失效了,我的微信版本是6.2.2,iOS版本是8.1。请问有人遇到和我一样的情况吗?
—
Reply to this email directly or view it on GitHub
#7 (comment)
.
var QQ_APP_STORE = 'http://a.app.qq.com/o/simple.jsp?pkgname=xxxxx';
window.top.location.href = QQ_APP_STORE;
xxxxx
是贵司应用对应应用宝的下载地址。
如果使用
<a href="download.html">跳转按钮</a>
在download.html中使用
<script>
setTimeout(function () {
location.href = '...' // app store link;
}, 200);
</script>
刚刚自测成功,微信版本:6.2.3,ios版本:8.3。
@TitanCat 尤其是对于微信相关的种种情况,setTimeout
有神效 :P
@12789 刚刚我借了一台iOS 8.4(12H143)的,也没问题啊。如果你已经跳转到download.html这个页面,再刷新一下会跳转么?
@sixersun 在已经跳转到的这个html页面刷新会自动跳转么?
@sixersun 你的项目页面地址能po出来么?
http://cli.im/ExVqQc 改下UA 加micromessenger/6.2.,就能看到你的脚本
@sixersun
昨天做了几个test比对,发现问题的本质还是midare提到的微信白名单:
用同样的代码,使用我自己的域名就不会跳转;使用了公司域名(貌似是产品和微信方谈的,细节不清楚),就ok了。
至于setTimeout的使用,是因为测试同学发现了ios上的bad case,之后我加了特殊处理就ok了,我还以为可以解决这个issue的问题,还是想多了...
@sixersun :D
这周一直在解决这个问题,现在还是不可以,不过提供一点建议思路,一:Fenng的丁香园App可以实现从微信中自动调回到App的功能。请在微信中打开链接:http://app.dxy.cn/aspirin.htm 看到好像引用了Zepto进行初始化DOM元素的操作。二.城觅和面包旅行也可以实现从微信中跳转回App的效果。虽然现在还没解决但是希望能提供点建议。
@TIERNEY-WANG 我之前个项目好像实现了网页唤起 app , 但是只在 iOS 下有效。
唤起app和定向到app store是不同的方法,不过丁香园这个确实可以跳转app store,暂时还不清楚是怎么做到的。
腾讯旗下或者腾讯投资的公司是在白名单内的,可以在微信内直接打开App Store的链接.
丁香园已经得到腾讯的投资.所以可以打开.
城觅和面包旅行 同样是腾讯投资的.
好像确实有白名单一说。我试了新浪微博、大众点评的代码,都不行。
Still a problem :(
还是做引导让用户在浏览器打开吧
微信内基本无解了,白名单挡住了
好无耻,, 就算为了安全, 也开放个申请渠道啊..
直接使用App Store的下载地址做二微码,在威信里扫一扫是会直接跳转到App Store下载页的。
白名单挡住是什么意思。。。
同样是安装链接,360的啥啥安装链接就可以跳转,itunes的官方链接跳转不了么
微信脾气怎么这么怪?
- 直接访问 iTunes 链接(包括直接点击链接、长按扫一扫、拍照扫码),即 webview 打开的第一个页面、没有 document.referrer 的话,都可以直接打开 iTunes 链接(并且唤起 App Store)
- 跳转访问 iTunes 链接(包括 a[href] 和 location.href),即有 document.referrer 的话,除非是白名单下的域名(可以用 host、charles 等把 dianping.com 等指到自己的页面),否则都不能唤起 App Store。经由应用宝可以跳转,说明应用宝提供的微下载能力的链接域名在白名单内。
现在各大应用的实践都是走应用宝了,反正跳转是自动的,对转化率影响很小。
反倒是安卓下载,应用宝试图做出 Universal Link 的体验。但是大家显然不想走这条路,把流量白白给应用宝(转化率低、还不好区分渠道),直接下载 APK 如果不行的话(不知道现在情况怎么样),那么就各显神通了…
用universal link 应该就可以了