前言

小程序本身是不支持async/await语法的,但有些应用场景,我们使用async/await会使得代码更简洁,也更易于维护,用过都知道是有多爽的。既然小程序不支持,那我们可以借助 fackbook 开源的 regenerator 来完成这一功能。 前面我也百度过一些方法,但很多方法都行不通,只能从其中找到一些线索,再加上实践来验证,最后在这里记录下成功的解决方法。

准备工作

1. 小程序目录下,新建一个packpage.json,通过命令行执行 npm init -y 可以快速创建

2. 安装 regenerator-runtime,命令行执行 npm i regenerator-runtime

3. 打开小程序开发者工具,点击右上角的工具选项,点击构建npm,稍等几秒,小程序目录下会出现 miniprogram_npm 文件夹,里面存放的就是构建完成的npm包

4. 开发者工具右上角 本地设置 勾选 使用npm模块

npm构建参考文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

如何使用

引入 regenerator-runtime

import regeneratorRuntime from 'regenerator-runtime'

引入的名字必须是 regeneratorRuntime ,这个不是自定义的,必须就是这个名字!

然后就可以正常使用 async/await

一些意外

完成上面的步骤后,我在使用时会报一个错误

后面发现需要删除 regenerator-runtime 文件中一些源码后,才能正常使用。(不知道是哪里出了问题,假如你们在使用时出现这个错误,再参考下面的解决方法)

进入 miniprogram_npm/regenerator-runtime/index.js,大约732行处

删除 Function("r", "regeneratorRuntime = r")(runtime) 即可

最后

上传代码时,需要注意,有时候会忽略上传包的 index.js.map,可能会导致上线后包文件使用失效。这种情况可以尝试重新安装。

多次尝试安装后还是无法解决的话,可以使用不构建npm的方法:

https://www.cnblogs.com/chanwahfung/p/11681881.html

小程序如何支持使用 async/await (构建npm版)的更多相关文章

  1. 小程序如何支持使用 async/await

    下载 regenerator-runtime npm i regenerator-runtime 如何使用 在小程序中,不认识 node_modules 文件夹,无法通过以下方法来直接找到包文件 im ...

  2. 小程序中支持es7的async语法

    小程序中支持es7的async语法 es7的 async 号称是解决回调的最终⽅案 在⼩程序的开发⼯具中,勾选 es6转es5语法 下载 facebook的regenerator库中的 在⼩程序⽬录下 ...

  3. 我 支持 使用 async await

    这篇文章原来的 标题 是 <我 反对 使用 async await>, 但经过后来的一些研究, 发现 async await 是 良性 的, 所以 我把 标题 改成了 <我 支持 使 ...

  4. C#Framework4.0支持异步async/await语法

    由于用户使用的是XP系统,但是程序里异步都是通过async/await代码来实现的,然而async/await需要Framework4.5版本才可以,而XP系统最高只能支持到Framework4.0, ...

  5. 微信小程序分享支持自定义封面图

    微信小程序又发布更新了,刚好昨天支付宝也发布小程序,不能让它抢了风头的节奏.微信小程序主要更新如下:“小程序分享支持自定义封面图,公众号及小程序客服可发送小程序卡片.同时,我们还开放了获取发票抬头,指 ...

  6. 微信小程序如何提交审核并发布?发布问题:小程序只支持https访问

    http://www.jisuapp.cn/news/305.html 发布问题:1.小程序只支持https访问 2.要配置服务域名

  7. 微信小程序中支持es7的async语法

    最近在原生的微信小程序项目中需要把原来es6的promise方法改成es7的async await,这样代码看起来更直观,也方便以后的兄弟维护,但是改了代码之后项目就报错了. 提示的错误是:regen ...

  8. 小程序不支持wx.request同步请求解决方法

    小程序为了用户体验,所有的request均为异步请求,不会阻塞程序运行 百牛信息技术bainiu.ltd整理发布于博客园 所以当你需要同步请求,锁死操作时,最好将所有的逻辑写在success:func ...

  9. 微信小程序实战练习(仿五洲到家微信版)

    github地址(欢迎star):https://github.com/xiaobinwu/dj 版本:0.15.152900(暂未升级原因:升级后需要图片无法本地引用,必须使用image或是远程路径 ...

随机推荐

  1. arduino体感控制简单版

    https://learn.sparkfun.com/tutorials/apds-9960-rgb-and-gesture-sensor-hookup-guide/all 硬件连线 关键 VCC=  ...

  2. [WPF] Caliburn Micro学习二 Infrastructure

    Caliburn Micro学习一 Installation http://blog.csdn.net/alvachien/article/details/12985415 Step 1. 无论是通过 ...

  3. 【Spring】Spring的定时任务注解@Scheduled原来如此简单

    1 简介 定时任务的实现非常多,JDK的Timer.Spring提供的轻量级的Scheduled Task.QuartZ和Linux Cron等,还有一些分布式的任务调度框架.本文主要介绍Schedu ...

  4. Web前端JS实现轮播图原理

    实现轮播图有很多方式,但是html的结构都是一样的.本文使用了Jquery框架,Dom操作更加方便灵活 html部分: <div class="banner"> < ...

  5. python:爬虫0

    什么是网页爬虫,也叫网页蜘蛛.把互联网比作一个蜘蛛网,有好多节点,这个蜘蛛在网上爬来爬去,对对网页中的每个关键字进行建立索引,然后建立索引数据库,经过复杂的排序算法后,这些算法的结果将按照相关度的高低 ...

  6. windows 通过appache链接cgi程序

    #!D:\Python27\ print 'Content-type: text/plain' print print 'Hello, world' 出现错误 The server encounter ...

  7. ArrayList和LinkedList的源码学习,理解两者在插入、删除、和查找的性能差异

    List的使用 List的子类 1). ArrayList 数据结构:数组 2). Vector 数据结构:数组 3). LinkedList 数据结构:循环双向链表 ArrayList .Vecto ...

  8. Flex利用JavaScript执行cmd命令

    Flex: //注册js事件            protected function init():void            {                ExternalInterfa ...

  9. 小白学 Python 爬虫(6):前置准备(五)爬虫框架的安装

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  10. 基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化

    前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...