js安装对应的app唤起native app || 没有安装App跳到App Store应用商店 后期实现

var ua = navigator.userAgent.toLowerCase();
 
1.判断是否是微信
 
function isWeixinBrowser() {
        return (/micromessenger/.test(ua)) ? true : false;
    }
 
 
2.判断是否是android
 
var isAndroid = ua.indexOf('android') > -1 || ua.indexOf('linux') > -1;
 
3.具体过程
 
scheme是客户端定义的url-scheme
 
$("a[href^='scheme://']").on('click',function(e){
        e.preventDefault();//阻止默认行为
        if(isWeixinBrowser()){
            $('.layer').show();//遮罩层(使用外部浏览器打开,此处样式自行设定)
        }else{
            if(isAndroid){
                //android
                $('body').append("<iframe src="" style='display:none' target='' ></iframe>");//target为空防止在当前页面刷新
                setTimeout(function(){window.location = 'http://www.510wifi.com/weixin_download_client.html'},600);
            }else{
                //ios
                window.location = 'scheme://openapp';
                setTimeout(function(){window.location = 'itms-apps://itunes.apple.com/app/id123456789'},25);
            }
        }
    })
 
附:判断手机端各种浏览器
 
if (ua.match(/WeiBo/i) == "weibo") {
                //在新浪微博客户端打开
        }
        if (ua.match(/QQ/i) == "qq") {
                //在QQ空间打开
        }
        if (browser.versions.ios) {
                //是否在IOS浏览器打开
        } 
        if(browser.versions.android){
                //是否在安卓浏览器打开
        }
 
var u = navigator.userAgent, app = navigator.appVersion;
trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部

JS判断手机端是否安装了某个客户端APP

虽然在Js中可以启动某个app,但是并不能判断该app是否安装;
但是,但是…还是有奇思淫巧滴,启动app需要的时间较长,js中断时间长,如果没安装,js瞬间就执行完毕。直接上代码吧!

一、

function testApp(url) {
    var timeout, t = 1000, hasApp = true;
    setTimeout(function () {
        if (hasApp) {
            alert('安装了app');
        } else {
            alert('未安装app');
        }
        document.body.removeChild(ifr);
    }, 2000)
  
    var t1 = Date.now();
    var ifr = document.createElement("iframe");
    ifr.setAttribute('src', url);
    ifr.setAttribute('style', 'display:none');
    document.body.appendChild(ifr);
    timeout = setTimeout(function () {
         var t2 = Date.now();
         if (!t1 || t2 - t1 < t + 100) {
             hasApp = false;
         }
    }, t);
}
  

二、

function isInstalled(){
    var the_href=$(".down_app").attr("href");//获得下载链接
    window.location="apps custom url schemes";//打开某手机上的某个app应用
    setTimeout(function(){
        window.location=the_href;//如果超时就跳转到app下载页
    },500);
}

apps custom url schemes是什么呢?
其实就是你与app约定的一个协议URL,在IOS客户端或者Android客户端中可以设置一个URL Scheme。例如,设置URL Scheme:app,然后其他的程序就可以通过“ URLString=app://”调用该应用。还可以传参数,如:app://reaction/?uid=1
以上介绍了怎么创建该本地协议及调用该本地协议的方法。但这里还有个关键就是怎么判断用户是否安装了该app呢?原理如下:
在手机浏览器中用js代码请求该协议,如果在500ms内,如果有应用程序能解析这个协议,那么就能打开该应用;如果超过500ms就跳转到app下载页。

三、代码

showPopup() {  
  		if(this.type){
  			if(this.$route.query){
//				console.log(this.$route.query);
  				var query_str = JSON.stringify(this.$route.query)
				// {"news_id":"144","scorce":"seo"}
				var query_str_a = query_str.replace(/:/g,"=")
				//{"news_id"="144","scorce"="seo"}
				var query_str_b = query_str_a.replace(/"/g, '')
				//{news_id=144,scorce=seo}
				var query_str_c = query_str_b.replace(/,/g, '&')
				//{news_id=144&scorce=seo}
				var query_str_d = query_str_c.match(/\{([^)]*)\}/)
				//news_id=144&scorce=seo
  			}
			if (navigator.userAgent.match(/(android|Android);?/i)) { 
			    window.location.href = "myappzo://main?" + query_str_d; /***打开app的协议,有安卓同事提供***/
				window.setTimeout(function(){
					window.open("https://www.pgyer.com/He9A"); 
				
			}else if(navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
				window.location.href = 'iOSZOZO://';
				window.setTimeout(function(){
					window.open("ios的應用商城");
			    },2000); 
			}
  		}else{
  			window.scroll(0, 0);
  		}
  		
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值