午夜91福利视频,午夜成人在线观看,午夜在线视频免费观看,午夜福利短视频,精品午夜成人免费视频APP

小程序模板網

微信小程序填坑-Android真機環境下的bluebird.js

發(fa)布時間:2018-04-08 10:39 所屬欄目:小程序開發教程
本文由兩個作者,一名為weappdev社區的Daissmentii,一名為簡書的一斤代碼,面對的都是同一個問題,所以我都列舉在下面,給同學們參考了
 
1:Daissmentii的方案:
 

前言

如(ru)果你(ni)恰巧使用(yong)的是(shi)bluebird,又恰巧你(ni)只是(shi)在模擬器上測試或者(zhe)你(ni)的真(zhen)機(ji)是(shi)iOS系統(tong),你(ni)有必看(kan)看(kan)到最后,因為(wei)在Android的真(zhen)機(ji)下(xia),bluebird會報錯

建議(yi)閱讀對(dui)象: 在小程序中使用Promise或者使用bluebird報錯的(de)對(dui)象。

如果你現在還不(bu)(bu)知道(dao)Promise是什(shen)么(me),建(jian)議先去查看es6后(hou)再看,不(bu)(bu)然你不(bu)(bu)知道(dao)我在解決的(de)問題

問題描述

2016.11.22微信官方開發工具更新了,版本為0.11.112200,結果在上面跑小程序代碼的時候,發現報錯Promise is not a constructor.
初步判斷應該是Promise在小(xiao)程序代碼中不能直接(jie)使用。

問題查找

  • 查看官方更新文檔34

 


F:修復 同客戶端保持一致,移除 Promise,開發者需要自行引入兼容庫
  • 官方建議引入Promise庫57

 


這種轉換只會幫助開發處理語法上問題,新的 ES6 的 API 如 Promise等需要開發者自行引入 Polyfill 或者別的類庫。

解決方案

先說正確的解決(jue)方案,但是(shi)心酸的bluebird,你可以繼續看下去,坑:別(bie)用bluebird

既然(ran)官方(fang)給出了(le)相關意見(jian),那么我們就采用官方(fang)的意見(jian)自行引(yin)入(ru)(ru) Polyfill,如(ru)果你不小心引(yin)入(ru)(ru)了(le)bluebird庫,請看到(dao)最后。

  • 找庫
    我(wo)找到了es6-promise-polyfill: //github.com/stefanpenner/es6-promise80 min版只有6KB,很合(he)適。

  • 使用
    常規使用即(ji)可(ke)

    
    
    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.  
  • 大公(gong)告成

坑:別用bluebird

  • 隱蔽的Android真機錯誤

如果你恰(qia)巧(qiao)使用(yong)的是(shi)(shi)bluebird,又恰(qia)巧(qiao)你只(zhi)是(shi)(shi)在模擬器上(shang)測試或者你的真機(ji)是(shi)(shi)iOS系統(tong),那(nei)么你不會發現異樣,但是(shi)(shi)你用(yong)android機(ji)器一測試,就會報錯了。

  • 錯誤分析
    1. 引(yin)入promise庫,如bluebird

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

 由于第二個方案的復用性不夠(gou)好(hao),第一選擇肯定是第一個方案,so,我開始(shi)找到(dao)bluebird引入到(dao)項目代碼中,如下:


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

文件結(jie)構如下:


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

引入(ru)進(jin)去(qu)后,在開發(fa)工具上跑起來沒問題,但是在手機(安(an)卓)上預(yu)覽的(de)時候(hou),發(fa)現有如下報錯:


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

于是以為是bluebird的引入方式有問(wen)題,嘗試用import,還是報同樣的錯誤(wu)。


  1. import Promise from 'bluebird.min';
  • 錯誤原因
  • 通過查看bluebird源碼發現,其中有關于對dom操作的代碼,導致在小程序中跑不通。
  • 解決方案是:

到這里你就可以回到文章開頭的解決(jue)方案,老實的使用(yong)es-6.promise.min.js吧

