作者:cxl | 来源:互联网 | 2023-08-15 12:32
wx-miniprogram-boilerplate基于Gulp构建的微信小顺序开辟工作流实用场景现在开辟微信小顺序时,可选的手艺计划大概有四种,分别是:微信小顺序原生开辟运用we
wx-miniprogram-boilerplate
基于Gulp构建的微信小顺序开辟工作流
实用场景
现在开辟微信小顺序时,可选的手艺计划大概有四种,分别是:
- 微信小顺序原生开辟
- 运用wepy框架
- 运用mpvue框架
- 运用taro框架
三种开辟计划,各有好坏。运用第三方框架开辟,能够享用框架带来的开辟方便,但关于小顺序新增的诸多特征和功用,比方WXS模块、自定义组件和插件等,受制于第三方框架,没法运用。
而原生小顺序的开辟形式,又过于大略,就款式来讲,写惯了less,stylus和sass的同砚肯定没法忍受wxss的这类写法,基于此,决议运用gulp自动化东西来构建一套微信小顺序开辟的基本模板,在完整保存微信小顺序功用和特征的基本上,又能够的运用less
来写款式,同时到场图片紧缩,敕令行疾速建立模板等特征,云云开辟,快哉,快哉!
github走起
特征
- 基于
gulp+less
构建的微信小顺序工程项目 - 项目图片自动紧缩
- ESLint代码搜检
- 运用敕令行疾速建立
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 -p mypage 建立名为mypage的page文件
gulp auto -t mytpl 建立名为mytpl的template文件
gulp auto -c mycomponent 建立名为mycomponent的component文件
gulp auto -s index -p mypage 复制pages/index中的文件建立称号为mypage的页面
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
├── .eslintrc.js // ESLint
├── package-lock.json
├── package.json
└── README.md
Gulp申明
Tasks:
dev 开辟编译,同时监听文件变化
build 团体编译
clean 清空产出目次
wxml 编译wxml文件(仅仅copy)
js 编译js文件,同时举行ESLint语法搜检
json 编译json文件(仅仅copy)
wxss 编译less文件为wxss
img 编译紧缩图片文件
watch 监听开辟文件变化
auto 自动依据模板建立page,template或许component(小顺序自定义组件)
gulp auto
选项:
-s, --src copy的模板 [字符串] [默许值: "_template"]
-p, --page 天生的page称号 [字符串]
-t, --template 天生的template称号 [字符串]
-c, --component 天生的component称号 [字符串]
--msg 显现协助信息 [布尔]
示例:
gulp auto -p mypage 建立名为mypage的page文件
gulp auto -t mytpl 建立名为mytpl的template文件
gulp auto -c mycomponent 建立名为mycomponent的component文件
gulp auto -s index -p mypage 复制pages/index中的文件建立称号为mypage的页面
Q&A
Q: 为何工作流中没有到场js转换,款式补全以及代码紧缩?
A: 微信开辟者东西中自带babel将ES6转ES5,款式补全以及js代码紧缩等功用,在此工作流中不做分外增加。
Q: _template
目次的文件有什么用?
A: 运用gulp auto
敕令自动天生文件,-s
参数能够指定copy的对象,默许情况下是以对应目次下文件夹为_template
中的文件为copy对象的。开辟者能够依据营业需求,自定义_template
下的文件。
Q: _template
目次的文件是不是会被编译到dist
目次?
A: 不会。
TODO
- [x] 代码解释
- [x] 范例敕令行运用
- [x] eslint
- [ ] 引入经常使用的CSS库,比方weui之类的
末了
将延续更新,如果有新的发起,迎接建立Issue或发送PR,谢谢你的支撑和孝敬。