js如何判断用户是否是用微信浏览器

2024-09-28 00:19:21

上周接到个需求，需求是这样的：用户扫一扫二维码会产生一个链接，该链接会向后端发送个请求，返回一个 apk 的下载地址，用户点击下载按钮可以下载此 apk。然后就发生了问题，经过测试，发现用微信扫一扫打开的页面点击下载按钮下载不了 apk，后百度之，原来是微信内置浏览器屏蔽了下载链接，后面和需求方沟通，需求改为如果用户是用微信内置浏览器打开的，则提示用户换一个浏览器打开页面，否则下载不了 apk。那么该如何判断用户是否是用微信浏览器呢？

我们知道 js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息，比如：Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36，那么我们也可以通过该方法来获取微信内置浏览器的相关信息：Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11d201 MicroMessenger/5.3。根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。判断函数如下：

代码如下:

function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}

demo：

代码如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>判断是否是微信内置浏览器</title>
</head>
<body>
<h1>如果用微信浏览器打开可以看到下面的文字</h1>
<p></p>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
if(isWeiXin()){
var p = document.getElementsByTagName('p');
p[0].innerHTML = window.navigator.userAgent;
}
}
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
</script>

说明：可以将上面的 demo 放到服务器上，然后生成个二维码扫一扫。

js实现通用的微信分享组件示例

一.可定义的信息 1.分享时显示的LOGO:2.分享LOGO的宽度:3.分享LOGO的高度:4.分享出去显示的标题(默认调用网页标题):5.分享出去显示的描述(默认调用网页标题):6.分享链接(默认为当前页面的URL).7.分享微信的APPID(一般为空). 二.使用方法1.引入微信分享组件js: 复制代码代码如下: /******************************* * Author:Mr.Think * Description:微信分享通用代码 * 使用方法:_WXShare
Javascript限制网页只能在微信内置浏览器中访问

那么问题就来了,这个网页首先涉及到了移动web前端开发,我优先选择了用HTML5+bootstrap组合来实现页面的美观效果,前端其他的任务交给javascript解决(这里我是完全使用原生javascript代码,没有用到任何的框架,因为考虑到手机加载网页的速度本来就慢,而且框架中很多用不到的功能也会随网页一起加载,耗费用户流量). 一切功能都就绪以后,客户试用也觉得很满意,之后我就把代码提交到了正式的服务器上.不过,对方又突然提到了一点:你做的页面确实挺漂亮的,兼容性也不错,但是这个页面用电
微信JS接口汇总及使用详解

基本说明使用说明 1.引入JS文件在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js 备注:支持使用 AMD/CMD 标准模块加载方法加载 2.注入配置config接口所有需要使用JSSDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用). 复制代码代码如下: wx.config({ debug:
微信JSSDK上传图片

前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用.先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给uploadImage接口上传图片. 最近做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发者文档链接:微信开发者文档主要用到了: 引入JS文件在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq
javascript实现修改微信分享的标题内容等

代码超级简单,这里就不多废话了,小伙伴们自己看注释吧, 奉上代码: 复制代码代码如下: <script> //微信分享 var wimg = "分享图片网址123"; var wurl = "分享网址123"; var wdesc = '分享内容123'; var wtit = '分享标题123'; var wappid = ''; function shareMsg() {//<span style="font-family: A
javascript html5摇一摇功能的实现

通过网上的资料,加上自己的整理,写了一份html摇一摇功能的简介,用做技术备份. 知识要点 1.DeviceMotionEvent 这是html5支持的重力感应事件,关于文档请看:http://w3c.github.io/deviceorientation/spec-source-orientation.html 事件介绍: deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角. devicemotion 提供设备的加速信息,表示为定义在设备上的坐标系
JS实现微信摇一摇原理解析

本文为大家分享了JS实现微信摇一摇的原理,供大家参考,具体内容如下实现原理: 1.微信摇一摇事件需要有硬件支撑,必须要求手机中有陀螺仪 2.在JS中给window添加ondevectionmotion事件.该事件在手机晃动,即手机中的陀螺仪发生旋转,该事件会触发 3.触发ondevectionmotion事件,会产生一个事件对象,通过该对象中的键值(accelerationIncludingGravity)来获得该重力加速器对象 4.重力加速器对象中含有陀螺仪的坐标,通过重力加速器对象.x -
微信WeixinJSBridge API使用实例

注意:请在微信中测试 <!DOCTYPE html> <html> <head> <title>微信WeixinJSBridge API</title> <meta charset="utf-8" /> <script type="text/javascript"> (function(){ var a=document.getElementsByTagName("html
js实现微信分享代码

通常自己做的一个页面想通过微信像朋友分享时,展示的标题和描述都是不是自己想要的,自己查了一些资料,原来是通过js来进行控制展示效果如下: 标题.描述.还有分享的图片都是有js来控制的. js代码如下 <script> var dataForWeixin = { appId: "", MsgImg: "Christmas/201012189457639.gif",//显示图片 TLImg: "Christmas/201012189457639.
使用Nodejs开发微信公众号后台服务实例

摘要: 微信,庞大的用户基数,极强的用户粘性,在近两年吸引了无数的开发者注意力. Nodejs,近两年发展非常快的开发工具,尤其适合构建移动后台.本文就以笔者自己开发的实例,来描述如何基于Nodejs开发属于自己的微信公众号.在这个实例中,主要使用到了express, wechat, mongodb, monk等模块. 前期准备: 1.申请微信公众号,前往 https://mp.weixin.qq.com/ 申请,这里不做过多阐述. 2. 购买服务器, 这里推荐Amazon的EC2,首次用户可

js如何判断用户是否是用微信浏览器

相关推荐

随机推荐