找到(dao)一(yi)個輕量級、只包含promise異(yi)步的(de)核心代碼的(de)promise庫來引入(ru)。 通過(guo)小伙伴的(de)幫助,找到(dao)es-6.promise.min.js引入(ru)進去,終(zhong)于在(zai)手機上(shang)跑通了(le)。。。

在(zai)手機(ji)上運(yun)行成功的(de)興奮之(zhi)余,題主還用iphone真機(ji)測試了一番,發(fa)現在(zai)iphone上直接引入非輕(qing)量(liang)級的(de)bluebird.min.js也是(shi)可行的(de),當然引入輕(qing)量(liang)級的(de)es-6.promise.min.js也是(shi)沒問題的(de)。 需(xu)要注意的(de)是(shi)bluebird.min.js有70多(duo)kb,es-6.promise.min.js有6kb,對于限制代碼不超(chao)過1024kb的(de)小程(cheng)序而言,輕(qing)量(liang)級能給項目省下更(geng)(geng)多(duo)的(de)空間,且(qie)兼容性更(geng)(geng)強。

二:一斤代碼的方案:

 今天,有(you)朋友反映說,我的(de)(de)微信小程序的(de)(de)例子(zi)在(zai)andriod真(zhen)機環(huan)境下運(yun)行出錯(cuo),研究調試了半天,發(fa)現原來是使(shi)用的(de)(de)bluebird.js(Promise實現庫)導致的(de)(de)。

由(you)于小程序框架最近的更新中(zhong)移除了原生Promise的支持(chi),喜歡使用(yong)Promise特(te)性(xing)的開發(fa)者都會(hui)去(qu)引入其他的第三方(fang)Promise庫來替(ti)代,bluebird.js是(shi)一個性(xing)能(neng)不錯(cuo),特(te)性(xing)又豐富的Promise實現庫,所(suo)以大(da)家都愛用(yong)。不過,由(you)于bluebird.js中(zhong)有(you)些(xie)代碼(ma)還(huan)是(shi)用(yong)到(dao)(dao)了document對象上的方(fang)法,在iOS的真(zhen)機(ji)(ji)JavascriptCore環(huan)境中(zhong),貌(mao)似這(zhe)些(xie)代碼(ma)并(bing)不會(hui)被觸及(ji)到(dao)(dao),而(er)在Android真(zhen)機(ji)(ji)環(huan)境中(zhong),就會(hui)被執(zhi)行到(dao)(dao)這(zhe)塊(kuai)代碼(ma),導(dao)致了錯(cuo)誤的發(fa)生。

怎么辦呢?找找其他(ta)能(neng)用的(de)(de)(de)庫吧,Promise實現(xian)庫還算比(bi)較(jiao)多(duo)(duo)的(de)(de)(de)!NPM上搜搜就有(you)。其中es6-promise是另一個被開發(fa)者下(xia)載(zai)使(shi)用比(bi)較(jiao)多(duo)(duo)的(de)(de)(de)庫。通過npm命令我們可以很方便的(de)(de)(de)將它下(xia)載(zai)下(xia)來:


npm install es6-promise

然后在(zai)下(xia)載下(xia)來(lai)的(de)文件夾下(xia),把(ba)dist目錄(lu)中的(de)es6-promise.js或es6-promise.min.js復制到你(ni)的(de)微信小程(cheng)序項目中,替換(huan)原來(lai)的(de)bluebird.js就行啦,標準的(de)Promise API一個都(dou)不會少。

而且es6-promise的代碼文件(jian)體積比bluebird小個3,4倍(bei),也算一(yi)個好處吧(只(zhi)能這么自我安慰(wei)了...哈哈)



易優小程序(xu)(企(qi)業版)+靈活api+前(qian)后代碼開源(yuan) 碼云倉庫:
本文地址://www.jinyoudianli.com/wxmini/doc/course/23124.html 復制鏈接 如(ru)需定制請聯系易優客服咨詢:

工作日 8:30-12:00 14:30-18:00
周六及部分節(jie)假(jia)日提供值班服務(wu)

易(yi)小優(you)
轉(zhuan)人工(gong) ×