wx-miniprogram-boilerplate
基于 Gulp 构建的微信小程序开发工作流
适用场景
目前开发微信小程序时, 可选的技术方案大概有三种, 分别是:
微信小程序原生开发 https://developers.weixin.qq.com/miniprogram/dev/
使用 wepy 框架 https://tencent.github.io/wepy/index.html
使用 mpvue 框架 http://mpvue.com/
三种开发方案, 各有优劣. 使用第三方框架开发, 可以享受框架带来的开发便利, 但对于小程序新增的诸多特性和功能, 比如 WXS 模块, 自定义组件和插件等, 受制于第三方框架, 无法使用.
而原生小程序的开发模式, 又过于简陋, 就样式来说, 写惯了 less,stylus 和 sass 的同学一定无法忍受 wxss 的这种写法, 基于此, 决定使用 gulp 自动化工具来构建一套微信小程序开发的基础模板, 在完全保留微信小程序功能和特性的基础上, 又可以的使用 less 来写样式, 同时加入图片压缩, 命令行快速创建模板等特性, 如此开发, 快哉, 快哉!
特性
基于 gulp+less 构建的微信小程序工程项目
项目图片自动压缩
使用命令行快速创建 page,template 和 component
Getting Started
0. 开始之前, 请确保已经安装 node 和 npm, 全局安装 gulp-cli
$ npm install --global gulp-cli
1. 下载代码
$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git
2. 进目录, 安装依赖
$ cd wx-miniprogram-boilerplate && npm install
3. 编译代码, 生成 dist 目录, 使用开发者工具打开 dist 目录
$ npm run dev
4. 新建 page,template 或者 component
- $ gulp auto -d=mypage // 生成 page
- $ gulp auto -d=mytemplate -t=t // 生成 template
- $ gulp auto -d=mycomponent -t=c // 生成 component
5. 上传代码前编译
$ npm run build
6. 上传代码, 审核, 发版
工程结构
- wx-miniprogram-boilerplate
- dist // 编译后目录
- node_modules // 项目依赖
- src
- components // 微信小程序自定义组件
- images // 页面中的图片和 icon
- pages // 小程序 page 文件
- styles // ui 框架, 公共样式
- template // 模板
- utils // 公共 js 文件
- app.js
- app.json
- app.less
- project.config.json // 项目配置文件
- api.config.js // 项目 api 接口配置
- .gitignore
- package-lock.json
- package.json
- README.md
Gulp 说明
TODO
TODO
代码注释
eslint
规范命令行使用
来源: https://juejin.im/entry/5b3ba628e51d4519133f5dc8