微信扫描下载提示以及js判断用户手机系统

今天抽空也写一下这个教程吧，这里面涉及到就是一个APP的页面下载。公司有这个需求，让做一个页面，就是二维码扫描下载。一开始我做的版本是只能是通过浏览器来下载的，但是实际应用中，很多用户，只知道微信有个扫一扫，但是微信扫一扫也很抠门，扫到了网址，他不会自动打开浏览器来浏览，而是通过他自身的浏览器来浏览，但是他自身的浏览器又不能自动下载或者跳转一些操作，所以，用户体验非常不友好。后来网上找了一些相关的文章，在： http://caibaojian.com/weixin-tip.html 发现了这个提示插件，我综合整理了一下代码，目前应用情况是：

1、通过UC等浏览器扫描二维码浏览时，会根据获取到的用户手机系统（Android或者IOS）来跳转或者下载不同的文件；

2、如果是通过微信扫一扫，将会打开下面这个图片的样式，然后再根据提示打开浏览器，完成相应的操作。

效果图和代码如下，图片见附件：

浏览地址（你们可以打开这个网址，扫描上面的二维码来体验一下）： http://www.yadacloud.com/login.html

上面这个网址，通过jQuery的二维码插件，转换成下面这个二维码：

扫描这个二维码就会发生下面的事情了。

效果图：

<!DOCTYPE html>

<html>

<head>

<title>云平台APP下载</title>

window.onload = function() {

var u = navigator.userAgent;

if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机

// alert("安卓手机");

window.location.href = "http://www.yadacloud.com/app/cloud.apk";

} else if (u.indexOf('iPhone') > -1) { //苹果手机

// alert("苹果手机");

window.location.href = "https://itunes.apple.com/us/app/ya-da-yun/id1072053485?l=zh&ls=1&mt=8";

} else if (u.indexOf('Windows Phone') > -1) { //winphone手机

alert("WindowsPhone暂未推出。");

// window.location.href = "mobile/index.html";

} else if (u.indexOf('Windows NT') > -1) { //Windows电脑

alert("请用手机浏览器访问。");

// window.location.href = "https://itunes.apple.com/us/app/ya-da-yun/id1072053485?l=zh&ls=1&mt=8";

}

// var vU=JSON.stringify(u);

// alert(vU);

}

$(window).on("load", function() {

var winHeight = $(window).height();

function is_weixin() {

var ua = navigator.userAgent.toLowerCase();

if (ua.match(/MicroMessenger/i) == "micromessenger") {

return true;

} else {

return false;

}

var isWeixin = is_weixin();

if (isWeixin) {

$(".weixin-tip").css("height", winHeight);

$(".weixin-tip").show();

}

})

</script>

* {

margin: 0;

padding: 0;

}

a {

text-decoration: none;

}

img {

max-width: 100%;

height: auto;

}

.weixin-tip {

display: none;

position: fixed;

left: 0;

top: 0;

bottom: 0;

background: rgba(0, 0, 0, 0.8);

filter: alpha(opacity=80);

height: 100%;

width: 100%;

z-index: 100;

}

.weixin-tip p {

text-align: center;

margin-top: 10%;

padding: 0 5%;

}

</style>

</head>

<body>

<p>

</p>

</div>

</body>

</html>

好了，本次教程到此结束，转载请保留原作者地址以及姓名；

我新建一个QQ群，如果有问题，可以在群里提。如果合适，也会根据大家提的比较多的问题，来写篇博文，帮助更多的人，群号：275523437

点击链接加入群【.Net,MVC,EasyUI,MUI,Html,JS】： http://jq.qq.com/?_wv=1027&k=2A0RbLd

（如果有私活，或者一起合作的，也可以私信找我呀，嘿嘿）；

作者：南宫萧尘

E-mail：314791147@qq.com

日期：2016-04-03

附件列表

live_weixin.png

转载于:https://www.cnblogs.com/nangong/p/31f1d79be8b6e91c2f20a51dde8ba271.html

微信扫描下载提示以及js判断用户手机系统相关推荐

Android 微信支付判断用户手机是否安装微信客户端
微信支付不像支付宝支付那样. 对于支付宝支付,当我们的APP程序开始调用支付宝SDK去支付的时候,它会自动去判断你手机是否已经安装了支付宝客户端,有的话直接调起客户端进行支付:没有的话,会调用sdk自 ...
php判断pad访问,JS判断是否手机或pad访问实现方法
摘要:这篇文章主要介绍了JS判断是否手机或pad访问实现方法的相关资料.JS判断是否手机或pad访问实现方法 S判断是否手机或pad访问方面的内容,对于利用JS判断是否手机 ...
bitmap xml大小安卓_一张壁纸让安卓用户手机系统崩溃，包括三星、小米、一加等...
最近关于手机系统崩溃和APP崩溃的事件挺多的,关于像豆瓣.爱奇艺.小红书等手机APP相继崩溃的事件,还好解释,但近日很多网友爆料称,在使用安卓手机时,无意间设置了一张壁纸,导致手机系统崩溃. 一张壁纸 ...
h5获取android手机版本,Vue.js怎么获取手机系统型号、版本、浏览器类型
Vue.js怎么获取手机系统型号.版本.浏览器类型发布时间:2020-07-28 11:22:33 来源:亿速云阅读:161 作者:小猪这篇文章主要为大家展示了Vue.js怎么获取手机系统型号. ...
安卓开机画面_一张壁纸让安卓用户手机系统崩溃，包括三星、小米、一加等
最近关于手机系统崩溃和APP崩溃的事件挺多的,关于像豆瓣.爱奇艺.小红书等手机APP相继崩溃的事件,还好解释,但近日很多网友爆料称,在使用安卓手机时,无意间设置了一张壁纸,导致手机系统崩溃. 一张壁纸 ...
登录注册页面，JS判断用户手机号码是否已经存在，或者格式不正确
现在的网站使用手机号码注册的越来越多,这就涉及到要在登录注册页面,判断用户手机号码是否已经存在,或者格式不正确,最近的系统里面正好遇到了,已经实现成功,在这里记录一下如果电话号码已经存在,页面: 如 ...
【苹果微信图片下载提示保存成功但相册中找不到图片】
目录苹果微信图片下载保存失败发现问题尝试解决方法方法一(未成功) 方法二(成功) 苹果微信图片下载保存失败发现问题题主应用的苹果13,在查看微信图片时发现,点击右下角的下载图标对图片进行 ...
js判断用户是否离开当前页面
简介 VisibilityChange 事件:用于判断用户是否离开当前页面 Code // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidde ...
js判断是手机访问还是电脑访问
JS判断请求来自Android手机还是iPhone手机,根据不同的手机跳转到不同的链接. <script type="text/javascript"> var bro ...

微信扫描下载提示以及js判断用户手机系统

附件列表

微信扫描下载提示以及js判断用户手机系统相关推荐

最新文章

热门文章