1. 云栖社区>
  2. PHP教程>
  3. 正文

教你如何在微信浏览器唤醒APP

作者:用户 来源:互联网 时间:2017-11-30 10:41:24

app浏览器唤醒何在

教你如何在微信浏览器唤醒APP - 摘要: 本文讲的是教你如何在微信浏览器唤醒APP, 实现效果 如下图所示,在手机浏览器中访问南泥湾的手机版网站(wechat.nanniwan.com),顶部会有一个广告图,点击这个广告图,如果手机上已经安装了App,则直接打开,如果没有安装,则开始下载,如果在微信公众号中,则跳转应用宝

实现效果

如下图所示,在手机浏览器中访问南泥湾的手机版网站(wechat.nanniwan.com),顶部会有一个广告图,点击这个广告图,如果手机上已经安装了App,则直接打开,如果没有安装,则开始下载,如果在微信公众号中,则跳转应用宝第三方平台跳转。

教你如何在微信浏览器唤醒APP-

教你如何在微信浏览器唤醒APP-

教你如何在微信浏览器唤醒APP-

实现方式

1.为Android应用的启动Activity设置一个Schema,如下:

<data android:host="splash" android:scheme="cundong"/>
  • 1
  • 1

2.用户点击浏览器中的链接时,在动态创建一个不可见的iframe,并且让这个iframe去加载步骤1中的Schema,如下:

var ifr = document.createElement('iframe');ifr.src="cundong://splash"
  • 1
  • 2
  • 1
  • 2

3,如果在指定的时间内没有跳转成功,则当前页跳转到apk的下载地址(或下载页),如下:

window.location = download_url;

效果实现:

① HTML页面实现

<div class="open clean" id="appstore">    <i class="fl delete"></i>    <i class="repre fl"></i>    <p class="fr opena" id="J-call-app" href="javascript:void();">打开APP</p>    <input id="J-download-Adr" type="hidden" name="Adr" value="https://**nanniwan_Android.apk">    <input id="J-download-IOS" type="hidden" name="IOS" value="https://itunes.apple.com/**"></div>

方法一:

(function(){        var ua = navigator.userAgent.toLowerCase();        var t;        //config 配置文件 JS 传递 scheme  客户端进行匹配        //scheme_IOS IOS端必要参数        //scheme_Adr 安卓端必要参数        //download_url_Adr download_url_IOS 下载地址  timeout 过期时间        var config = {        //scheme:必须              scheme_IOS: 'demo://',            scheme_Adr: 'demo://start',            download_url_Adr: document.getElementById('J-download-Adr').value,            download_url_IOS: document.getElementById('J-download-IOS').value,            timeout: 600        };        function openclient() {            var startTime = Date.now();            // 用户点击时,在动态创建一个iframe,并且让这个iframe去加载config中的Schema            var ifr = document.createElement('iframe');            // 端口判断 安卓或IOS            ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;            ifr.style.display = 'none';            document.body.appendChild(ifr);            var t = setTimeout(function() {                var endTime = Date.now();                //指定的时间内没有跳转成功 当前页跳转到apk的下载地址                if ((endTime - startTime) < (config.timeout + 200)) {                    //判断是安卓 还是IOS                    if (/iphone|ipad|ipod/.test(ua)) {                        window.location.href = config.download_url_IOS;                    } else if (/android/.test(ua)) {                        window.location.href = config.download_url_Adr;                    }                } else {                    window.close();                }            }, config.timeout);            window.onblur = function() {                clearTimeout(t);            }        }        //点击事件  调用openclient方法        window.addEventListener("DOMContentLoaded", function(){            document.getElementById("J-call-app").addEventListener('click',openclient,true);        }, true);        window.addEventListener("DOMContentLoaded", function(){            document.getElementById("J-call-app-a").addEventListener('click',openclient,true);        }, true);    })();

方法二:

// 点击打开APP 微信端跳转应用宝$('#We-call-app').click(function(){    //判断iPhone|iPad|iPod|iOS    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {        window.location.href ="https://itunes.apple.com/cn/app/***";    } else if (/(Android)/i.test(navigator.userAgent)) {  //判断Android        window.location.href ="http://app.qq.com/#id=detail&appid=***";    } else {  // PC        window.location.href ="https://www.***.com";    }});

安卓实现:

教你如何在微信浏览器唤醒APP-

参考链接:http://blog.csdn.net/coslay/article/details/46889051


以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索app , 浏览器 , 唤醒 何在 ,以便于您获取更多的相关知识。

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

现在注册,免费体验40+云产品,及域名优惠!

云服务器9.9元/月,大学必备