检测到微信打开提示"请用浏览器打开"

建议您到我的博客阅读

原贴地址https://zigao.tk/archives/7.html

前言

我为什么要这么干呢，因为我的网站在微信只能打开首页，打开其他的内容会出现下面这个提示

所以我想可以打开首页，那不如弄一个类似下面这样的

但是因为我学业不精一直没成功所以我想到做一个提示，我google了一大圈终于找到了个有用的教程，我想这太难找了，所以就有了下面的教程为了让大家不那么麻烦

原理

这个功能用的是JS实现的，首先我们获取浏览器UA标识
研究发现微信UA标识不管是Android、IOS都有MicroMessenger字段所以我们可以以此判断是否是微信打开
在分别识别判断是Android还是IOS这个功能就完成了

正文

首先我们找到主题文件下的footer.php文件
我们在合适的位置添加一个

let url = navigator.userAgent.toLowerCase();
//使用toLowerCase将字符串全部转为小写 方便我们判断使用
if (url.indexOf("micromessenger") > -1) {
	//单独判断微信内置浏览器
}

这段代码的基本意思是 获取浏览器UA标识然后转为小写(方便判断) > if判断是否含有micromessenger字段
这样就可以判断是否是微信打开我们用alert方法弹出一条提示，比如:

alert('点击右上角>在Safari中打开(或在浏览器中打开)，可能否则无法正常访问！');

但是这样我们没做到Android和IOS提示不一样的提示所以我们再嵌套一个if判断是Android还是IOS

if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //判断是否是iOS
	//这里是IOS
}
if (navigator.userAgent.match(/android/i)) { //判断是否是Android
	//这里是Android
}

我们再在Android和IOS执行的语句里写不一样的提示内容，比如:
Android

alert('点击右上角>在浏览器中打开，可能否则无法正常访问！');

IOS

alert('点击右上角>在Safari中打开，可能否则无法正常访问！');

那么最后的代码是这样的

<script>
let url = navigator.userAgent.toLowerCase();
//使用toLowerCase将字符串全部转为小写 方便我们判断使用
if (url.indexOf("micromessenger") > -1) {
  //单独判断微信内置浏览器
	if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //判断是否是iOS
		alert('点击右上角>在Safari中打开，可能否则无法正常访问！');
	}
	if (navigator.userAgent.match(/android/i)) { //判断是否是Android
		alert('点击右上角>在浏览器中打开，可能否则无法正常访问！');
	}
}
</script>