w3ctech

在手机浏览器启动你的app

说起来有点凄凉,当我满怀信心进入手机开发的时候,我觉得是手机web应用会像web在pc那样火起来,谁知道我接到的第一个需求竟然能是在浏览器上推广客户端。甭管我们自己怎么觉得h5怎么怎么火,但是老大们的中心其实还是在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.href="http://t.qq.com"
    }
  },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.href="http://t.qq.com"
    }
  },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,如果跳转失败,进入h5url
     * @param {Object} appurl 应用地址
     * @param {Object} h5url  http地址
     */
    open:function(appurl,h5url){
        var t = Date.now();
        appInstall.openApp(appurl);
        setTimeout(function(){
            if(Date.now() - t < appInstall.timeout+100){
                h5url && appInstall.openH5(h5url);
            }
        },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(h5url){
        win.location.href = h5url;
    }
}

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

})
w3ctech微信

扫码关注w3ctech微信公众号

共收到10条回复

  • 你好,我们可以交流一下吗,我目前遇到这个问题,看到你的帖子之后,需要请教你几个问题,可以方便联系,1627951582扣扣

    回复此楼
  • 问下大神,怎么在网页中通过超链接的方式打开微信呢?

    回复此楼
  • 请问大神: 最后修改的那个怎么调用?

    回复此楼
  • 求教大神,我也遇到这个问题,但我不懂app,现在要在手机浏览器启动我的微信内置浏览器,并且让它访问一条指定的链接。希望大神赐教,十分感谢!

    回复此楼
  • @小加 大神,你现在的问题解决掉了吗?

    回复此楼
  • Date.now() - t < appInstall.timeout+100 ,为什么有的浏览器,即执行appInstall.openApp又执行 appInstall.openH5,比如安卓的uc浏览器

    回复此楼
  • 是不是通过QQ浏览器也不行呢?

    回复此楼
  • 运行不起来啊

    回复此楼
  • 极乐网观光团来了! 个人专为IT技术人员搭建的问答平台——欢迎前来拍砖。 [嘻嘻] http://www.dreawer.com/home.html

    目前最火的领域是前端领域,欢迎一起交流!

    回复此楼
  • 回复此楼