本文我們來談?wù)勎⑿判〕绦蛳到y(tǒng)兼容性的那些坑。

微信小程序兼容性問題

微信小程序發(fā)布一周多了，兼容性問題塘装，特別是 Android 平臺(tái)兼容性問題特別嚴(yán)重急迂。據(jù)我觀察，好多小程序掉到兼容性的坑里蹦肴。掉坑里不要緊僚碎，更讓人捉急的是，從坑里爬上來的時(shí)候阴幌，手剛抓到坑沿勺阐，又被微信官方踩到（緊急修復(fù)兼容性的版本沒審核通過，被微信打回重審）矛双，再次跌落坑底渊抽，然后眼睜睜地看著后臺(tái)用戶在破口大罵“什么東西都沒有啊~，什么破小程序”议忽。

微信小程序的兼容性問題除了微信本身的 Bug 外懒闷，大部分是目標(biāo)平臺(tái)對(duì) JavaScript 標(biāo)準(zhǔn)庫支持程度不同造成的。

微信本身的 Bug 引起的

微信本身的 Bug 引發(fā)的兼容性問題有個(gè)現(xiàn)成的例子徙瓶，就是 wx.request() 返回的狀態(tài)碼 res.statusCode 的值在 iOS 下是 int 型數(shù)據(jù)毛雇，而在 Android 6.0.1 上卻是 String 型數(shù)據(jù)。如果你判斷服務(wù)器的返回狀態(tài)碼方法不當(dāng)侦镇，可能就踩到坑里了灵疮。

wx.request({
    url: 'http://api.example.com',
    success: function (res) {
        if (res.statusCode === 200) {
            // success
        } else {
            // server failure
        }
    }
})

上述代碼就踩坑了，正確的做法是使用 == 而不是使用 === 來判斷壳繁。另外一個(gè)更規(guī)范的方法是使用 parseInt(res.statusCode) === 200 來實(shí)現(xiàn)震捣。

Javascript 標(biāo)準(zhǔn)庫兼容性問題

比如 Array.find() 方法在 iOS 10.2/Android 7.0 上完美支持，但在 Android 6.0.1 上卻不支持闹炉。如果代碼里用到了這個(gè)接口蒿赢，就會(huì)導(dǎo)致在 Android 6.0.1 上無法正常工作。通過對(duì)比發(fā)現(xiàn)渣触，這類接口不支持的個(gè)數(shù)還是比較多的羡棵。特別是 Android 平臺(tái)版本眾多，兼容性問題就更嚴(yán)重嗅钻，可能一不小小心就掉到坑里皂冰。

解決方法

微信本身 Bug 只能繞過去，但對(duì) JavaScript 引擎的兼容性养篓，可以有更優(yōu)雅的解決方法秃流。比如，我們可以打補(bǔ)丁柳弄，使用 polyfill 來實(shí)現(xiàn)這些不支持的標(biāo)準(zhǔn)庫方法舶胀。比如，修復(fù) Android 6.0.1 平臺(tái)不支持 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;
  };
}

推而廣之嚣伐，我們可以把平臺(tái)不支持的標(biāo)準(zhǔn)庫方法糖赔，使用 polyfill 實(shí)現(xiàn)。這就是 minapp-polyfill 這個(gè)項(xiàng)目的目的纤控。

使用方法很簡(jiǎn)單挂捻，把 minapp-polyfill 項(xiàng)目里的 polyfill.js 拷貝到小程序源碼目錄下，在需要打補(bǔ)丁的 JavaScript 源文件頭部引入如下代碼即可：

import 'path/to/polyfill.js'

目前這個(gè)項(xiàng)目只是搭了個(gè)骨架船万，還有很多方法需要實(shí)現(xiàn)刻撒。PRs is welcome。

各個(gè)平臺(tái)對(duì) JavaScript 標(biāo)準(zhǔn)庫支持情況

條件限制耿导，這里統(tǒng)計(jì)了四個(gè)平臺(tái)對(duì) JavaScript 標(biāo)準(zhǔn)庫的支持情況声怔，分別是 iOS 10.2, Android 6.0.1, Android 7.0, 微信開發(fā)者工具，具體數(shù)據(jù)如下：

N/A 表示這個(gè)標(biāo)準(zhǔn)庫方法在平臺(tái)上不支持

Q: 這些數(shù)據(jù)是怎么來的舱呻，靠譜嗎醋火？
A: 這些數(shù)據(jù)是在真實(shí)小程序運(yùn)行環(huán)境下運(yùn)行，然后把 API 支持情況發(fā)送到服務(wù)器后臺(tái)箱吕，再寫個(gè)腳本把數(shù)據(jù)整理匯總后得來的芥驳。

Q: 其他平臺(tái)，比如 Android 5.0 的支持情況怎么樣茬高？
A: 由于條件限制兆旬，手上沒有 Android 5.0 的手機(jī)，有愿意配合收集數(shù)據(jù)的怎栽，私信留言丽猬。配合的方法很簡(jiǎn)單，用指定型號(hào)的手機(jī)打開一個(gè)微信小程序熏瞄，按一個(gè)按鈕即可脚祟。

Q: 為什么不使用 lodash 之類效率更高的庫，而使用的標(biāo)準(zhǔn)庫强饮？
A: 使用 lodash 之類的確實(shí)效率更高由桌，兼容性也更好∮史幔基于兩個(gè)原因沒有使用行您，一是 lodash 太大，而微信小程序限制在 1MB 以內(nèi)柠座。當(dāng)然邑雅，可以用 lodash 模塊化的版本來解決片橡，但還有第二個(gè)原因妈经，即 lodash 的一些 API 也有兼容性問題，比如我試過 lodash.findIndex 這個(gè)包，結(jié)果在 Android 6.0.1 上也無法成功運(yùn)行 (這一點(diǎn)未做深入驗(yàn)證吹泡，感興趣的同學(xué)可以驗(yàn)證一下)骤星。

總結(jié)

從后臺(tái)數(shù)據(jù)來看，小程序剛發(fā)布的前三天爆哑，確實(shí)帶來了非扯茨眩可觀的流量紅利，但這部分償鮮的用戶揭朝，很快就消失了队贱。三天過后，基本上保持了平衡的訪問量潭袱。流量紅利和廣告一樣柱嫌，是催化劑，真正有價(jià)值的還是要做用戶需要的產(chǎn)品屯换。

在此順手安利一下開發(fā)的兩個(gè)小程序 360好書推薦 和 51經(jīng)典電影编丘，偶爾想用的時(shí)候打開，可能會(huì)偶遇一些小驚喜彤悔。但坦白講嘉抓，這兩個(gè)小程序都和微信倡導(dǎo)的小程序價(jià)值觀不符。微信還是希望通過小程序把線下低頻的晕窑，服務(wù)成本高（這里應(yīng)該主要是時(shí)間成本抑片，即便利性）的場(chǎng)景，轉(zhuǎn)化為線上快捷的使用方式幕屹。