微信小程序的开发增强工具。
vest 就像官方开发者工具的贴身小马甲,在原汁原味保留官方开发体验的基础上,提供了这些好处:
- 同时支持小程序项目和小程序 npm 包项目
- 支持在项目文件中插入环境变量,按环境编译小程序(基于 dotenv)
- 支持 @babel/presets-env 中定义的所有高级语法,包括异步函数(async function)
- 支持使用 sass 编写小程序样式,并且可以引入 npm 包中的第三方样式
- 自动构建小程序的 miniprogram_npm 文件夹,不需要在开发者工具上手动点“构建 npm”
- 允许在所有文件中使用相对于小程序代码根目录的相对路径,例如:
import request from '@/modules/request'
- 支持 ESLint
- 支持编写 js 单元测试(基于 Jest)
- vest-core/wx 对微信小程序的接口做了封装,让异步接口返回 Promise,可以配合 async/await 语法使用
- vest-core/reactivity 提供了跟 Vue 类似的响应式开发方案
- vest-core/store 借鉴 Vuex.Store,小程序的应用状态管理方案
- vest-form 基于 vest-core 的小程序表单组件库
首先,把 vest 作为 global package 安装:
npm i -g @mycolorway/vest-cli
创建新的 vest 项目:
vest create tower
进入项目根目录,编译 vest 项目,编译之前会自动安装项目依赖:
cd tower
vest build
或者:
vest dev
最后用微信开发者工具打开 vest 项目根目录(如果是小程序 npm 项目,需要打开根目录里的 demo
文件夹)。
更多关于 vest command 和 options 的使用方法可以参考:
vest -h
首先,在 vest 项目根目录里创建对应的 dot 文件,例如 .env.production
:
apiHost = 'https://x.zhiren.com'
amapKey = 'xxxxxxxxxxxxxxxxxxxx'
然后在任意项目文件中都可以通过 erb 语法插入定义好的环境变量,比如:
const apiHost = '<%= apiHost %>'
const amapKey = '<%= amapKey %>'
export { apiHost, amapKey }
确保 vest 项目的依赖中有 regenerator-runtime
(vest create
命令创建的项目会自动添加这个依赖),然后就可以直接在 js 文件中使用 async/await
了:
Page({
async onLoad() {
this.setData(await this.loadData())
}
})
vest 会自动将所有的 *.scss
文件编译为 *.wxss
文件。
但是有个需要注意的问题,小程序的 wxss 本身是支持 import 其他 wxss 文件的,scss 在编译的过程中会把 @import
语句直接编译成相应的 css 代码,也就是说 @import
语句没有办法保留到 wxss 文件里。
为了解决这个问题,vest 引入了一种特殊的 import 语法,例如:
// app.scss
/*= import 'styles/base' */
@import '~@mycolorway/weui-wxss/dist/style/weui.wxss';
会被编译为:
// app.wxss
@import 'styles/base';
.weui-xxx {
...
}
...
关于 npm 支持,请参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
vest 只是对“构建 npm”操作做了自动化处理。