微信 android兼容性问题怎么解决方案,微信小程序兼容性问题

本文我们来谈谈微信小程序系统兼容性的那些坑。

微信小程序兼容性问题

微信小程序发布一周多了，兼容性问题，特别是 Android 平台兼容性问题特别严重。据我观察，好多小程序掉到兼容性的坑里。掉坑里不要紧，更让人捉急的是，从坑里爬上来的时候，手刚抓到坑沿，又被微信官方踩到(紧急修复兼容性的版本没审核通过，被微信打回重审)，再次跌落坑底，然后眼睁睁地看着后台用户在破口大骂“什么东西都没有啊~，什么破小程序”。

微信小程序的兼容性问题除了微信本身的 Bug 外，大部分是目标平台对 JavaScript 标准库支持程度不同造成的。

微信本身的 Bug 引起的

微信本身的 Bug 引发的兼容性问题有个现成的例子，就是 wx.request() 返回的状态码 res.statusCode 的值在 iOS 下是 int 型数据，而在 Android 6.0.1 上却是 String 型数据。如果你判断服务器的返回状态码方法不当，可能就踩到坑里了。

wx.request({

url: 'http://api.example.com',

success: function (res) {

if (res.statusCode === 200) {

// success

} else {

// server failure

}

})

上述代码就踩坑了，正确的做法是使用 == 而不是使用 === 来判断。另外一个更规范的方法是使用 parseInt(res.statusCode) === 200 来实现。

Javascript 标准库兼容性问题

比如 Array.find() 方法在 iOS 10.2/Android 7.0 上完美支持，但在 Android 6.0.1 上却不支持。如果代码里用到了这个接口，就会导致在 Android 6.0.1 上无法正常工作。通过对比发现，这类接口不支持的个数还是比较多的。特别是 Android 平台版本众多，兼容性问题就更严重，可能一不小小心就掉到坑里。

解决方法

微信本身 Bug 只能绕过去，但对 JavaScript 引擎的兼容性，可以有更优雅的解决方法。比如，我们可以打补丁，使用 polyfill 来实现这些不支持的标准库方法。比如，修复 Android 6.0.1 平台不支持 String.startsWith() 的问题，可以使用下面的 polyfill 代码：

if (!String.prototype.startsWith) {

console.warn('define polyfill for Array.prototype.startsWith');

String.prototype.startsWith = function (searchString, position) {

position = position || 0;

return this.substr(position, searchString.length) === searchString;

};

}

推而广之，我们可以把平台不支持的标准库方法，使用 polyfill 实现。这就是 minapp-polyfill 这个项目的目的。

使用方法很简单，把 minapp-polyfill 项目里的 polyfill.js 拷贝到小程序源码目录下，在需要打补丁的 JavaScript 源文件头部引入如下代码即可：

import 'path/to/polyfill.js'

目前这个项目只是搭了个骨架，还有很多方法需要实现。PRs is welcome。

各个平台对 JavaScript 标准库支持情况

条件限制，这里统计了四个平台对 JavaScript 标准库的支持情况，分别是 iOS 10.2, Android 6.0.1, Android 7.0, 微信开发者工具，具体数据如下：

Component.apiName

iOS 10.2

Android 6.0.1

Android 7.0

devtool

Array.toString

YES

Array.values

YES

N/A

YES

N/A

Array.toLocaleString

YES

Array.concat

YES

Array.fill

YES

N/A

YES

Array.join

YES

Array.pop

YES

Array.push

YES

Array.reverse

YES

Array.shift

YES

Array.slice

YES

Array.sort

YES

Array.splice

YES

Array.unshift

YES

Array.every

YES

Array.forEach

YES

Array.some

YES

Array.indexOf

YES

Array.lastIndexOf

YES

Array.filter

YES

Array.reduce

YES

Array.reduceRight

YES

Array.map

YES

Array.entries

YES

N/A

YES

Array.keys

YES

N/A

YES

Array.find

YES

N/A

YES

Array.findIndex

YES

N/A

YES

Array.includes

YES

N/A

YES

Array.copyWithin

YES

N/A

YES

Array.constructor

YES

Buffer

N/A

DataView.getInt8

YES

DataView.getUint8

YES

DataView.getInt16

YES

DataView.getUint16

YES

DataView.getInt32

YES

DataView.getUint32

YES

DataView.getFloat32

YES

DataView.getFloat64

YES

DataView.setInt8

YES

DataView.setUint8

YES

DataView.setInt16

YES

DataView.setUint16

YES

DataView.setInt32

YES

DataView.setUint32

YES

DataView.setFloat32

YES

DataView.setFloat64

YES

DataView.constructor

YES

Date.toString

YES

Date.toISOString

YES

Date.toDateString

YES

Date.toTimeString

YES

Date.toLocaleString

YES

Date.toLocaleDateString

YES

Date.toLocaleTimeString

YES

Date.valueOf

YES

Date.getTime

YES

Date.getFullYear

YES

Date.getUTCFullYear

YES

Date.getMonth

YES

Date.getUTCMonth

YES

Date.getDate

YES

Date.getUTCDate

YES

Date.getDay

YES

Date.getUTCDay

YES

Date.getHours

YES

Date.getUTCHours

YES

Date.getMinutes

YES

Date.getUTCMinutes

YES

Date.getSeconds

YES

Date.getUTCSeconds

YES

Date.getMilliseconds

YES

Date.getUTCMilliseconds

YES

Date.getTimezoneOffset

YES

Date.setTime

YES

Date.setMilliseconds

YES

Date.setUTCMilliseconds

YES

Date.setSeconds

YES

Date.setUTCSeconds

YES

Date.setMinutes

YES

Date.setUTCMinutes

YES

Date.setHours

YES

Date.setUTCHours

YES

Date.setDate

YES

Date.setUTCDate

YES

Date.setMonth

YES

Date.setUTCMonth

YES

Date.setFullYear

YES

Date.setUTCFullYear

YES

Date.setYear

YES

Date.getYear

YES

Date.toJSON

YES

Date.toUTCString

YES

Date.toGMTString

YES

Date.constructor

YES

Error.toString

YES

Error.constructor

YES

Float32Array.constructor

YES

Float64Array.constructor

YES

Function.constructor

YES

Int16Array.constructor

YES

Int32Array.constructor

YES

Int8Array.constructor

YES

Map.forEach

YES

N/A

YES

Map.clear

YES

N/A

YES

Map.delete

YES

N/A

YES

Map.get

YES

N/A

YES

Map.has

YES

N/A

YES

Map.set

YES

N/A

YES

Map.keys

YES

N/A

YES

Map.values

YES

N/A

YES

Map.entries

YES

N/A

YES

Map.constructor

YES

N/A

YES

Math.abs

YES

Math.acos

YES

Math.asin

YES

Math.atan

YES

Math.acosh

YES

N/A

YES

Math.asinh

YES

N/A

YES

Math.atanh

YES

N/A

YES

Math.atan2

YES

Math.cbrt

YES

N/A

YES

Math.ceil

YES

Math.clz32

YES

N/A

YES

Math.cos

YES

Math.cosh

YES

N/A

YES

Math.exp

YES

Math.expm1

YES

N/A

YES

Math.floor

YES

Math.fround

YES

N/A

YES

Math.hypot

YES

N/A

YES

Math.log

YES

Math.log10

YES

N/A

YES

Math.log1p

YES

N/A

YES

Math.log2

YES

N/A

YES

Math.max

YES

Math.min

YES

Math.pow

YES

Math.random

YES

Math.round

YES

Math.sign

YES

N/A

YES

Math.sin

YES

Math.sinh

YES

N/A

YES

Math.sqrt

YES

Math.tan

YES

Math.tanh

YES

N/A

YES

Math.trunc

YES

N/A

YES

Math.imul

YES

Object.toString

YES

Object.toLocaleString

YES

Object.valueOf

YES

Object.hasOwnProperty

YES

Object.propertyIsEnumerable

YES

Object.isPrototypeOf

YES

Object._defineGetter_

YES

Object._defineSetter_

YES

Object._lookupGetter_

YES

Object._lookupSetter_

YES

Object.constructor

YES

Promise.then

YES

Promise.catch

YES

Promise.constructor

YES

RegExp.compile

YES

RegExp.exec

YES

RegExp.toString

YES

RegExp.test

YES

RegExp.constructor

YES

Set.forEach

YES

N/A

YES

Set.add

YES

N/A

YES

Set.clear

YES

N/A

YES

Set.delete

YES

N/A

YES

Set.has

YES

N/A

YES

Set.entries

YES

N/A

YES

Set.values

YES

N/A

YES

Set.keys

YES

N/A

YES

Set.constructor

YES

N/A

YES

String.match

YES

String.padStart

YES

N/A

String.padEnd

YES

N/A

String.repeat

YES

N/A

YES

String.replace

YES

String.search

YES

String.split

YES

String.toString

YES

String.valueOf

YES

String.charAt

YES

String.charCodeAt

YES

String.codePointAt

YES

N/A

YES

String.concat

YES

String.indexOf

YES

String.lastIndexOf

YES

String.slice

YES

String.substr

YES

String.substring

YES

String.toLowerCase

YES

String.toUpperCase

YES

String.localeCompare

YES

String.toLocaleLowerCase

YES

String.toLocaleUpperCase

YES

String.big

YES

String.small

YES

String.blink

YES

String.bold

YES

String.fixed

YES

String.italics

YES

String.strike

YES

String.sub

YES

String.sup

YES

String.fontcolor

YES

String.fontsize

YES

String.anchor

YES

String.link

YES

String.trim

YES

String.trimLeft

YES

String.trimRight

YES

String.startsWith

YES

N/A

YES

String.endsWith

YES

N/A

YES

String.includes

YES

N/A

YES

String.normalize

YES

String.constructor

YES

Symbol.toString

YES

N/A

YES

Symbol.valueOf

YES

N/A

YES

Symbol.constructor

YES

N/A

YES

TypeError.toString

YES

N/A

YES

TypeError.constructor

YES

Uint16Array.constructor

YES

Uint32Array.constructor

YES

Uint8Array.constructor

YES

Uint8ClampedArray.constructor

YES

WeakMap.delete

YES

WeakMap.get

YES

WeakMap.has

YES

WeakMap.set

YES

WeakMap.constructor

YES

N/A 表示这个标准库方法在平台上不支持

Q: 这些数据是怎么来的，靠谱吗？

A: 这些数据是在真实小程序运行环境下运行，然后把 API 支持情况发送到服务器后台，再写个脚本把数据整理汇总后得来的。

Q: 其他平台，比如 Android 5.0 的支持情况怎么样？

A: 由于条件限制，手上没有 Android 5.0 的手机，有愿意配合收集数据的，私信留言。配合的方法很简单，用指定型号的手机打开一个微信小程序，按一个按钮即可。

Q: 为什么不使用 lodash 之类效率更高的库，而使用的标准库？

A: 使用 lodash 之类的确实效率更高，兼容性也更好。基于两个原因没有使用，一是 lodash 太大，而微信小程序限制在 1MB 以内。当然，可以用 lodash 模块化的版本来解决，但还有第二个原因，即 lodash 的一些 API 也有兼容性问题，比如我试过 lodash.findIndex 这个包，结果在 Android 6.0.1 上也无法成功运行 (这一点未做深入验证，感兴趣的同学可以验证一下)。

总结

从后台数据来看，小程序刚发布的前三天，确实带来了非常可观的流量红利，但这部分偿鲜的用户，很快就消失了。三天过后，基本上保持了平衡的访问量。流量红利和广告一样，是催化剂，真正有价值的还是要做用户需要的产品。

在此顺手安利一下开发的两个小程序 360好书推荐和 51经典电影，偶尔想用的时候打开，可能会偶遇一些小惊喜。但坦白讲，这两个小程序都和微信倡导的小程序价值观不符。微信还是希望通过小程序把线下低频的，服务成本高(这里应该主要是时间成本，即便利性)的场景，转化为线上快捷的使用方式。