用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

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

天下雪 2016-12-19 00:34

本文由两个作者,一名为weappdev社区的Daissmentii,一名为简书的一斤代码,面对的都是同一个问题,所以我都列举在下面,给同学们参考了1:Daissmentii的方案:前言如果你恰巧使用的是bluebird,又恰巧你只是在模拟 ...

本文由两个作者,一名为weappdev社区的Daissmentii,一名为简书的一斤代码,面对的都是同一个问题,所以我都列举在下面,给同学们参考了

1:Daissmentii的方案:

前言

如果你恰巧使用的是bluebird,又恰巧你只是在模拟器上测试或者你的真机是iOS系统,你有必看看到最后,因为在Android的真机下,bluebird会报错

建议阅读对象: 在小程序中使用Promise或者使用bluebird报错的对象。

如果你现在还不知道Promise是什么,建议先去查看es6后再看,不然你不知道我在解决的问题

问题描述

2016.11.22微信官方开发工具更新了,版本为0.11.112200,结果在上面跑小程序代码的时候,发现报错Promise is not a constructor.
初步判断应该是Promise在小程序代码中不能直接使用。

问题查找

F:修复 同客户端保持一致,移除 Promise,开发者需要自行引入兼容库

这种转换只会帮助开发处理语法上问题,新的 ES6 的 API 如 Promise等需要开发者自行引入 Polyfill 或者别的类库。

解决方案

先说正确的解决方案,但是心酸的bluebird,你可以继续看下去,坑:别用bluebird

既然官方给出了相关意见,那么我们就采用官方的意见自行引入 Polyfill,如果你不小心引入了bluebird库,请看到最后。

  • 找库
    我找到了es6-promise-polyfill: https://github.com/stefanpenner/es6-promise80 min版只有6KB,很合适。

  • 使用
    常规使用即可

    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');

  • 大公告成

坑:别用bluebird

  • 隐蔽的Android真机错误

如果你恰巧使用的是bluebird,又恰巧你只是在模拟器上测试或者你的真机是iOS系统,那么你不会发现异样,但是你用android机器一测试,就会报错了。

  • 错误分析
    1. 引入promise库,如bluebird

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

由于第二个方案的复用性不够好,第一选择肯定是第一个方案,so,我开始找到bluebird引入到项目代码中,如下:

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

文件结构如下:

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

引入进去后,在开发工具上跑起来没问题,但是在手机(安卓)上预览的时候,发现有如下报错:

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

于是以为是bluebird的引入方式有问题,尝试用import,还是报同样的错误。

  1. import Promise from 'bluebird.min';
  • 错误原因
  • 通过查看bluebird源码发现,其中有关于对dom操作的代码,导致在小程序中跑不通。
  • 解决方案是:

到这里你就可以回到文章开头的解决方案,老实的使用es-6.promise.min.js

找到一个轻量级、只包含promise异步的核心代码的promise库来引入。
通过小伙伴的帮助,找到es-6.promise.min.js引入进去,终于在手机上跑通了。。。

在手机上运行成功的兴奋之余,题主还用iphone真机测试了一番,发现在iphone上直接引入非轻量级的bluebird.min.js也是可行的,当然引入轻量级的es-6.promise.min.js也是没问题的。
需要注意的是bluebird.min.js有70多kb,es-6.promise.min.js有6kb,对于限制代码不超过1024kb的小程序而言,轻量级能给项目省下更多的空间,且兼容性更强。

二:一斤代码的方案:

今天,有朋友反映说,我的微信小程序的例子在andriod真机环境下运行出错,研究调试了半天,发现原来是使用的bluebird.js(Promise实现库)导致的。

由于小程序框架最近的更新中移除了原生Promise的支持,喜欢使用Promise特性的开发者都会去引入其他的第三方Promise库来替代,bluebird.js是一个性能不错,特性又丰富的Promise实现库,所以大家都爱用。不过,由于bluebird.js中有些代码还是用到了document对象上的方法,在iOS的真机JavascriptCore环境中,貌似这些代码并不会被触及到,而在Android真机环境中,就会被执行到这块代码,导致了错误的发生。

怎么办呢?找找其他能用的库吧,Promise实现库还算比较多的!NPM上搜搜就有。其中es6-promise是另一个被开发者下载使用比较多的库。通过npm命令我们可以很方便的将它下载下来:

npm install es6-promise

然后在下载下来的文件夹下,把dist目录中的es6-promise.js或es6-promise.min.js复制到你的微信小程序项目中,替换原来的bluebird.js就行啦,标准的Promise API一个都不会少。

而且es6-promise的代码文件体积比bluebird小个3,4倍,也算一个好处吧(只能这么自我安慰了...哈哈)

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 一斤代码 来自: 原文地址

相关阅读