小程序模板網(wǎng)

微信小程序填坑-Android真機(jī)環(huán)境下的bluebird.js

發(fā)布時(shí)間:2018-04-08 10:39 所屬欄目:小程序開發(fā)教程
本文由兩個(gè)作者,一名為weappdev社區(qū)的Daissmentii,一名為簡(jiǎn)書的一斤代碼,面對(duì)的都是同一個(gè)問(wèn)題,所以我都列舉在下面,給同學(xué)們參考了
 
1:Daissmentii的方案:
 

前言

如果你恰巧使用的是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ī)使用即可

    
    
    1. import Promise from 'es6-promise.min';
    2. export const request = (method = 'GET') => (url, data) => {
    3. return new Promise((resolve, reject) => {
    4. wx.request({
    5. url,
    6. data,
    7. method,
    8. header: {
    9. 'Content-Type': 'application/json'
    10. },
    11. success: function(res) {
    12. resolve(res.data)
    13. },
    14. fail: function(err) {
    15. reject(err)
    16. }
    17. });
    18. })
    19. }
    20. export const get = request('GET');
    21. export const post = request('POST');
    22. export const put = request('PUT');
    23. export const del = request('DELETE');
    24.  
  • 大公告成

坑:別用bluebird

  • 隱蔽的Android真機(jī)錯(cuò)誤

如果你恰巧使用的是bluebird,又恰巧你只是在模擬器上測(cè)試或者你的真機(jī)是iOS系統(tǒng),那么你不會(huì)發(fā)現(xiàn)異樣,但是你用android機(jī)器一測(cè)試,就會(huì)報(bào)錯(cuò)了。

  • 錯(cuò)誤分析
    1. 引入promise庫(kù),如bluebird

    2. 用小程序官方的方法寫

由于第二個(gè)方案的復(fù)用性不夠好,第一選擇肯定是第一個(gè)方案,so,我開始找到bluebird引入到項(xiàng)目代碼中,如下:


  1. // request.js
  2. var Promise require('bluebird.min');

文件結(jié)構(gòu)如下:


  1. /requests
  2. /request.js
  3. /bluebird.min.js

引入進(jìn)去后,在開發(fā)工具上跑起來(lái)沒(méi)問(wèn)題,但是在手機(jī)(安卓)上預(yù)覽的時(shí)候,發(fā)現(xiàn)有如下報(bào)錯(cuò):


  1. TypeError: Cannot read property 'createElement' of undefined
  2. ...

于是以為是bluebird的引入方式有問(wèn)題,嘗試用import,還是報(bào)同樣的錯(cuò)誤。


  1. 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è)好處吧(只能這么自我安慰了...哈哈)



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23124.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