在手機瀏覽器中拉啟你的App

說起來有點凄涼，當我滿懷信心進入手機開發的時候，我覺得是手機web應用會像web在pc那樣火起來，誰知道我接到的第一個需求竟然能是在瀏覽器上推廣客戶端。甭管我們自己怎么覺得h6怎么怎么火，但是老大們的中心其實還是在app上。但是我們也不能自怨自艾，相信有一天我們一定會成為主流。 廢話少說吧，由于瀏覽器限制，我們是不可能直接訪問本地資源的，更別說去判斷用戶到底裝沒裝客戶端。只能通過其他方式。

準備

首先需要App進行Schema注冊，具體怎么弄，這里就不說了。好弄。

原理代碼

原理是當通過schema方式打開客戶端后，手機當前聚焦的視圖就不是瀏覽器了，瀏覽器就暫時不會執行setTimeout和setInterval方法

下面以騰訊微博為例

function redirect(){
  location.href="TencentWeibo://xxx";
  var t = Date.now();
  setTimeout(function(){
    // 之所以加個100 是因為settimeout不是那么準時
    if(Date.now()-t < 600){
      location.
    }
  },500)}

實際應用

如果直接應用上訴代碼，會發現在android和ios部分瀏覽器中，如果用戶未安裝app，會直接跳到報錯頁面。所以我采用iframe的方式。通過iframe方式啟動app

var loadIframe = null;function createIframe(){
  var iframe = document.createElement("iframe");
    iframe.style.cssText = "display:none;width:0px;height:0px;";
    document.body.appendChild(iframe);
    loadIframe = iframe;}function redirect(){
  loadIframe.src="TencentWeibo://xxx";
  var t = Date.now();
  setTimeout(function(){
    if(Date.now()-t < 600){
      location.
    }
  },500)}createIframe();

這種寫法在大部分瀏覽器中是沒問題的，不過還有以下問題：

• 1、在ios低版本的safari上會提示一個未找到頁面的提示，然后執行setTimeout方法。

• 2、在Android的chrome上沒效果

第一個bug暫時沒有解決，如果有同學碰到的話，告訴俺一下哈。產品追著我改這個bug呢 第二個需要去查看下chrome的資料,參考：(Android Intents with Chrome)

修改寫法如下：

/**
 * 移動瀏覽器上app下載
 * 
 */;var mobileAppInstall = (function(){var ua = navigator.userAgent,
        loadIframe,
        win = window;function getIntentIframe(){
    if(!loadIframe){
        var iframe = document.createElement("iframe");
        iframe.style.cssText = "display:none;width:0px;height:0px;";
        document.body.appendChild(iframe);
        loadIframe = iframe;
    }
    return loadIframe;}function getChromeIntent(url){// 根據自己的產品修改吧
    return  "intent://t.qq.com/#Intent;scheme="+url+";package=com.tencent.WBlog;end";}var appInstall = {
    isChrome:ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/),
    isAndroid:ua.match(/(Android);?[\s\/]+([\d.]+)?/),
    timeout:500,
    /**
     * 嘗試跳轉appurl,如果跳轉失敗，進入h6url
     * @param {Object} appurl 應用地址
     * @param {Object} h6url  http地址
     */
    open:function(appurl,h6url){
        var t = Date.now();
        appInstall.openApp(appurl);
        setTimeout(function(){
            if(Date.now() - t < appInstall.timeout+100){
                h6url && appInstall.openH5(h6url);
            }
        },appInstall.timeout)
    },
    openApp:function(appurl){
        if(appInstall.isChrome){
            if(appInstall.isAndroid){
                win.location.href = getChromeIntent(appurl);
            }else{
                win.location.href = appurl;
            }
        }else{
            getIntentIframe().src = appurl;
        }
    },
    openH5:function(h6url){
        win.location.href = h6url;
    }}return appInstall;})();

其他

safari

ios 6.0 以上app推薦

<meta name="apple-itunes-app" content="app-id=432274380">

微信中判斷是否安裝app

在微信中如果想通過Schema方式打開應用，貌似除騰訊以外的是不行了。

// 判斷是否安裝WeixinJSBridge.invoke("getInstallState", {packageName: "com.tencent.WBlog",packageUrl: "TencentWeibo://"}, function(e) {
    var n = e.err_msg;
    if(n.indexOf("get_install_state:yes") > -1){
      alert("已經安裝");
    } })// 安裝WeixinJSBridge.invoke("addDownloadTask", {task_name: "騰訊微博",task_url: "http://softfile.3g.qq.com/msoft/180/2104/2104/WBlog_4.2.1_100000024_131210163458a.apk",file_md5: "31C49560B20057ECBB4C7C52D35B00DB"}, function(t) {})