현재 위챗 미니 프로그램을 개발할 때 사용할 수 있는 기술적 솔루션은 위챗 미니 프로그램 자체 개발, wepy 프레임워크 사용, mpvue 프레임워크 사용, taro 프레임워크 사용
지속적으로 업데이트할 예정이며, 귀하의 지원에 감사드립니다.
Gulp를 기반으로 구축된 WeChat 애플릿 개발 워크플로
세 가지 개발 옵션은 각각 장점과 단점이 있습니다. 타사 프레임워크를 사용하여 개발하는 경우 프레임워크가 제공하는 개발 편의성을 누릴 수 있습니다. 그러나 WXS 모듈, 맞춤 구성 요소 및 플러그인과 같은 미니 프로그램의 많은 새로운 기능과 기능이 제공됩니다. 등은 타사 프레임워크의 적용을 받지 않습니다.
네이티브 소규모 프로그램의 개발 모델은 너무 단순합니다. 스타일 면에서 stylus, sass를 쓰는 데 익숙한 학생들은 wxss의 쓰기 방법을 용납하지 않을 것입니다. gulp자동화 도구 WeChat 미니 프로그램 개발을 위한 기본 템플릿 세트입니다. WeChat 미니 프로그램의 기능과 특성을 완벽하게 유지하면서 less
를 사용하여 스타일을 작성할 수도 있습니다. , 이미지 압축 추가, 명령줄 빠른 템플릿 생성 등의 기능이 개발되어 행복하고 행복합니다! less
来写样式,同时加入图片压缩,命令行快速创建模板等特性,如此开发,快哉,快哉!
github走起
基于gulp+less
构建的微信小程序工程项目
项目图片自动压缩
ESLint代码检查
使用命令行快速创建page
、template
和component
$ npm install --global gulp-cli
$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git
$ cd wx-miniprogram-boilerplate && npm install
$ npm run dev
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的页面
$ npm run build
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
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: 为什么工作流中没有加入js转换,样式补全以及代码压缩?
A: 微信开发者工具中自带babel将ES6转ES5,样式补全以及js代码压缩等功能,在此工作流中不做额外添加。
Q: _template
目录的文件有什么用?
A: 使用gulp auto
命令自动生成文件,-s
参数可以指定copy的对象,默认情况下是以对应目录下文件夹为_template
中的文件为copy对象的。开发者可以根据业务需求,自定义_template
下的文件。
Q: _template
目录的文件是否会被编译到dist
github startFeatures
gulp+less
페이지
, 템플릿
및 컴포넌트
만들기프로젝트 구조
rrreeeGulp 설명rrreeeQ&A
왜 js 변환, 스타일 완성이 되나요? 워크플로에 코드 압축이 추가되지 않았나요? A:
WeChat 개발자 도구에는 ES6을 ES5로 변환하는 Babel, 스타일 완성, JS 코드 압축과 같은 기능이 포함되어 있습니다. 이 워크플로에는 추가 기능이 필요하지 않습니다. Q:🎜_template
디렉터리에 있는 파일은 어떤 용도로 사용되나요? 🎜🎜A:🎜 파일을 자동으로 생성하려면 gulp auto
명령을 사용하세요. -s
매개변수는 복사 개체를 지정할 수 있습니다. 기본적으로 해당 디렉터리의 폴더는 _template의 파일은 복사 개체입니다. 개발자는 비즈니스 요구에 따라 _template
아래의 파일을 사용자 정의할 수 있습니다. 🎜🎜🎜Q:🎜 _template
디렉터리의 파일이 dist
디렉터리로 컴파일되나요? 🎜🎜A:🎜 아니요. 🎜🎜TODO🎜🎜🎜🎜[x] 코드 주석🎜🎜🎜🎜[x] 표준 명령줄 사용법🎜🎜🎜🎜[x] eslint🎜🎜🎜🎜[ ] weui 등 일반적으로 사용되는 CSS 라이브러리 소개🎜 🎜 🎜🎜관련 권장 사항: 🎜🎜🎜 WeChat Mini 프로그램 개발에 대한 실용 튜토리얼 - WeChat Mini 프로그램 개발 및 실행🎜🎜🎜🎜WeChat Mini 프로그램 개발🎜🎜🎜🎜동영상: WeChat Mini 프로그램 개발에 대한 동영상 튜토리얼🎜🎜위 내용은 WeChat 애플릿 개발: Gulp를 기반으로 구축된 워크플로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!