全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[忻州seo公司选久澳]微信小程序开发:在Gulp的基础上构建的工作流程

  目前开发微信小程序时,可选的技术方案大概有四种,分别是…◁□▪:微信小程序原生开发,使用wepy框架,溧阳市小程序开发哪家好使用mpvue框架,使用taro框架

  将持续更新▼◇…■,感谢你的支持。
 

  

基于Gulp构建的微信小程序开发工作流

适用场景

 

  三种开发方案,各有优劣。站优云seo公司,使用第三方框架开发,可以享受框架带来的开发便利■◆●,但对于小程序新增的诸多特性和功能,比如WXS模块自定义组件插件等,受制于第三方框架,无法使用。

  而原生小程序的开发模式◆•,又过于简陋,就样式来说=▼,写惯了less,stylus和sass的同学一定无法忍受wxss的这种写法,[忻州seo公司选久澳]基于此,决定使用gulp自动化工具来构建一套微信小程序开发的基础模板,在完全保留微信小程序功能和特性的基础上,又可以的使用less来写样式,同时加入图片压缩,命令行快速创建模板等特性◇▪,如此开发○▲☆•,快哉,快哉!

  github走起

  

特性

  •  

      基于gulp+less构建的微信小程序工程项目

      

  •  

      项目图片自动压缩

      

  •  

      ESLint代码检查

      

  •  

      使用命令行快速创建pagetemplatecomponent

      

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之类的

      

 

  相关推荐:

  微信小程序开发实战教程之开发跑步微信小程序

  微信小程序开发

  视频:开发微信小程序视频教程

  以上就是微信小程序开发:在Gulp的基础上构建的工作流程的详细内容◇◆△▲,更多请关注久澳传媒编程栏目其它相关文章!

[忻州seo公司选久澳]微信小程序开发:在Gulp的基础上构建的工作流程

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。