通过手机浏览器打开APP或者跳转到下载页面.md
2017-10-10 16:59
806 查看
通过手机浏览器打开APP或者跳转到下载页面
[TOC]以下仅展示最简单的例子及关键代码
由于硬件条件有限,仅测试了 Android 下的情况
IOS 的自行参考链接
添加 schemes
在 HBuilder 创建的移动 APP 项目下有 manifest.json 文件,在里面添加 schemes,schemes 中的值你喜欢设置成什么就什么吧。网页设置
这个时候,你需要一个简单 web 系统,能提供一个简单的 web 页面供手机浏览器访问。这个做过 Java 的人都懂,不详说了。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8" /> <title>文档标题</title> </head> <body> <div style="font-size: 68px;"> <a href="javascript:open_or_download_app();">打开APP</a> <span id="device"></span> </div> <script type="text/javascript"> //<![CDATA[ function open_or_download_app() { var device = document.getElementById("device"); if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { device.innerHTML = "ios设备"; // 判断useragent,当前设备为ios设备 var loadDateTime = new Date(); // 设置时间阈值,在规定时间里面没有打开对应App的话,直接去App store进行下载。 window.setTimeout(function() { var timeOutDateTime = new Date(); if (timeOutDateTime - loadDateTime <2200) { window.location = "xxxxxxxx"; // APP下载地址 } else { window.close(); } },2000); window.location = "apptest://apptest"; //ios端URL Schema } else if (navigator.userAgent.match(/android/i)) { device.innerHTML = "Android设备"; // 判断useragent,当前设备为Android设备 // 判断useragent,当前设备为ios设备 var loadDateTime = new Date(); // 设置时间阈值,在规定时间里面没有打开对应App的话,直接去App store进行下载。 window.setTimeout(function() { var timeOutDateTime = new Date(); if (timeOutDateTime - loadDateTime < 2200) { window.location = "xxxxxxxx"; // APP下载地址 } else { window.close(); } },2000); window.location = "apptest://apptest"; // Android端URL Schema } } //]]> </script> </body> </html>
Android 的 URL Schema 写成 “你设置的Schema://你设置的Schema” 即可访问。IOS 的和这个不同。URL Schema 的详解自行百度,你会有更深的理解。
根据参考,即使在后台打开了 APP,JS 仍会执行一段时间,大概是 600 - 1000 毫秒,所以至少也要设置定时调度大于 1 秒,这样比较有保证。
window.setTimeout(function() { },2000); // 需要设置大一点,才有效果,否则会始终执行
接下来就可以打包 APP 安装到手机上进行测试,也可以删掉 APP,对比两次的结果。
IOS 的有条件再补上
参考链接
Android平台通过UrlSchemes与第三方应用相互调用:http://ask.dcloud.net.cn/article/409给你的移动网站加点料:推荐下载App,如果本地安装则直接打开本地App(Android/IOS):http://www.cnblogs.com/iamjiuye/p/3362978.html
又到周末了,我们一起来研究【浏览器如何检测是否安装app】吧:http://www.cnblogs.com/yexiaochai/p/3439179.html
相关文章推荐
- 通过手机浏览器打开APP或者跳转到下载页面.md
- iOS通过链接,应用内打开APP或者跳转APPStore对应下载
- 【JavaScript】通过JavaScript的方式,如果手机浏览器访问PC版页面,自动跳转到手机版页面
- 通过一个链接打开本地app,或者去下载app
- 通过js判断打开页面的手机浏览器类型
- html5页面中打开本地app,如果没有跳转下载页面的解决方案
- 根据USER-AGENT判断手机类型并跳转到相应的app下载页面
- 移动端浏览器打开app或者跳转链接
- 通过URL协议实现从Safari等浏览器中跳转打开你的app
- 通过一个链接打开本地app,或者去下载app
- JSP中实现判断客户端手机类型并跳转到app下载页面
- 判断客户端手机类型,并跳转到相应的app下载页面
- 在线安装ipa ,跨过app-store / JSP中实现判断客户端手机类型并跳转到app下载页面
- php页面判断是 iphone还是andriod的浏览器&通过 URL types在浏览器打开app
- 基于应用宝实现微信h5页面中打开本地app,如果没有跳转下载页面的解决方案
- 微信公众号H5页面跳转至app的某个页面,如果手机内没有app,则进入下载页面
- HTML5打开本地app应用的方法,如果你的手机上安装App,就会自动打app,否则在页面上会提示你进行下载app
- 通过JS判断是哪个手机APP打开的该页面
- php页面判断是 iphone还是andriod的浏览器&通过 URL types在浏览器打开app
- 【JS】点击页面判断是否安装app并打开,否则跳转下载的方法