一款小程序增强开发工具 - EWA
EWA (微信小程序增强开发工具)
Enhanced Wechat App Development Toolkit (微信小程序增强开发工具)
项目地址:https://github.com/lyfeyaj/ewa,欢迎试用 ~
喜欢么?或者对您有用? ☞ 立即去 ⭐️ Star ⭐️ 一下 ☞
为什么开发这个工具?
厌倦了不停的对比 wepy 或者 mpvue 的特性,间歇性的踩雷,以及 code once, run everywhere
的幻想。只想给小程序开发插上效率的翅膀 ~
功能特性
- Async/Await 支持
- Javascript ES2017+ 语法
- 原生小程序所有功能,无需学习,极易上手
- 微信接口 Promise 化
- 支持安装 NPM 包
- 支持 SCSS(或 LESS) 以及 小于 16k 的 background-image
- 支持 source map, 方便调试
- 添加新页面或新组件无需重启编译
- 允许自定义编译流程
- 自动兼容旧版本手机中的显示样式
- 支持 WXSS 和 SCSS(或 LESS) 混用
- 代码混淆及高度压缩,节省包大小
更多特性正在赶来 ... 敬请期待 ?
- 可跨项目复用的小程序组件或页面(通过NPM包管理)
- Redux 支持
- Mixin 支持
安装
需要 node 版本 >= 8
npm i -g ewa-cli 或者 yarn global add ewa-cli
如何使用
创建新项目
ewa new your_project_name
集成到现有小程序项目,仅支持小程序原生开发项目转换
注意:使用此方法,请务必对项目代码做好备份!!!
cd your_project_dir && ewa init
启动
运行 npm start
即可启动实时编译
运行 npm run build
即可编译线上版本(相比实时编译而言,去除了 source map 并增加了代码压缩混淆等,体积更小)
上述命令运行成功后,可以看到本地多了个 dist
目录,这个目录里就是生成的小程序相关代码。
使用微信开发者工具选择 dist
目录打开,即可预览项目
目录结构
├── .ewa 特殊占位目录,用于检查是否为 ewa 项目
├── dist 小程序运行代码目录(该目录由ewa的start 或者 build指令自动编译生成,请不要直接修改该目录下的文件)
├── node_modules 外部依赖库
├── src 代码编写的目录(该目录为使用ewa后的开发目录)
│ ├── components 小程序组件目录
│ ├── pages 小程序页面目录
│ │ ├── index
│ │ │ ├── index.js
│ │ │ ├── index.wxml
│ │ │ └── index.wxss
│ │ └── logs
│ │ ├── logs.js
│ │ ├── logs.json
│ │ ├── logs.wxml
│ │ └── logs.wxss
│ ├── templates 小程序模版目录
│ ├── utils
│ │ └── util.js
│ ├── app.js 小程序入口文件
│ ├── app.json 小程序全局配置文件
│ ├── app.wxss 小程序全局样式文件
│ └── project.config.json 微信开发者工具小程序项目配置文件
├── ewa.config.js ewa 配置文件
├── .gitignore
├── .eslintrc.js eslint 配置
└── package.json
命令行
ewa <cmd> [args]命令:ewa new <projectName> 创建新的微信小程序项目 [别名: create]ewa init 在现有的小程序项目中初始化 EWAewa start 启动 EWA 小程序项目实时编译 [别名: dev]ewa build 编译小程序静态文件ewa clean 清理小程序静态文件ewa upgrade 升级 EWA 工具ewa generate <type> <name> 快速生成模版 [别名: g]选项:--version, -v 当前版本号 [布尔]--help, -h 获取使用帮助 [布尔]
微信接口 Promise 化
const { wx } = require('ewa');Page({async onLoad() {let { data } = await wx.request({ url: 'http://your_api_endpoint' });}
})
配置
ewa 通过 ewa.config.js
来支持个性化配置。如下所示:
// ewa.config.jsmodule.exports = {// 公用代码库 (node_modules 打包生成的文件)名称,默认为 vendors.jscommonModuleName: 'vendors.js',// 通用模块匹配模式,默认为 /[\\/](node_modules|utils|vendor)[\\/].+\.js/// 如需添加多个文件夹,可自定义正则,如 /[\\/](node_modules|utils|custom_dirname)[\\/].+\.js/commonModulePattern: /[\\/](node_modules|utils|vendor)[\\/].+\.js/,// 是否简化路径,作用于 page 和 component,如 index/index.wxml=> index.wxml,默认为 falsesimplifyPath: false,// 文件夹快捷引用aliasDirs: ['apis','assets','constants','utils'],// 需要拷贝的文件类型copyFileTypes: ['png','jpeg','jpg','gif','svg','ico'],// webpack loader 规则rules: [],// webpack 插件plugins: [],// 开发环境下是否自动清理无用文件,默认为 trueautoCleanUnusedFiles: true,// css 解析器,sass 或者 less,默认为 sasscssParser: 'sass',// 嫌不够灵活?直接修改 webpack 配置webpack: function(config) {return config;}
};
常见问题 & Tips
- 可以使用
@
来代替 源代码根目录 来引入代码或样式,如const utils = require('@/utils/util')
- WXSS 中可以直接编写 SCSS 样式代码
- WXSS 或 SCSS 中引用绝对路径需要在路径前加
~
符号,如:@import "~@/assets/styles/common.scss";
,具体原因参见: sass-loader
一款小程序增强开发工具 - EWA相关推荐
- 一款小程序软件开发报价包含哪些费用呢?
一般小程序软件开发报价,公司在制定软件开发报价的同时,会周时给客户附一份相对比较详细的价格清单,包含开发价格.开发周期.前期的商务沟通.双方的责任等,客户在收到详细的价格清单,就能更明白自己需要前期做 ...
- APP、小程序软件开发工具有哪些?
开发一款APP.小程序除了使用常规的编程语言开发,还会使用一些常规的软件开发工具,那么在实际的开发环境中,具体有哪些软件开发工具选择呢? 如果我们要做一款APP开发,安卓会用到Android Stud ...
- 微信小程序框架——微信小程序前端开发工具
微信小程序框架 框架 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 Java ...
- 微信小程序在开发工具上可以编译显示,但是手机预览请求不到数据
问题描述:在开发者工具调试时状态显示正常,但是上传发布后真机调试发现拉去不了数据,只是空壳! 在模拟器上正常看到请求数据了. ~~~那么然后你肯定想在手机微信上试下,于是你点了导航栏的"预览 ...
- 微信小程序入门的笔记(微信小程序的开发工具已经安装好了)
小程序项目的基本构成 1.pages 是用来存放所有小程序的页面 2.utils 用来存发工具性质的模块(例如:格式化时间的自定义模块) 3.app.js 小程序项目的入口文件 4.app.json ...
- API——微信小程序前端开发工具
API 框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等. 说明: wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBA ...
- 微信小程序——微信开发工具:网络连接失败
文章目录 问题描述 解决方法 问题描述 今天打开微信开发者工具突然显示网络连接失败,二维码也刷新不出来,如下图所示: 解决方法 1.点击"设置"->"代理设置&qu ...
- 【微信】微信小程序 微信开发工具 创建js文件报错 pages/module/module.js 出现脚本错误或者未正确调用 Page()...
创建报错pages/module/module.js 出现脚本错误或者未正确调用 Page() 解决方法: 在js文件中添加 Page({}) 转载于:https://www.cnblogs.com/ ...
- 小程序开发工具中黑马优购小程序tabs组件_还觉得小程序开发很难?这几款小程序开发工具小白都能用哦!...
玩过H5,微海报,直播之后-紧跟时代潮流的品牌公关狗们总是会在第一时间去研究时下最in的营销工具.而自从微信小程序公测之后,很多小伙伴也是中毒不浅,但是在技术开发的问题上,却不知道该如何下手.作为不会 ...
最新文章
- 【Gstreamer】在虚拟机中无法使用硬件加速:gstreamer1.0-vaapi
- 数据库事务原理及并发、死锁
- 互联网产品设计的“马化腾法则”
- 如果连接远程的mysql数据库连不上,可用下面的方法试下
- matlab::mex::ArgumentList outputs的创建
- MySQL 8.0版本安装后,安装目录下找不到my.ini文件
- oracle Interval 分区维护与管理要点
- html5 PHP 分片上传,H5分片上传含前端JS和后端处理(thinkphp)
- phoenix表操作
- 【数据科学】kNN算法笔记
- html word 打开,HTML以Word或Excel打开
- Java面试回忆录:java电子书免费
- 2020年启蒙及小学识字练字APP或小程序测评榜
- PDF编辑(PDF替换指定页)---亲测实用有效!!!
- 翼支付在Sharding-Sphere项目工作介绍
- 《认识突围:做复杂时代的明白人》读书笔记和自我理解感受
- 一个Java开发h5牌九棋牌网站开发细节
- 最小费用流算法不完全指南-2017华为软件精英挑战赛
- 百位数,十位数,个位数的求法
- mysql 5.7.22 winx64_MySQL 5.7.22 winx64 安装配置方法图文教程
热门文章
- linux nginx root目录,详解nginx.conf 中 root 目录设置问题
- 关于python中的复数类型、下列说法错误的是_关于 Python中的复数,下列说法错误的是( )_学小易找答案...
- Annotation概述
- 基于python的RFM模型和K-Means算法的用户特征分析
- dpdk安装在虚拟机上如何安装
- VSCode打开文件时出现乱码怎么办?
- (一)最短换乘路径推荐算法
- LED灯带蓝牙芯片控制解决方案
- 软件测试技术——单元测试和集成测试
- AlphaControls 控件 TsFrameBar 创建下拉式多级导航菜单