微信小程序填坑-Android真機(jī)環(huán)境下的bluebird.js
前言
如果你恰巧使用的是bluebird，又恰巧你只是在模擬器上測(cè)試或者你的真機(jī)是iOS系統(tǒng)，你有必看看到最后，因?yàn)樵贏ndroid的真機(jī)下，bluebird會(huì)報(bào)錯(cuò)
建議閱讀對(duì)象: 在小程序中使用Promise或者使用bluebird報(bào)錯(cuò)的對(duì)象。
如果你現(xiàn)在還不知道Promise是什么，建議先去查看es6后再看，不然你不知道我在解決的問(wèn)題
問(wèn)題描述
2016.11.22微信官方開發(fā)工具更新了，版本為0.11.112200，結(jié)果在上面跑小程序代碼的時(shí)候，發(fā)現(xiàn)報(bào)錯(cuò)Promise is not a constructor.
初步判斷應(yīng)該是Promise在小程序代碼中不能直接使用。
問(wèn)題查找
- 查看官方更新文檔34
F:修復(fù) 同客戶端保持一致，移除 Promise，開發(fā)者需要自行引入兼容庫(kù)
- 官方建議引入Promise庫(kù)57
這種轉(zhuǎn)換只會(huì)幫助開發(fā)處理語(yǔ)法上問(wèn)題，新的 ES6 的 API 如 Promise等需要開發(fā)者自行引入 Polyfill 或者別的類庫(kù)。
解決方案
先說(shuō)正確的解決方案，但是心酸的bluebird，你可以繼續(xù)看下去，坑:別用bluebird
既然官方給出了相關(guān)意見(jiàn)，那么我們就采用官方的意見(jiàn)自行引入 Polyfill,如果你不小心引入了bluebird庫(kù)，請(qǐng)看到最后。
-
找?guī)?br /> 我找到了es6-promise-polyfill: https://github.com/stefanpenner/es6-promise80 min版只有6KB,很合適。
-
使用
常規(guī)使用即可- import Promise from 'es6-promise.min';
- export const request = (method = 'GET') => (url, data) => {
- return new Promise((resolve, reject) => {
- wx.request({
- url,
- data,
- method,
- header: {
- 'Content-Type': 'application/json'
- },
- success: function(res) {
- resolve(res.data)
- },
- fail: function(err) {
- reject(err)
- }
- });
- })
- }
- export const get = request('GET');
- export const post = request('POST');
- export const put = request('PUT');
- export const del = request('DELETE');
-
大公告成
坑:別用bluebird
- 隱蔽的Android真機(jī)錯(cuò)誤
如果你恰巧使用的是bluebird，又恰巧你只是在模擬器上測(cè)試或者你的真機(jī)是iOS系統(tǒng)，那么你不會(huì)發(fā)現(xiàn)異樣，但是你用android機(jī)器一測(cè)試，就會(huì)報(bào)錯(cuò)了。
-
錯(cuò)誤分析
-
引入promise庫(kù)，如bluebird
- 用小程序官方的方法寫
-
由于第二個(gè)方案的復(fù)用性不夠好，第一選擇肯定是第一個(gè)方案，so，我開始找到bluebird引入到項(xiàng)目代碼中，如下：
- // request.js
- var Promise require('bluebird.min');
文件結(jié)構(gòu)如下：
- /requests
- /request.js
- /bluebird.min.js
引入進(jìn)去后，在開發(fā)工具上跑起來(lái)沒(méi)問(wèn)題，但是在手機(jī)（安卓）上預(yù)覽的時(shí)候，發(fā)現(xiàn)有如下報(bào)錯(cuò)：
- TypeError: Cannot read property 'createElement' of undefined
- ...
于是以為是bluebird的引入方式有問(wèn)題，嘗試用import，還是報(bào)同樣的錯(cuò)誤。
- import Promise from 'bluebird.min';
- 錯(cuò)誤原因
- 通過(guò)查看bluebird源碼發(fā)現(xiàn)，其中有關(guān)于對(duì)dom操作的代碼，導(dǎo)致在小程序中跑不通。
- 解決方案是：
到這里你就可以回到文章開頭的解決方案，老實(shí)的使用es-6.promise.min.js吧
找到一個(gè)輕量級(jí)、只包含promise異步的核心代碼的promise庫(kù)來(lái)引入。 通過(guò)小伙伴的幫助，找到es-6.promise.min.js引入進(jìn)去，終于在手機(jī)上跑通了。。。
在手機(jī)上運(yùn)行成功的興奮之余，題主還用iphone真機(jī)測(cè)試了一番，發(fā)現(xiàn)在iphone上直接引入非輕量級(jí)的bluebird.min.js也是可行的，當(dāng)然引入輕量級(jí)的es-6.promise.min.js也是沒(méi)問(wèn)題的。 需要注意的是bluebird.min.js有70多kb，es-6.promise.min.js有6kb，對(duì)于限制代碼不超過(guò)1024kb的小程序而言，輕量級(jí)能給項(xiàng)目省下更多的空間，且兼容性更強(qiáng)。
今天，有朋友反映說(shuō)，我的微信小程序的例子在andriod真機(jī)環(huán)境下運(yùn)行出錯(cuò)，研究調(diào)試了半天，發(fā)現(xiàn)原來(lái)是使用的bluebird.js(Promise實(shí)現(xiàn)庫(kù))導(dǎo)致的。
由于小程序框架最近的更新中移除了原生Promise的支持，喜歡使用Promise特性的開發(fā)者都會(huì)去引入其他的第三方Promise庫(kù)來(lái)替代，bluebird.js是一個(gè)性能不錯(cuò)，特性又豐富的Promise實(shí)現(xiàn)庫(kù)，所以大家都愛(ài)用。不過(guò)，由于bluebird.js中有些代碼還是用到了document對(duì)象上的方法，在iOS的真機(jī)JavascriptCore環(huán)境中，貌似這些代碼并不會(huì)被觸及到，而在Android真機(jī)環(huán)境中，就會(huì)被執(zhí)行到這塊代碼，導(dǎo)致了錯(cuò)誤的發(fā)生。
怎么辦呢？找找其他能用的庫(kù)吧，Promise實(shí)現(xiàn)庫(kù)還算比較多的！NPM上搜搜就有。其中es6-promise是另一個(gè)被開發(fā)者下載使用比較多的庫(kù)。通過(guò)npm命令我們可以很方便的將它下載下來(lái)：
npm install es6-promise
然后在下載下來(lái)的文件夾下，把dist目錄中的es6-promise.js或es6-promise.min.js復(fù)制到你的微信小程序項(xiàng)目中，替換原來(lái)的bluebird.js就行啦，標(biāo)準(zhǔn)的Promise API一個(gè)都不會(huì)少。
而且es6-promise的代碼文件體積比bluebird小個(gè)3，4倍，也算一個(gè)好處吧（只能這么自我安慰了...哈哈）
