内容简介:目前开发微信小程序时,可选的技术方案大概有四种,分别是:三种开发方案,各有优劣。使用第三方框架开发,可以享受框架带来的开发便利,但对于小程序新增的诸多特性和功能,比如而原生小程序的开发模式,又过于简陋,就样式来说,写惯了less,stylus和sass的同学一定无法忍受wxss的这种写法,基于此,决定使用
目前开发微信小程序时,可选的技术方案大概有四种,分别是:
三种开发方案,各有优劣。使用第三方框架开发,可以享受框架带来的开发便利,但对于小程序新增的诸多特性和功能,比如 WXS模块 、 自定义组件 和 插件 等,受制于第三方框架,无法使用。
而原生小程序的开发模式,又过于简陋,就样式来说,写惯了less,stylus和sass的同学一定无法忍受wxss的这种写法,基于此,决定使用 gulp 自动化 工具 来构建一套微信小程序开发的基础模板,在完全保留微信小程序功能和特性的基础上,又可以的使用 less
来写样式,同时加入图片压缩,命令行快速创建模板等特性,如此开发,快哉,快哉!
特性
- 基于
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 ├── 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: 不会。
以上所述就是小编给大家介绍的《基于Gulp构建的微信小程序开发工作流》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- [JWFD开源工作流]JWFD开源工作流-矩阵引擎设计初步
- 前端工程工作流规范
- SharePoint PowerShell 启动工作流
- Git工作流规范 Beta
- 前端工作流中的hooks
- Unix 哲学指导工作流的构建
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
MacTalk 人生元编程
池建强 / 人民邮电出版社 / 2014-2-1 / 45
《MacTalk·人生元编程》是一本随笔文集,主要内容来自作者的微信公众平台“MacTalk By 池建强”。本书撰写于2013年,书中时间线却不止于此。作者以一个70 后程序员的笔触,立于Mac 之上,讲述技术与人文的故事,有历史,有明天,有技术,有人生。70 多篇文章划分为六大主题:Mac、程序员与编程、科技与人文、人物、工具、职场。篇篇独立成文,可拆可合,随时阅读。 此外,作者还对原来......一起来看看 《MacTalk 人生元编程》 这本书的介绍吧!