H5W3
当前位置:H5W3 > HTML5 > 正文

html网页中直接通过js打开APP方法

现在有很多分享出来的网页连接可以直接打开APP,产品经理也要求我们这样做,那么这是怎么实现的呢?

下面是我实现的一种简单的方式,不是很完善,希望能帮到你。

Demo体验地址:https://www.12sporting.com/dlweb/share/indoor/954.html

下面的例子,如果您感兴趣,可以下载“多锐运动”来在手机上体验,建议使用安卓设备

//这里是事件开始,我的例子中使用的是touch.js方法,你可以把它改成js原生的点击事件触发
//因为无法获取到是否打开app成功,所有尝试去打开app之后都会去提示下载app

touch.on('#open-btn', 'tap', function(ev) {
		var ifr = document.createElement('iframe');
		ifr.style.display = 'none';
		if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//iOS系统设备
			ifr.src = "com.hnjc.dl://";//这里是iOS客户端自己定义的协议,通过这个可以打开app,注意必须跟双斜杠或单斜杠
			document.body.appendChild(ifr);
			setTimeout(function() {
				document.body.removeChild(ifr);
				window.location.href = "https://itunes.apple.com/cn/app/duo-rui-yun-dong/id958061289";
			}, 2000)
			return;
		} else if(navigator.userAgent.match(/android/i)) {//安卓系统设备
			ifr.src = 'com.hnjc.dl://';
			document.body.appendChild(ifr);
			window.setTimeout(function() {
				document.body.removeChild(ifr);
				if(isWeiXin() || is_QQInnerBro()) {//如果是微信或者QQ,还是调用应用宝的下载链接吧,否则微信不能直接下载,QQ可能会提示网址有风险
					window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.hnjc.dl";
					return;
				}
				window.location.href = "//d1.12sporting.com/apk/hnjc_dl-JianCheng-release.apk";
			}, 2000);
		}
});
//判断是否是微信中打开
function isWeiXin() {
		var ua = window.navigator.userAgent.toLowerCase();
		if(ua.match(/MicroMessenger/i) == 'micromessenger') {
			return true;
		} else {
			return false;
		}
	}
//判断是否是在qq浏览器打开
function is_QQInnerBro() {
	if(navigator.userAgent.indexOf('MQQBrowser') !== -1) {
		return true;
	} else {
		return false;
	}
};

上述例子并不是很完善,思路大致是这样的:通过协议去打开App,同时跳转到下载页面。

如果是在微信中,你也可以通过微信sdk直接调用打开app。

本文地址:H5W3 » html网页中直接通过js打开APP方法

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址