WeApp Workflow
1.0.0
WeApp-Workflow: Gulp를 기반으로 한 WeChat 애플릿 프런트엔드 개발 워크플로
WeApp-Workflow는 WeChat 미니 프로그램 개발을 위해 특별히 제작된 프런트 엔드 개발 워크플로로 Gulp 4를 기반으로 개발되었으며 WeChat 미니 프로그램 개발 과정에서 프런트 엔드 코드 작성의 문제점을 워크플로를 통해 해결하는 것을 목표로 합니다. .
프로젝트 홈페이지: https://github.com/Jeff2Ma/WeApp-Workflow
기사 소개: https://devework.com/weapp-workflow.html
Sass 전처리기를 사용하면 CSS 작성을 더 원활하게 만들 수 있습니다. .scss 파일은 WeChat 애플릿에서 지원하는 .wxss 파일로 실시간으로 컴파일됩니다.
공식적으로 권장하는 아이폰6를 표준 디자인 포맷으로 사용하여, 개발 과정에서 px 직접 작성하면 자동으로 rpx 로 변환이 가능합니다.
// Input: src/pages/index/index.scss
. index__header {
font-size : 14 px ;
margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}
// Output: dist/pages/index/index.wxss
. index__header {
font-size : 28 rpx ;
margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}실시간으로 이미지를 압축하고 증분 방식을 사용하여 반복적인 압축을 방지합니다.
애플릿은 상대 경로가 있는 이미지 참조를 지원하지 않지만 https 프로토콜 헤더가 있는 절대 경로만 지원합니다. 이 워크플로우는 WXML 및 WXSS 파일에서 참조되는 상대 경로 이미지를 클라우드 스토리지 CDN에 업로드하거나 FTP/SFTP 프로토콜을 통해 개인 서버 공간에 업로드할 수 있습니다. 현재 Tencent Cloud와 Qiniu Cloud를 지원합니다.
// Input: src/pages/index/index.wxml
< image src =" %ASSETS_IMG%/t.png " > </ image >
// Output: dist/pages/index/index.wxml
< image src =" https://cdn.devework.com/weapp/devework/t.png " > </ image >애플릿은 상대 경로가 있는 글꼴 파일을 지원하지 않습니다. 이 작업 흐름은 CSS에서 참조되는 글꼴 파일을 base64로 코드 변환하고 원래 경로를 바꿀 수 있습니다.
// Input: src/pages/index/index.scss
@font-face {
font-family: 'fontello';
src: url("assets/fonts/fontello.ttf") format('truetype');
}
// Output: dist/pages/index/index.wxss
@font-face {
font-family: 'fontello';
src: url(data:application/font-sfnt;charset=utf-8;base64,AAEAAAAPAIAA....FsASNsQIARAAA) format("truetype");
}
이 기능은 postcss-lazysprite 플러그인에 의해 구동됩니다. 개발 중에 이미지를 준비한 후 @lazysprite "xxxx" 와 같은 코드를 작성하면 스프라이트 이미지가 자동으로 빌드되고 해당 CSS가 생성됩니다.
// Input: src/app.scss
@lazysprite "filetype" ;
/ / Output : d is t / app. wxss
. icon-filetype-doc {
background-image : url(.. / sprites/filetype.png);
background-position : 0 0 ;
width : 80 px ;
height : 80 px ;
}
. icon-filetype-pdf {
background-image : url(.. / sprites/filetype.png);
background-position : -90 px 0 ;
width : 80 px ;
height : 80 px ;
}
@media only screen and ( -webkit-min-device-pixel-ratio : 2 ) , only screen and ( min-device-pixel-ratio : 2 ) {
. icon-filetype-doc {
background-image : url (.. / sprites / filetype@ 2 x.png);
background-position : 0 0 ;
background-size : 170 px 170 px ;
}
. icon-filetype-pdf {
background-image : url (.. / sprites / filetype@ 2 x.png);
background-position : -90 px 0 ;
background-size : 170 px 170 px ;
}
}최신 Gulp 4 버전의 새로운 기능을 사용하여 작업 흐름을 더 빠르게 실행하세요.
코어에는 기본 작업이 하나만 있습니다. 합리적인 작업 일치 메커니즘은 번거로운 프로세스와 터미널의 앞뒤 실행을 줄여 개발을 더욱 편리하게 만듭니다.
Sass의 증분 컴파일과 이미지 관련 작업의 증분 업데이트 메커니즘을 도입하여 워크플로를 더 빠르게 실행합니다.
.
├── config.custom.js // gulp自定义配置，会覆盖config.js
├── config.js // gulp 配置文件
├── gulpfile.js
├── package.json
├── src // 开发目录
│ ├── app.js
│ ├── app.json
│ ├── app.scss
│ ├── assets // 开发相关的静态文件原始资源
│ │ ├── fonts //字体文件
│ │ ├── images // 图片文件，可被上传到CDN
│ │ ├── scss // 一般放置SCSS 的minxins 等被import 的SCSS 文件
│ │ └── sprites // 生成雪碧图小图的目录
│ ├── image // 小程序专用的图片资源（如tabbar icon）目录
│ ├── pages
│ └── utils
├── tmp // 通过src 目录编译后生成的缓存目录
└── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录
Node 버전은 v4 이상을 권장합니다. 이 워크플로에는 타사 종속성이 포함되어 있으므로 과학적인 인터넷 환경에서 작동하는 것이 좋습니다.
0. 먼저 전역적으로 Gulp-cli를 팔로우하세요.
npm install gulp-cli -g
1. git clone 통해 프로젝트 파일을 다운로드합니다.
git clone https://github.com/Jeff2Ma/WeApp-Workflow
2. .git 디렉터리를 삭제하는 것이 좋습니다. (Windows 사용자는 수동으로 삭제하세요.)
cd WeApp-Workflow
rm -rf .git
3. 필요한 모듈 설치
npm i
4. 개발 시작
config.js 복사하여 config.custom.js 로 이름을 바꾼 다음 실제 필요에 따라 관련 구성 정보를 다시 작성하는 것이 좋습니다(각 구성 항목에는 설명이 있습니다). 그런 다음 터미널에서 다음 명령을 실행하여 활성화합니다.
gulp
남은 작업: gulp clean : dist , tmp 폴더 지우기.
위 작업을 완료한 후 "WeChat 웹 개발자 도구"(v1.x 기반, 더 이상 v0.x와 호환되지 않음)에서 관련 설정을 지정해야 합니다.
1. 새 프로젝트를 생성하고 전체 프로젝트 디렉터리, 즉 project.config.json 이 위치한 디렉터리를 프로젝트 디렉터리로 직접 선택합니다.
다음으로 일반 개발에 들어갑니다. 개발 프로세스 중에 타사 편집기(WebStorm, Sublime Text 등)를 사용하여 src 디렉터리의 파일을 편집합니다 . 수정 사항을 저장한 후 gulp 프로세스는 이를 dist 해당 위치에 실시간으로 컴파일합니다. 예배 규칙서. WeChat 웹 개발자 도구는 자동으로 컴파일 및 새로고침되며 현재는 미리보기 기능으로만 사용됩니다 .
개발 핵심 포인트:
SCSS 개발 : src/pages/page-name 바로 아래에서 page-name.scss 편집하면 자동으로 page-name.wxss 로 변환되어 dist 디렉터리의 해당 위치에 배치됩니다. 수치가 포함된 개발 과정에서 px 단위를 직접 작성하면(iPhone6 표준 디자인 초안에 따라) 자동으로 계산되어 rpx 단위로 변환됩니다. 특수한 상황으로 변환을 원하지 않는 경우에는 PX 대문자로 적어주세요.
WXML 개발 : CDN 이미지 기능을 사용하려면 특별한 이미지 경로를 작성해야 한다는 점을 제외하면 특별한 요구 사항이 없습니다.
WebFont : 먼저 Fontell.com과 같은 웹사이트에서 스프라이트 이미지를 만든 다음 ttf 형식 파일을 src/assets/fonts 로 가져옵니다. 그런 다음 일반적인 방법으로 인용하여 자동으로 base64 트랜스코딩할 수 있습니다.
CDN 이미지 : (이 기능은 기본적으로 꺼져 있으며 설정에서 켜야 합니다.) WeChat 애플릿의 wxss 또는 wxml은 상대 경로가 있는 이미지를 지원하지 않으며 https로 시작하는 절대 경로가 필요합니다. 이 워크플로우를 사용하면 개발 중에 직접 상대 경로를 작성할 수 있으며, 워크플로우는 CDN에 업로드하고 원래 경로를 바꾸는 데 도움이 됩니다. 이러한 이미지는 src/assets/images 아래에 배치한 다음 %ASSETS_IMG%/filename.png 사용하여 wxml 또는 CSS에 경로를 작성해야 합니다. %ASSETS_IMG% 는 후속 문자열 교체를 위한 사용자 정의 디렉터리입니다.
스프라이트 그림 : 우선 작은 프로그램에서는 스프라이트 그림을 사용하지 않는 것이 좋으며, 단일 그림이나 웹폰트를 직접 사용하는 것이 좋습니다. 사용해야 하는 경우 코드의 작은 프로그램 예제에 따라 src/assets/sprites 아래에 작은 그림 디렉터리를 배치한 다음 SCSS의 @lazysprite "xxxx" 통해 호출합니다(호출 코드를 app.scss ). 스프라이트 이미지의 고급 사용법을 보려면 여기를 클릭하십시오.
Q: 워크플로우에 AutoPrefixer 기능이 없는 이유는 무엇입니까?
A: WeChat 개발자 도구의 "프로젝트"에 있는 "스타일 완성" 옵션이 이미 이 기능을 제공하고 있기 때문입니다.
Q: 워크플로에 구성된 바벨의 ES6에서 ES5로의 변환 기능이 없는 이유는 무엇입니까?
A: 위와 같이 WeChat 개발자 도구가 제공되었습니다.
Q: WePY와 같은 소규모 프로그램 개발 프레임워크와 비교하면 어떤 장점이 있나요?
A: WeChat 결제팀이 개발한 WePY는 정말 좋은 도구입니다. 같은 수준의 WePY와 비교해 보면 WeApp-Workflow는 전혀 장점이 없습니다. WeApp-Workflow는 개발 프레임워크가 아닌 워크플로 도구로, 소규모 프로그램의 CSS 개발에 중점을 둡니다. 일부 개발자의 경우 소규모 프로그램에는 WePY만큼 무거운 개발 프레임워크가 필요하지 않습니다.
Q: WeApp-Workflow에는 해당하는 특수 컴파일 작업( gulp build , npm run build 와 유사)이 없나요?
A: 네, WeApp-Workflow는 복잡한 작은 프로그램보다는 "작은" 작은 프로그램을 개발하는 데 적합하기 때문에 개발 속도, 코드 양 등을 고려하면 특별한 개발 단계와 단일 작업(개발)이 없습니다. 완료 단계 중에 추가적인 컴파일 작업(buid)이 추가됩니다. 단 하나의 작업입니다.
이러한 소규모 프로그램은 WeApp-Workflow를 개발 워크플로로 사용합니다(사례를 추가하려면 PR을 보내셔도 됩니다).
tmt-워크플로
QMUI_웹
postcss-lazysprite
꿀꺽 꿀꺽-qcloud-업로드
단위 테스트 추가
ES6 재작성
FTP/SFTP 서버 기능에 업로드
Qiniu Cloud Storage를 지원하는 CDN
피드백이나 기능 제안이 있는 경우 언제든지 이슈를 생성하거나 Pull Request를 보내주세요. 여러분의 지원과 기여에 감사드립니다.
