issatan / wap-cli

小程序命令行工具

wap-cli

小程序 命令行工具

缘由：

github 上 labrador 和 wepy ,两个框架已经对小程序的开发已经封装得非常优雅了，并且支持NPM 包、优化小程序API、有状态管理。 但我个人实在不太想除了小程序的API之外，再去了解一套框架的API 了。
我的需求很简单：

1. 统一代码风格
2. 编译前检查可能存在的错误
3. 样式文件可使用变量
4. 样式文件引用的图片可自动base64化
5. 可配置忽略一些文件，不交给开发者工具打包
   所以自己实现了这么一套，因为还是自用，可配置的东西不多。需要更高的自定义化，推荐使用上面两个库，或者自己fork一份修改吧。

作用：

1. 创建小程序项目
2. 新建小程序页面

开发流程

1. 使用 npm install wap-cli -g 全局安装 wap命令行工具
2. wap create 你的项目名称 创建项目
3. npm run dev 进入开发模式
4. 使用IDE 打开代码，使用微信开发者工具 打开dist 目录，查看效果
   • 在 微信开发者工具 的 设置 - 编辑器 中勾选文件保存时自动编译小程序，可实现自动刷新。注意：其它选项请不要勾选！！！
5. 开发过程中可使用 wap g 你的页面 新建页面，在新建的文件中编写你的代码，保持即可看到效果
   • 因为小程序每个页面需要4个文件，分别是 .js,.json,.wxml,.wxss 文件，直接使用 wap g my/index 命令，将会在 pages 文件夹在生成 my文件夹，并生成 index.js, index.json, index.wxml, index.less 文件；并且会在 app.json 的pages自动添加文件路径。
6. 开发完成，使用npm run build 进行打包
   • npm run build 与 npm run dev 的区别在于，build 命令会压缩代码量

微信开发者工具

项目初始化后用 IDE打开项目根目录。
安装完依赖后使用 npm run dev ，然后打开微信web开发者工具新建项目，本地开发目录选择 dist目标目录。 请务必先进行 npm run dev 命令后再打开微信开发者工具。

注意事项：

1. 微信开发者工具中 项目 栏取消勾选 开启ES6 转ES5、开启代码压缩上传，因为wap都做了这些事件，让微信开发者工具 重复操作可能会导致不可预知的错误！！
2. 不要直接修改 dist目录下代码，因为每一次修改代码wap都会修改dist目录下的文件，在dist目录下修改的代码会被重置。
3. 微信开发者工具的设置-编辑器 中打开文件保存时自动编译小程序，可实现实时预览。
4. 开发完成使用 npm run build 命令后，微信开发者工具 可能会报错，这是因为wap 在 执行build时会删掉整个 dist 文件，此时重启 微信开发者工具即可。