微信打开网址添加在浏览器中打开提示-前端开发博客
152,943Views
8,799Views
8,018Views
6,962Views
6,755Views
4,921Viewsjs如何判断用户是否是用微信浏览器
字体：[ ] 类型：转载 时间：
微信内置浏览器屏蔽了下载链接，如果用户是用微信内置浏览器打开的，则提示用户换一个浏览器打开页面，那么该如何判断用户是否是用微信浏览器呢
上周接到个需求，需求是这样的：用户扫一扫二维码会产生一个链接，该链接会向后端发送个请求，返回一个 apk 的下载地址，用户点击下载按钮可以下载此 apk。然后就发生了问题，经过测试，发现用微信扫一扫打开的页面点击下载按钮下载不了 apk，后百度之，原来是微信内置浏览器屏蔽了下载链接，后面和需求方沟通，需求改为如果用户是用微信内置浏览器打开的，则提示用户换一个浏览器打开页面，否则下载不了 apk。那么该如何判断用户是否是用微信浏览器呢？ 我们知道 js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息，比如：Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0. Safari/537.36，那么我们也可以通过该方法来获取微信内置浏览器的相关信息：Mozilla/5.0 (iP 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'){
代码如下: &!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.userA } } function isWeiXin(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){
} } &/script&
说明：可以将上面的 demo 放到服务器上，然后生成个二维码扫一扫。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具微信开发-微信内置浏览器的Javascript API
* 微信内置的script API，功能包括：
* 1、分享到微信朋友圈
* 2、分享给微信好友
* 3、分享到腾讯微博
* 4、隐藏/显示右上角的菜单入口
* 5、隐藏/显示底部浏览器工具栏
* 6、获取当前的网络状态
* 7、调起微信客户端的图片播放组件
* 8、关闭公众平台Web页面
* 9、判断当前网页是否在微信内置浏览器中打开
* 10、支持WeixinApi的错误监控
* 11、发送电子邮件
* 12、禁止用户分享
(function (window) {
&use strict&;
* 定义WeixinApi
var WeixinApi = {
version: 4.3
// 将WeixinApi暴露到window下：全局可使用，对旧版本向下兼容
window.WeixinApi = WeixinA
/////////////////////////// CommonJS /////////////////////////////////
if (typeof define === 'function' && (define.amd || define.cmd)) {
if (define.amd) {
// AMD 规范，for：requirejs
define(function () {
return WeixinA
} else if (define.cmd) {
// CMD 规范，for：seajs
define(function (require, exports, module) {
module.exports = WeixinA
* 对象简单继承，后面的覆盖前面的，继承深度：deep=1
* @private
var _extend = function () {
var result = {}, obj,
for (var i = 0, len = arguments. i & i++) {
obj = arguments[i];
if (typeof obj === 'object') {
for (k in obj) {
obj[k] && (result[k] = obj[k]);
* 内部私有方法，分享用
* @private
var _share = function (cmd, data, callbacks) {
callbacks = callbacks || {};
// 分享过程中的一些回调
var progress = function (resp) {
switch (true) {
// 用户取消
case /\:cancel$/i.test(resp.err_msg) :
callbacks.cancel && callbacks.cancel(resp);
// 发送成功
case /\:(confirm|ok)$/i.test(resp.err_msg):
callbacks.confirm && callbacks.confirm(resp);
// fail　发送失败
case /\:fail$/i.test(resp.err_msg) :
callbacks.fail && callbacks.fail(resp);
// 无论成功失败都会执行的回调
callbacks.all && callbacks.all(resp);
// 执行分享，并处理结果
var handler = function (theData, argv) {
// 加工一下数据
if (cmd.menu == 'menu:share:timeline' ||
(cmd.menu == 'general:share' && argv.shareTo == 'timeline')) {
var title = theData.
theData.title = theData.desc ||
theData.desc = title || theData.
// 如果是收藏操作，并且在wxCallbacks中配置了favorite为false，则不执行回调
if (argv && (argv.shareTo == 'favorite' || argv.scene == 'favorite')) {
if (callbacks.favorite === false) {
WeixinJSBridge.invoke('sendAppMessage', theData, new Function());
WeixinJSBridge.invoke(cmd.action, theData, progress);
// 新的分享接口，单独处理
if (cmd.menu === 'general:share') {
if (argv.shareTo === 'timeline') {
WeixinJSBridge.invoke('shareTimeline', theData, progress);
} else if (argv.shareTo === 'friend') {
WeixinJSBridge.invoke('sendAppMessage', theData, progress);
} else if (argv.shareTo === 'QQ') {
WeixinJSBridge.invoke('shareQQ', theData, progress);
} else if (argv.shareTo === 'weibo') {
WeixinJSBridge.invoke('shareWeibo', theData, progress);
WeixinJSBridge.invoke(cmd.action, theData, progress);
// 监听分享操作
WeixinJSBridge.on(cmd.menu, function (argv) {
callbacks.dataLoaded = callbacks.dataLoaded || new Function();
if (callbacks.async && callbacks.ready) {
WeixinApi[&_wx_loadedCb_&] = callbacks.dataL
if (WeixinApi[&_wx_loadedCb_&].toString().indexOf(&_wx_loadedCb_&) & 0) {
WeixinApi[&_wx_loadedCb_&] = new Function();
callbacks.dataLoaded = function (newData) {
callbacks.__cbkCalled =
var theData = _extend(data, newData);
theData.img_url = theData.imgUrl || theData.img_
delete theData.imgU
WeixinApi[&_wx_loadedCb_&](theData);
handler(theData, argv);
// 然后就绪
if (!(argv && (argv.shareTo == 'favorite' || argv.scene == 'favorite') && callbacks.favorite === false)) {
callbacks.ready && callbacks.ready(argv, data);
// 如果设置了async为true，但是在ready方法中并没有手动调用dataLoaded方法，则自动触发一次
if (!callbacks.__cbkCalled) {
callbacks.dataLoaded({});
callbacks.__cbkCalled =
// 就绪状态
var theData = _extend(data);
if (!(argv && (argv.shareTo == 'favorite' || argv.scene == 'favorite') && callbacks.favorite === false)) {
callbacks.ready && callbacks.ready(argv, theData);
handler(theData, argv);
* 分享到微信朋友圈
待分享的信息
* @p-config
公众平台的appId（服务号可用）
* @p-config
* @p-config
* @p-config
* @p-config
分享的标题
相关回调方法
* @p-config
ready方法是否需要异步执行，默认false
* @p-config
{Function}
ready(argv, data)
* @p-config
{Function}
dataLoaded(data)
数据加载完成后调用，async为true时有用，也可以为空
* @p-config
{Function}
cancel(resp)
* @p-config
{Function}
fail(resp)
* @p-config
{Function}
confirm(resp)
* @p-config
{Function}
无论成功失败都会执行的回调
WeixinApi.shareToTimeline = function (data, callbacks) {
menu: 'menu:share:timeline',
action: 'shareTimeline'
&appid&: data.appId ? data.appId : '',
&img_url&: data.imgUrl,
&link&: data.link,
&desc&: data.desc,
&title&: data.title,
&img_width&: &640&,
&img_height&: &640&
}, callbacks);
* 发送给微信上的好友
待分享的信息
* @p-config
公众平台的appId（服务号可用）
* @p-config
* @p-config
* @p-config
* @p-config
分享的标题
相关回调方法
* @p-config
ready方法是否需要异步执行，默认false
* @p-config
{Function}
ready(argv, data)
* @p-config
{Function}
dataLoaded(data)
数据加载完成后调用，async为true时有用，也可以为空
* @p-config
{Function}
cancel(resp)
* @p-config
{Function}
fail(resp)
* @p-config
{Function}
confirm(resp)
* @p-config
{Function}
无论成功失败都会执行的回调
WeixinApi.shareToFriend = function (data, callbacks) {
menu: 'menu:share:appmessage',
action: 'sendAppMessage'
&appid&: data.appId ? data.appId : '',
&img_url&: data.imgUrl,
&link&: data.link,
&desc&: data.desc,
&title&: data.title,
&img_width&: &640&,
&img_height&: &640&
}, callbacks);
* 分享到腾讯微博
待分享的信息
* @p-config
* @p-config
相关回调方法
* @p-config
ready方法是否需要异步执行，默认false
* @p-config
{Function}
ready(argv, data)
* @p-config
{Function}
dataLoaded(data)
数据加载完成后调用，async为true时有用，也可以为空
* @p-config
{Function}
cancel(resp)
* @p-config
{Function}
fail(resp)
* @p-config
{Function}
confirm(resp)
* @p-config
{Function}
无论成功失败都会执行的回调
WeixinApi.shareToWeibo = function (data, callbacks) {
menu: 'menu:share:weibo',
action: 'shareWeibo'
&content&: data.desc,
&url&: data.link
}, callbacks);
* 新的分享接口
待分享的信息
* @p-config
公众平台的appId（服务号可用）
* @p-config
* @p-config
* @p-config
* @p-config
分享的标题
相关回调方法
* @p-config
ready方法是否需要异步执行，默认false
* @p-config
{Function}
ready(argv, data)
* @p-config
{Function}
dataLoaded(data)
数据加载完成后调用，async为true时有用，也可以为空
* @p-config
{Function}
cancel(resp)
* @p-config
{Function}
fail(resp)
* @p-config
{Function}
confirm(resp)
* @p-config
{Function}
无论成功失败都会执行的回调
WeixinApi.generalShare = function (data, callbacks) {
menu: 'general:share'
&appid&: data.appId ? data.appId : '',
&img_url&: data.imgUrl,
&link&: data.link,
&desc&: data.desc,
&title&: data.title,
&img_width&: &640&,
&img_height&: &640&
}, callbacks);
* 设置页面禁止分享：包括朋友圈、好友、腾讯微博、qq
* @param callback
WeixinApi.disabledShare = function (callback) {
callback = callback || function () {
alert('当前页面禁止分享！');
['menu:share:timeline', 'menu:share:appmessage', 'menu:share:qq',
'menu:share:weibo', 'general:share'].forEach(function (menu) {
WeixinJSBridge.on(menu, function () {
callback();
* 调起微信Native的图片播放组件。
* 这里必须对参数进行强检测，如果参数不合法，直接会导致微信客户端crash
* @param {String} curSrc 当前播放的图片地址
* @param {Array} srcList 图片地址列表
WeixinApi.imagePreview = function (curSrc, srcList) {
if (!curSrc || !srcList || srcList.length == 0) {
WeixinJSBridge.invoke('imagePreview', {
'current': curSrc,
'urls': srcList
* 显示网页右上角的按钮
WeixinApi.showOptionMenu = function () {
WeixinJSBridge.call('showOptionMenu');
* 隐藏网页右上角的按钮
WeixinApi.hideOptionMenu = function () {
WeixinJSBridge.call('hideOptionMenu');
* 显示底部工具栏
WeixinApi.showToolbar = function () {
WeixinJSBridge.call('showToolbar');
* 隐藏底部工具栏
WeixinApi.hideToolbar = function () {
WeixinJSBridge.call('hideToolbar');
* 返回如下几种类型：
* network_type:wifi
* network_type:edge
非wifi,包含3G/2G
* network_type:fail
网络断开连接
* network_type:wwan
* 使用方法：
* WeixinApi.getNetworkType(function(networkType){
* @param callback
WeixinApi.getNetworkType = function (callback) {
if (callback && typeof callback == 'function') {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
// 在这里拿到e.err_msg，这里面就包含了所有的网络类型
callback(e.err_msg);
* 关闭当前微信公众平台页面
* @p-config
{Function}
fail(resp)
* @p-config
{Function}
success(resp)
WeixinApi.closeWindow = function (callbacks) {
callbacks = callbacks || {};
WeixinJSBridge.invoke(&closeWindow&, {}, function (resp) {
switch (resp.err_msg) {
// 关闭成功
case 'close_window:ok':
callbacks.success && callbacks.success(resp);
// 关闭失败
callbacks.fail && callbacks.fail(resp);
* 当页面加载完毕后执行，使用方法：
* WeixinApi.ready(function(Api){
// 从这里只用Api即是WeixinApi
* @param readyCallback
WeixinApi.ready = function (readyCallback) {
* 加一个钩子，同时解决和iOS下的分享问题
* @private
var _hook = function () {
var _WeixinJSBridge = {};
Object.keys(WeixinJSBridge).forEach(function (key) {
_WeixinJSBridge[key] = WeixinJSBridge[key];
Object.keys(WeixinJSBridge).forEach(function (key) {
if (typeof WeixinJSBridge[key] === 'function') {
WeixinJSBridge[key] = function () {
var args = arguments.length & 0 ? arguments[0] : {},
runOn3rd_apis = args.__params ? args.__params.__runOn3rd_apis || [] : [];
['menu:share:timeline', 'menu:share:appmessage', 'menu:share:weibo',
'menu:share:qq', 'general:share'].forEach(function (menu) {
runOn3rd_apis.indexOf(menu) === -1 && runOn3rd_apis.push(menu);
} catch (e) {
return _WeixinJSBridge[key].apply(WeixinJSBridge, arguments);
if (readyCallback && typeof readyCallback == 'function') {
var wxReadyFunc = function () {
readyCallback(Api);
if (typeof window.WeixinJSBridge == &undefined&) {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', wxReadyFunc, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', wxReadyFunc);
document.attachEvent('onWeixinJSBridgeReady', wxReadyFunc);
wxReadyFunc();
* 判断当前网页是否在微信内置浏览器中打开
WeixinApi.openInWeixin = function () {
return /MicroMessenger/i.test(navigator.userAgent);
* 发送邮件
邮件初始内容
* @p-config
* @p-config
相关回调方法
* @p-config
{Function}
fail(resp)
* @p-config
{Function}
success(resp)
* @p-config
{Function}
无论成功失败都会执行的回调
WeixinApi.sendEmail = function (data, callbacks) {
callbacks = callbacks || {};
WeixinJSBridge.invoke(&sendEmail&, {
&title&: data.subject,
&content&: data.body
}, function (resp) {
if (resp.err_msg === 'send_email:sent') {
callbacks.success && callbacks.success(resp);
callbacks.fail && callbacks.fail(resp);
callbacks.all && callbacks.all(resp);
* 开启Api的debug模式，比如出了个什么错误，能alert告诉你，而不是一直很苦逼的在想哪儿出问题了
{Function}
callback(error) 出错后的回调，默认是alert
WeixinApi.enableDebugMode = function (callback) {
* @param {String}
errorMessage
* @param {String}
出错的文件
* @param {Long}
lineNumber
出错代码的行号
* @param {Long}
columnNumber
出错代码的列号
window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber) {
// 有callback的情况下，将错误信息传递到options.callback中
if (typeof callback === 'function') {
callback({
message: errorMessage,
script: scriptURI,
line: lineNumber,
column: columnNumber
// 其他情况，都以alert方式直接提示错误信息
var msgs = [];
msgs.push(&额，代码有错。。。&);
msgs.push(&\n错误信息：&, errorMessage);
msgs.push(&\n出错文件：&, scriptURI);
msgs.push(&\n出错位置：&, lineNumber + '行，' + columnNumber + '列');
alert(msgs.join(''));
* 通用分享，一种简便的写法
* @param wxData
* @param wxCallbacks
WeixinApi.share = function (wxData, wxCallbacks) {
WeixinApi.ready(function (Api) {
// 用户点开右上角popup菜单后，点击分享给好友，会执行下面这个代码
Api.shareToFriend(wxData, wxCallbacks);
// 点击分享到朋友圈，会执行下面这个代码
Api.shareToTimeline(wxData, wxCallbacks);
// 点击分享到腾讯微博，会执行下面这个代码
Api.shareToWeibo(wxData, wxCallbacks);
// 分享到各渠道
Api.generalShare(wxData, wxCallbacks);
})(window);
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'微信内置浏览器UserAgent的判断
现在微信火了，很多线上的APP都希望通过分享的URL或直接的URL进行产品宣传（写这篇博文的
时候，听说微信下个版本将要屏蔽微信中的URL链接），这些链接都将通过微信内置的浏览器打开。PM希望在微信内置浏览器中展示的页面进行个性化处理，那
么前端这边必然要去区别判断是否是微信内置浏览器。
微信内置浏览器的 User Agent
检测浏览器的 User Agent
应该是非常简单的事情
微信在 Android 下的 User
mozilla/5.0 ( android 4.1.2; zh- mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like gecko) version/4.0 mobile safari/534.30 micromessenger/5.0.1.352
微信在 iPhone 下的 User Agent
mozilla/5.0 ( cpu iphone os 5_1_1 like mac os x) applewebkit/534.46 (khtml, like gecko) mobile/9b206 micromessenger/5.0
通过javascript判断
很容易看出来，微信的 User Agent
都有‘micromessenger’字符串标示，我们判断是否含有这些字符串就OK了
function isWeixinBrowser(){
var ua = navigator.userAgent.toLowerCase();
return (/micromessenger/.test(ua)) ? true : false ;
通过 PHP 判断
is_weixin(){ if
( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !==
false ) { return true;
} return false; }
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}