通过手机浏览器打开APP或者跳转到下载页面.md
2017-10-10 17:02
656 查看
通过手机浏览器打开APP或者跳转到下载页面
通过手机浏览器打开APP或者跳转到下载页面添加 schemes
网页设置
参考链接
以下仅展示最简单的例子及关键代码
由于硬件条件有限,仅测试了 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对应下载
- 在手机的浏览器上通过连接打开App
- 通过js判断打开页面的手机浏览器类型
- 人脉通分享工能,点击分享到微信或者qq的分享链接打开H5,提示用户用浏览器打开,点击下载,有有app
- JSP中实现判断客户端手机类型并跳转到app下载页面
- Android通过浏览器打开app页面并且传递值
- php页面判断是 iphone还是andriod的浏览器&通过 URL types在浏览器打开app
- 移动端浏览器打开app或者跳转链接
- 在线安装ipa ,跨过app-store / JSP中实现判断客户端手机类型并跳转到app下载页面
- 推断client手机类型,并跳转到对应的app下载页面
- 下载APP安装的时候提升未安装,或者下下载成功没有打开页面
- 基于应用宝实现微信h5页面中打开本地app,如果没有跳转下载页面的解决方案
- 微信浏览器内打开App Store链接,并跳转到对应的app页面
- php页面判断是 iphone还是andriod的浏览器&通过 URL types在浏览器打开app
- 根据USER-AGENT判断手机类型并跳转到相应的app下载页面
- 通过URL协议实现从Safari等浏览器中跳转打开你的app
- 通过 URL 协议实现从 Safari 等浏览器中跳转打开你的 app
- 判断客户端手机类型,并跳转到相应的app下载页面
- HTML5打开本地app应用的方法,如果你的手机上安装App,就会自动打app,否则在页面上会提示你进行下载app