微信小程序引入promise相关库及Android真机报错解决方案 -演道网
前言
如果你恰巧使用的是
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-promise min版只有6KB,很合适。 - 使用
常规使用即可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真机错误
如果你恰巧使用的是
bluebird
,又恰巧你只是在模拟器上测试或者你的真机是iOS系统,那么你不会发现异样,但是你用android机器一测试,就会报错了。
- 错误截图
- 错误分析
- 引入promise库,如bluebird
- 用小程序官方的方法写
由于第二个方案的复用性不够好,第一选择肯定是第一个方案,so,我开始找到bluebird引入到项目代码中,如下:
// request.js
var Promise require('bluebird.min');
文件结构如下:
/requests
/request.js
/bluebird.min.js
引入进去后,在开发工具上跑起来没问题,但是在手机(安卓)上预览的时候,发现有如下报错:
TypeError: Cannot read property 'createElement' of undefined
...
于是以为是bluebird的引入方式有问题,尝试用import
,还是报同样的错误。
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的小程序而言,轻量级能给项目省下更多的空间,且兼容性更强。
来源
微信小程序开发论坛
垂直微信小程序开发交流论坛
转载自演道,想查看更及时的互联网产品技术热点文章请点击http://go2live.cn