本文介紹從web頁面開啟iOS app的方法

從web頁面開啟app是一個常見場景，大致上有2種做法

利用Safari原生Banner

只需要在html中加入一段meta，即可在Safari中顯示一個Banner。如果未安裝此app，會跳轉到app store的下載頁面，否則會直接開啟應用

效果圖：

html程式碼如下：

<meta name='apple-itunes-app' content='app-id=你的應用的app-id'>

另外我在簡書的網站上，看到程式碼是這樣寫的：

<meta name="apple-itunes-app"
 
 content="app-id=888237539, app-argument=jianshu://notes/2283513">

特別的地方在於，多了一個app-argument引數，可能可以傳遞到app的這個方法裡進行處理：

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options

使用自定義連結

第一種方法的好處是方便，但是缺點是樣式是固定的，不能自定義，所以更好的辦法是採用自定義連結。程式碼如下：

<a
 
 href="https://itunes.apple.com/cn/app/id995195037" id="openApp">開啟應用</a>

<script type="text/javascript">

    document.getElementById('openApp').onclick = function(e){

    // 通過iframe的方式嘗試開啟APP，如果能正常開啟，會直接切換到APP，並自動阻止a標籤的預設行為
    // 否則開啟a標籤的href連結
    var ifr = document.createElement('iframe');
    ifr.src = 'com.yilos.nailstar://topic/abcdefg'
 
;
    ifr.style.display = 'none';
    document.body.appendChild(ifr);

    window.setTimeout(function(){
        document.body.removeChild(ifr);
    },3000)
};
</script>

本質上是發起了一個請求：

com.yilos.nailstar://topic/abcdefg

這個請求會在iOS系統中查詢對應的url schema，然後開啟此應用，同樣會進入以下方法：

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options

所以有機會對自定義的引數進行處理

比較巧妙的地方在於，開啟app的行為，會阻止a連結的預設跳轉行為；而如果開啟失敗，則會進入app store的下載頁面

簡書的程式碼是利用同樣的原理：

if (/iphone|ipad|ipod/.test(ua)) {

    // in iOS
    if (ua.match(/MicroMessenger/i) || ua.match(/weibo/i)){

        Maleskine.showWeixinHelp();

    }else if (ua.match(/MQQBrowser/i) || ua.match(/QQ/i)) {

        Maleskine.showQQHelp();

    } else {

        window.location = "jianshu://p/12345678";
        window.setTimeout(function() {
            window.location = "https://itunes.apple.com/cn/app/jian-shu/id888237539?ls=1&mt=8";
        }, 400);
    }
}

也是先嚐試開啟app，如果開啟失敗，就跳轉到app store下載頁面

微信的相容性問題

微信做了特殊處理，在微信中開啟的web頁，既不能跳轉到app，也不能跳轉到app store

所以一般的做法是提示使用者在Safari中開啟