微信小程序引入promise报错
微信小程序引入 promise 相关库及 Android 真机报错解决方案
如果你恰巧使用的是 bluebird ,又恰巧你只是在模拟器上测试或者你的真机是iOS系统,你有必看看到最后,因为在Android的真机下,bluebird会报错
建议阅读对象: 在小程序中使用 Promise 或者使用 bluebird 报错的对象。
如果你现在还不知道 Promise 是什么,建议先去查看es6后再看,不然你不知道我在解决的问题
问题描述
2016.11.22微信官方开发工具更新了,版本为0.11.112200,结果在上面跑小程序代码的时候,发现报错 Promise is not a constructor .
初步判断应该是Promise在小程序代码中不能直接使用。
问题查找
查看官方更新文档
F:修复 同客户端保持一致,移除 Promise,开发者需要自行引入兼容库
官方建议引入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的小程序而言,轻量级能给项目省下更多的空间,且兼容性更强。
微信小程序引入promise报错相关推荐
- 微信小程序引入插件报错
最近需要引入一个微信小程序插件,引入之后就开始报错,这是因为微信小程序在引入插件之后不允许对App.Page进行修改,这是微信小程序的历史遗留问题. 解决方法:将微信小程序基础版本升级至2.6.3以上 ...
- uniapp引入自定义组件canvas 不现实,运行到微信小程序端时会报错
问题1 在引入自定义canvas组件时,在微信开发者工具中为空白,和h5中不现实 原因 在微信开发者工具 错误案例,没有加实例化this 在h5中不实现为空白是没有onReady里面实例化canvas ...
- 微信小程序渲染图片报错:[渲染层网络层错误] Failed to load local image resource
微信小程序渲染图片报错解决:[渲染层网络层错误] Failed to load local image resource 背景 通过用户点击上传图片,通过res.tempFilePaths拿到用户上传 ...
- 小程序 引入computed报错:Behaviors should be constructed with Behavior()
小程序引入computed报错:Behaviors should be constructed with Behavior() 解决方案: const computedBehavior = requi ...
- 微信小程序request:fail报错(包括不执行fail回调问题)
微信小程序request:fail报错(包括不执行fail回调的问题) 1. 不执行fail回调的问题 2. request:fail报错原因 2.1 小程序未配置域名导致的错误 2.2 微信小程序使 ...
- 微信小程序 常见问题(报错)
微信小程序 常见问题: 微信小程序项目结构 主要有四个文件类型,如下 WXML (WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. ...
- 微信小程序滴滴服务器报错,如何使用mpx框架(滴滴)给微信小程序分包
如何使用mpx框架(滴滴)给微信小程序分包 如何使用mpx框架(滴滴)给微信小程序分包 前提:使用mpx框架.核心包:@mpxjs/core.@mpxjs/webpack-plugin等 mpx开发文 ...
- 微信小程序中定位报错在app.json中声明permission字段
微信小程序在获取用户位置时后台报错 在搭建小程序的过程中出现报错,报错内容:getLocation需要在app.json中声明permission字段. 出现这类的提示,获取不到用户的地理位置,其实提 ...
- 微信小程序授权登录报错encryted_data或iv不合法,前端坑^-^~~
微信小程序授权登录原来用的wx.getUserInfo(),在用户未授权过的情况下调用此接口,将不再出现授权弹窗, 会直接进入 fail 回调(详见<公告>).在用户已授权的情况下调用此接 ...
最新文章
- 获取服务器路径的方式 【记录】
- request.getSession()
- oracle命令行导出、导入dmp文件
- 二进制在计算机电路中得到广泛的应用,模拟电子和数字电子技术的区别及应用...
- 单片机用python还是c语言_单片机为什么一直用C语言,不用其他编程语言?
- 【一鸣离职,左晖去世】互联网老兵给大家的三个建议
- Go gRPC 调试工具 grpcui
- 舒服了!淘宝、支付宝等阿里系App取消开屏广告:秒开
- checkbox页面全选
- java项目收获总结_java开发项目收获心得
- Sybase数据库按条件导出数据文件
- Android设置RecyclerView的Header和Footer
- [ecshop 二次开发经验] ecshop 手机版本 购车流程 最后没有支付按钮 ,清理没有用的支付方式 68ecshop
- 有哪些免费的CRM软件可以使用?
- PMP证书女生适合考吗
- 【斯坦福公开课-机器学习】1.机器学习的动机和应用(吴恩达 Andrew Ng)
- Excel导入CSV文件(解决数值转换文本问题)
- 太极定二仪,清浊始以形:红黑树的实现和性质
- Promodel®模拟和优化套装加速企业绩效改善 功能介绍
- [LeetCode] 871. Minimum Number of Refueling Stops
热门文章
- Error in v-on handler: “TypeError: this is not a function“
- Best practices for knowing your LIMIT and kicking %NOTFOUND
- 超全的开关插座布局,快来get!!!
- Linux mknod命令详解
- 搭建CloudStack环境(Windows版)
- Centos设置全局代理
- lisp二次开发 微盘_基于AutoLISP的AutoCAD二次开发研究_郭秀娟.pdf
- vue路由懒加载--2种实现方式
- 纯lua脚本搜索算法优化
- 小宇宙就要爆发了:Google 的虚拟人脑即将投入使用