今天早上剛到公司，就收到反饋說公司前端頁面的下載按鈕在 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"; } } }
|
