hoosin/mobile-web-favorites

实现微信浏览器内打开App Store链接

hoosin opened this issue · 45 comments

hoosin commented

微信浏览器是不支持打开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的地址了。

jerrylau91 commented

Cool!

naoyeye commented

此方案现在已经失效了

kitayoshi commented

以下均指在 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 做跳转的，有白名单。

  1. 可行的方法一：在微信 webview 里引导使用 Safari 打开，Appsolution 就是这样做的；
  2. 可行的方法二：与应用宝合作，将下载链接引导到应用宝的「微下载」，再自动跳转到 App Store，知乎是这样做的，搜狐视频可能也是这样做的；
  3. 可行的方法三：在网页中内置二维码图片，长按二维码识别出 mp.weixin redirect 链接的形式，因为识别二维码后是「新建了一个 webview（可以从出现动画看出来）」，因此就能通过。

但是微信对于网页中的二维码图片识别机理很微妙且不透明，跟二维码图片实际大小、周围白边大小，甚至是和设备宽度都有关系（iPad 能长按识别的二维码，iPhone 长按不能识别）。

因此总的来说，就是经过多次调试，实验微信可以识别出的二维码，目前的版本，测试在 4s、5s、6和 iPad Air 均可以长按识别二维码，并正常跳转到 App Store。

polandeme commented

为什么我这里在微信里面是可以的.。 测试页面http://www.polande.com/demo/mobile.html

  • 😄1
hoosin commented

@polandeme os或者版本问题吧

mcattx commented

最近发现这种做法失效了，我的微信版本是6.2.2，iOS版本是8.1。请问有人遇到和我一样的情况吗？

smallke commented

mark,我厂都是用着腾讯XX宝来做的

kitayoshi commented

早就不行了，现在稳妥的做法是长按扫描或者上架应用宝

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)
.

mcattx commented

@midare 我昨天通过应用宝的方法跳转成功了

hoosin commented

@TitanCat 应用宝是腾讯的生态圈，是可以的。

mcattx commented

@hoosin 肉在砧板上，不得不低头。

sixersun commented

请教下应用宝的跳转方法是怎样的@TitanCat

mcattx commented

@sixersun

var QQ_APP_STORE = 'http://a.app.qq.com/o/simple.jsp?pkgname=xxxxx';
window.top.location.href = QQ_APP_STORE;

xxxxx是贵司应用对应应用宝的下载地址。

  • 👍2
TeaEra commented

如果使用

<a href="download.html">跳转按钮</a>

在download.html中使用

<script>
setTimeout(function () {
  location.href = '...' // app store link;
}, 200);
</script>

刚刚自测成功，微信版本：6.2.3，ios版本：8.3。

mcattx commented

@TeaEra 这个倒没试过。不过 setTimeout可以解决很多莫名其妙的问题倒是真的。哈哈。

TeaEra commented

@TitanCat 尤其是对于微信相关的种种情况，setTimeout有神效 :P

damozhang commented

@TeaEra 微信版本：6.2.3，iOS版本：8.4 测试未成功

TeaEra commented

@12789 刚刚我借了一台iOS 8.4(12H143)的，也没问题啊。如果你已经跳转到download.html这个页面，再刷新一下会跳转么？

sixersun commented

@TeaEra 微信6.2.3 测试未成功，
某个页面跳转到->downhtml
然后跳转未成功

TeaEra commented

@sixersun 在已经跳转到的这个html页面刷新会自动跳转么？

sixersun commented

@TeaEra 微信下不行

TeaEra commented

@sixersun 你的项目页面地址能po出来么？

sixersun commented

http://cli.im/ExVqQc 改下UA 加micromessenger/6.2.，就能看到你的脚本

TeaEra commented

@sixersun
昨天做了几个test比对，发现问题的本质还是midare提到的微信白名单：
用同样的代码，使用我自己的域名就不会跳转；使用了公司域名（貌似是产品和微信方谈的，细节不清楚），就ok了。
至于setTimeout的使用，是因为测试同学发现了ios上的bad case，之后我加了特殊处理就ok了，我还以为可以解决这个issue的问题，还是想多了...

sixersun commented

@TeaEra 原来如此，还是很谢谢，能解决这个问题

1099271 commented

这周一直在解决这个问题，现在还是不可以，不过提供一点建议思路，一：Fenng的丁香园App可以实现从微信中自动调回到App的功能。请在微信中打开链接:http://app.dxy.cn/aspirin.htm 看到好像引用了Zepto进行初始化DOM元素的操作。二.城觅和面包旅行也可以实现从微信中跳转回App的效果。虽然现在还没解决但是希望能提供点建议。

mcattx commented

@TIERNEY-WANG 我之前个项目好像实现了网页唤起 app , 但是只在 iOS 下有效。

TeaEra commented

唤起app和定向到app store是不同的方法，不过丁香园这个确实可以跳转app store，暂时还不清楚是怎么做到的。

qingralf commented

腾讯旗下或者腾讯投资的公司是在白名单内的,可以在微信内直接打开App Store的链接.
丁香园已经得到腾讯的投资.所以可以打开.

城觅和面包旅行 同样是腾讯投资的.

1099271 commented

@TitanCat 请教下是如何实现网页唤醒App的啊。方便给个链接吗

mcattx commented

@TIERNEY-WANG 原理在此，不过记得设置 setTimeout

1099271 commented

@TitanCat 哈哈好的

jayxhj commented

这里 有应用宝的说明，申请 iOS 微下载生成对应的链接就可在页面或朋友圈直达 App Store 了。

heran commented

好像确实有白名单一说。我试了新浪微博、大众点评的代码，都不行。

derrick-branch commented

Still a problem :(

atuxe commented

还是做引导让用户在浏览器打开吧

airwin commented

微信内基本无解了，白名单挡住了

titanew commented

好无耻,, 就算为了安全, 也开放个申请渠道啊..

ihqn commented

直接使用App Store的下载地址做二微码，在威信里扫一扫是会直接跳转到App Store下载页的。

349989153 commented

白名单挡住是什么意思。。。
同样是安装链接,360的啥啥安装链接就可以跳转，itunes的官方链接跳转不了么
微信脾气怎么这么怪？

kitayoshi commented
  • 直接访问 iTunes 链接（包括直接点击链接、长按扫一扫、拍照扫码），即 webview 打开的第一个页面、没有 document.referrer 的话，都可以直接打开 iTunes 链接（并且唤起 App Store）
  • 跳转访问 iTunes 链接（包括 a[href] 和 location.href），即有 document.referrer 的话，除非是白名单下的域名（可以用 host、charles 等把 dianping.com 等指到自己的页面），否则都不能唤起 App Store。经由应用宝可以跳转，说明应用宝提供的微下载能力的链接域名在白名单内。

现在各大应用的实践都是走应用宝了，反正跳转是自动的，对转化率影响很小。

反倒是安卓下载，应用宝试图做出 Universal Link 的体验。但是大家显然不想走这条路，把流量白白给应用宝（转化率低、还不好区分渠道），直接下载 APK 如果不行的话（不知道现在情况怎么样），那么就各显神通了…

  • 👍2
yangbai1991 commented

新浪微博也是可以直接打开app的，他不是腾讯投资的吧。。。
@qingralf

yangbai1991 commented

用universal link 应该就可以了