微信,是一个生活方式

超过十亿人使用的手机应用
支持发送语音短信、视频、图片和文字
可以群聊,仅耗少量流量,适合大部分智能手机

wechat-logo

作为一个 Web 开发者,可以说现在很难不与微信发生交集了,简单来说,与 Web 开发相关的,大致可以分为微信内置浏览器页面和小程序两大类,本文用于记录一下日常开发中遇到的问题及解决的方法,后续会不断补充…

微信内置浏览器 Web 开发

Q: 微信浏览器是什么?

微信内打开 Url 链接,使用的是其内置的 WebView,可以看做是系统原生浏览器的一个子集,不过微信对其做了一些扩展,比如说加入了WeixinJSBridge,但是 Web 开发时做兼容,主要参考的还是系统版本及其对应的浏览器版本。

Android 有些区别,微信 6.1 版本以上的 android 用户,使用的是 QQ 浏览器的 X5 内核;而 5.4-6.1 之间的版本,若用户安装了 QQ 浏览器就是使用的 X5 内核,否则使用的是系统内核。

Q: 如何检测是否在微信浏览器中?

Google 一下,会有很多结果,一般而言,目前就 2 种方式:

1. 通过检测navigator.userAgent是否包含MicroMessenger

1
2
3
4
5
const isWeChat = ((ua) => ua.length && /MicroMessenger/gi.test(ua))(
  window && window.navigator && window.navigator.userAgent
    ? window.navigator.userAgent
    : ""
);

2. 通过检测WeixinJSBridge是否存在

这里有一个坑,可能开发时会遇到过Uncaught ReferenceError: WeixinJSBridge is not defined这样的报错,有过 WebView 开发的同学可能会清楚些,像WeixinJSBridge这样的扩展对象,不一定在页面正常的加载前就已经准备结束,所以微信提供了一个document的事件来让我们监听WeixinJSBridge是否已经准备完成,在其没有准备好前,调用WeixinJSBridge就会遇到像上面的那个报错

所以,如果你想利用WeixinJSBridge来检测是否在微信中,请记住,这个过程是异步的。

1
2
3
4
5
6
7
const isWeChat = (callback) => {
  if (window.WeixinJSBridge && typeof window.WeixinJSBridge !== "undefined") {
    callback();
  } else {
    document.addEventListener("WeixinJSBridgeReady", callback);
  }
};

小程序开发

TODO

参考