微信跳转浏览器来下载不同系统的app
2016-08-30 17:20
411 查看
在微信里面,是不能通过应用宝以外的方式去直接下载app的,但是却可以通过跳转到浏览器去下载app,因此如果刚好各位公司有刚刚上线的app,来不及放到微信应用宝那里,可以试试这种办法。
实现思路:
1.在页面加载的时候去判断是否在微信浏览器里面,如果是就弹出模态框图片提示用户跳去浏览器下载
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象 if (ua.match(/MicroMessenger/i) == "micromessenger") { // 弹出模态框提示用户 document.getElementById('download-modal').style.visibility = "visible"; }
效果图:
图片参考:https://github.com/kujian/weixinTip?utm_source=caibaojian.com
2.判断是否哪种系统(android,ios)
// 判断系统客户端 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if(isAndroid == true){ // alert('Android!'); window.location = 'android.apk'; } else { if(isiOS == true){ // alert('ios!'); window.location = 'https://itunes.apple.com/'; }else{ alert('请在手机端打开'); } }
其实都是东拼西凑的代码...最后附上代码
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript"> function down(){ // 判断是否微信浏览器 var ua = navigator.userAgent.toLowerCase();//获取判断用的对象 if (ua.match(/MicroMessenger/i) == "micromessenger") { // 弹出模态框提示用户 document.getElementById('download-modal').style.visibility = "visible"; }else{ // 判断系统客户端 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if(isAndroid == true){ // alert('Android!'); window.location = 'litme.apk'; } else { if(isiOS == true){ // alert('ios!'); window.location = 'https://itunes.apple.com/'; }else{ alert('请在手机端打开'); } } } } function closeModal(){ var modal = document.getElementById('download-modal'); modal.style.visibility = "hidden"; } </script> <style type="text/css"> .download-modal{ visibility: hidden; width: 100%; height: 100%; opacity: 0.5; position: absolute; text-align: center; background-color:rgb(30,30,30); top: 0; left: 0; z-index: 9999; } .download-modal-mess{ } #jump-to-browser{ width: 90%; } </style> </head> <body onload="down()"> <div id="download-modal" class="download-modal" onclick="closeModal()"> <div class="download-modal-mess"> <!-- 提示跳转用户的图片 --> <img src="./img/live_weixin.png" id="jump-to-browser"> </div> </div> </body> </html>
相关文章推荐
- 在浏览器里判断设备来源,跳转到不同的App下载页JS
- a标签写链接地址跳转到下载企业微信app页面
- 求助,微信浏览器如何跳转百度地图APP和高德地图APP
- 通过手机浏览器打开APP或者跳转到下载页面.md
- 浏览器网页打开微信app跳转网站只需三步获取ticket接口api
- 微信扫描打开app下载提示用户打开浏览器进行下载
- 微信浏览器禁止app下载链接怎么办
- 基于应用宝实现微信h5页面中打开本地app,如果没有跳转下载页面的解决方案
- JS判断是否是微信页面,判断手机操作系统(ios或android)并跳转到不同下载页面
- 从微信跳转到appstore下载App
- 微信生成ticket带参数的二维码接口api浏览器跳转app指定网址
- JS判断是否是微信页面,判断手机操作系统(ios或android)并跳转到不同下载页面
- js解决微信屏蔽内置浏览器的下载功能以及判断手机系统
- 阻止 android webview 中的链接跳出APP(即跳转到系统浏览器)
- web前端工程师在移动互联网时代里的地位问题 为啥C/S系统在PC端没有流行起来,却在移动互联网下流行了起来 为啥移动端的浏览器在很多应用里都是靠边站,人们更加倾向于先麻烦自己一下,下载安装个客户端APP
- JS判断是否是微信页面,判断手机操作系统(ios或android)并跳转到不同下载页面
- 微信浏览器打开 点击下载app 无需提示使用浏览器打开--代码分享
- 从微信跳转到appstore下载App
- 浏览器网页网址唤起微信app跳转到指定任意页面二维码识别方法ticket生成研究
- 扫描二维码下载app,判断是Android还是ios,并跳转到不同的下载地址