# 如何解决小程序的兼容性问题？

- 作者：知晓程序
- 发布时间：2017-02-04 18:32
- 原文：https://www.ifanr.com/minapp/782408

![featured](https://s3.ifanr.com/wp-content/uploads/2017/02/Featured-1.jpg)

文 \| kamidox

微信小程序发布有一段时间了，但目前小程序的兼容性问题，特别是 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。

原文地址：http://www.jianshu.com/p/90220a55f542

`minapp-polyfill` 项目地址：https://github.com/kamidox/minapp-polyfill

**本文由知晓程序授权转载，关注微信号 zxcx0101，回复「1228」获得全网第一本《小程序入门指南》电子书。**

![zxcx-qun](https://s3.ifanr.com/wp-content/uploads/2017/01/zxcx-qun.png)

![new_zx](https://s3.ifanr.com/wp-content/uploads/2017/01/new_zx-1.png)