微信开发杂谈 - Life & Code

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

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

文章目录