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 在现有的小顺序项目中初始化 EWA
ewa 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.js
module.exports = {
// 公用代码库 (node_modules 打包天生的文件)称号,默以为 vendors.js
commonModuleName: '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,默以为 false
simplifyPath: false,
// 文件夹快速援用
aliasDirs: [
'apis',
'assets',
'constants',
'utils'
],
// 须要拷贝的文件范例
copyFileTypes: [
'png',
'jpeg',
'jpg',
'gif',
'svg',
'ico'
],
// webpack loader 划定规矩
rules: [],
// webpack 插件
plugins: [],
// 开辟环境下是不是自动清算无用文件,默以为 true
autoCleanUnusedFiles: true,
// css 解析器,sass 或许 less,默以为 sass
cssParser: 'sass',
// 嫌不够天真?直接修正 webpack 设置
webpack: function(config) {
return config;
}
};
常见问题 & Tips
- 能够运用
@
来替代 源代码根目次 来引入代码或款式,如const utils = require('@/utils/util')
- WXSS 中能够直接编写 SCSS 款式代码
- WXSS 或 SCSS 中援用绝对途径须要在途径前加
~
标记,如:@import "~@/assets/styles/common.scss";
,详细缘由拜见: sass-loader