zoukankan      html  css  js  c++  java
  • 在web浏览器中判断app是否安装并直接打开

    最近公司App产品在运营推广上有一个需求,就是要求可以让用户在访问我们的推广网页时,就可以判断出这个用户手机上是否安装了我们的App,如果安装了则可以直接在网页上打开,否则就引导用户前往下载。从而形成一个推广上的闭环。

    在iOS上,其实只需要在<head>标签内增加一个<meta>标签,系统就会自动帮你在顶部生成一个Banner,而且会智能引导用户操作(如果未安装就跳转AppStore,否则直接打开)。格式如:<meta name='apple-itunes-app' content='app-id=你的APP-ID'>。比如加一个百度贴吧的Native APP大Banner,用下面这串儿代码:

    <meta name='apple-itunes-app' content='app-id=477927812'>

    但是上面的方法仅限于iOS设备,且无法定义Banner的形式。另外打开应用时也无法告诉App端要做什么操作。(因为后来运营有提出了新的需求,比如在推广网页上打开的App就直接进行某项操作。)

    那么,我们可以通过另外一种协议的方式来达到上述要求的效果,即:

    1.可以在web页面中直接打开App。

    2.打开App的同时可以进行传值操作,告诉移动端程序应该做什么。

    前提:知道你的App对应的打开协议。例如百度贴吧的协议为:com.baidu.tieba://,微信的协议为:weixin://,等等。

    方法一:

    function runApp(rid) {
                var state = null;
                try {
                    state = window.open("myapp://jest.app/openwith?id=" + rid, '_self');
                } catch (e) {
                    alert("发生未知错误:" + state + ",请联系运营商.");
                }
    }

    方法一直接利用window.open的方式来打开应用,rid是要告诉移动端的值,这里只写了一个,大家可以根据实际情况来定义自己的参数。打开方式这里定义为_self,是因为如果是_blank的话,会重新打开一个选项卡, 不是很友好。 另外这个方法对于Andriod设备的兼容性不是很好, 不建议在Andriod设备上执行此方法。

    方法二:

    function runApp2(rid) {
                var ifrSrc = "myapp://jest.app/openwith?id=" + rid;
    
                var ifr = document.createElement('iframe');
                ifr.src = ifrSrc;
                ifr.style.display = 'none';
                document.body.appendChild(ifr);
                // 点击后延时触发清除iframe,并跳转页面
                setTimeout(function () {
                    document.body.removeChild(ifr);
                }, 200);
    }

    方法二是利用iframe的方式来进行打开,同样rid是要传递的参数。这个方法我测试了一些Andriod设备,感觉还是比较好的。 但是iOS体验较差, 建议大家自己根据实际情况,结合使用。

    最后说下关于没有安装App时的处理方法。基本上网上大家搜的打开方式都是通过协议的方式, 那么如果用户在触发打开条件后, 一定时间内没有打开应用,我们就可以确定该用户是没有安装对应的App。 那么我们可以通过延时函数来进行后续的引导操作。

  • 相关阅读:
    MVC(一)
    C# 泛型(二)
    C# 泛型(一)
    ASP.NET MVC Razor
    ASP.NET 服务端接收Multipart/form-data文件
    centos(网易163)软件源更换
    xshell中文乱码问题
    centos7修改主机名
    sqlalchemy python中的mysql数据库神器
    mysql 更新与查询(排序 分组 链接查询)
  • 原文地址:https://www.cnblogs.com/jiyang2008/p/5772888.html
Copyright © 2011-2022 走看看