网页开发中怎么判断是不是微信浏览器

2023-09-03 09:30:00 by wst

公众号开发

---

出发点

打算做一个网页，需要在以下类型浏览器中打开：

1. 微信浏览器（微信客户端）

2. 手机浏览器

3. 电脑浏览器

问题

1. 适配问题，电脑的屏幕较大，肯定和手机上显示的不一样。

2. 有些功能在微信浏览器可以用，在电脑浏览器上用不了。

解决方案

问题1：

解决方案有很多，这里采用的是bootstrap-vue来适配多端界面的。

问题2：

进入页面的时候，判断是否为微信浏览器，然后进行适配。

有老铁会问，怎么判断呢？往下看，

function isWeChat() {
    //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
    var ua = window.navigator.userAgent.toLowerCase();
    //通过正则表达式匹配ua中是否含有MicroMessenger字符串
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

还有一个更简便的写法：

function isWechat() {
    return /MicroMessenger/i.test(window.navigator.userAgent);
}

这些在公众号开发中只是冰山一角，内容还多着呢。

参考链接如下：

1. 微信JS-SDK调用方法：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

2. 网页授权登录：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

3. 微信公众号支付：https://blog.51cto.com/u_15765713/5673693

 

在开发过程中如遇问题，欢迎讨论。wx:wst_ccut, 备注：微信开发。

 

一个专注微信生态开发的人。

---