05月10, 2018

微信开发杂谈

微信,是一个生活方式

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

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

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来检测是否在微信中,请记住,这个过程是异步的。

const isWeChat = (callback) => {
  if (
    window.WeixinJSBridge &&
    typeof window.WeixinJSBridge !== 'undefined'
  ) {
    callback();
  } else {
    document.addEventListener('WeixinJSBridgeReady', callback);
  }
};

小程序开发

TODO

参考

本文链接:https://itony.net/post/dev-wechat.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。