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

Author： Zi_Gao
发布时间：February 11, 2020
2377 views
3 comments
1924 words
Categories：代码

<div class="tip share">请注意，本文编写于 1135 天前，最后修改于 1023 天前，其中某些信息可能已经过时。</div>

## 前言
我为什么要这么干呢，因为我的网站在微信只能打开首页，打开其他的内容会出现下面这个提示
![QQ图片20200211095028.png][1]
所以我想可以打开首页，那不如弄一个类似下面这样的
![v2-c084187228db39bdde9a0928f80849d9_hd.jpg][2]
但是因为我学业不精一直没成功所以我想到做一个提示，我google了一大圈终于找到了个有用的教程，我想这太难找了，所以就有了下面的教程为了让大家不那么麻烦

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

## 正文
首先我们找到主题文件下的footer.php文件
我们在合适的位置添加一个[<script>标签对][4]，在<script>标签对之间我们可以插入一段JavaScript代码
我们先添加这段代码
```js
let url = navigator.userAgent.toLowerCase();
//使用toLowerCase将字符串全部转为小写 方便我们判断使用
if (url.indexOf("micromessenger") > -1) {
	//单独判断微信内置浏览器
}
```
这段代码的基本意思是 获取浏览器UA标识然后转为小写(方便判断) > if判断是否含有`micromessenger`字段
这样就可以判断是否是微信打开我们用[alert][5]方法弹出一条提示，比如:
```js
alert('点击右上角>在Safari中打开(或在浏览器中打开)，可能否则无法正常访问！');
```
但是这样我们没做到Android和IOS提示不一样的提示所以我们再嵌套一个if判断是Android还是IOS
```js
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //判断是否是iOS
	//这里是IOS
}
if (navigator.userAgent.match(/android/i)) { //判断是否是Android
	//这里是Android
}
```
我们再在Android和IOS执行的语句里写不一样的提示内容，比如:
Android
```js
alert('点击右上角>在浏览器中打开，可能否则无法正常访问！');
```
IOS
```js
alert('点击右上角>在Safari中打开，可能否则无法正常访问！');
```
那么最后的代码是这样的
```js
<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>
```

[1]: https://assets.zigao.info/www.zigao.info/article/2020/02/3374634454.webp
  [2]: https://assets.zigao.info/www.zigao.info/article/2020/02/2709811278.webp
  [3]: https://zh.wikipedia.org/wiki/%E7%94%A8%E6%88%B7%E4%BB%A3%E7%90%86
  [4]: https://www.w3school.com.cn/tags/tag_script.asp
  [5]: https://www.w3school.com.cn/htmldom/met_win_alert.asp

Last modification：June 1, 2020