wechat h5 boilerplate
v0.3.6
"H5 제작을 PPT제작만큼 쉽게 만들어보세요!"
Wechat-H5-Boilerplate(이하 WHB)는 H5 동적 템플릿으로, WeChat에 특별히 최적화되었으며 전체 화면 스크롤 H5 프로모션 페이지를 빠르게 구축하는 데 적합합니다.
예를 들어 텍스트에 애니메이션을 적용하려면 코드 한 줄만 있으면 됩니다.
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
휴대폰으로 아래 주소를 방문하시거나 아래 QR코드를 스캔해주세요.
https://panteng.github.io/wechat-h5-boilerplate/
/app
/dist --> 项目文件的分发版本，所有的文件均由Gulp任务生成，请勿手动修改
/audios --> 从app/src/audios复制而来
/fonts --> 从app/src/fonts和在config/vendors.js中指定的第三方字体复制而来
/images --> 由app/src/images下的图片经Imagemin压缩优化生成
/javascripts --> 由app/src/javascripts下的文件经Browserify打包生成
/stylesheets --> 由app/src/scss下的文件编译生成
index.html --> 由app/src/index.html经Gulp-inject插入bundle.(min.).css和bundle.(min.).js后生成
/src --> 项目的源码，所有文件都可编辑
/audios --> 存放音频、视频文件
/fonts --> 存放字体文件
/images --> 存放图片文件
/javascripts --> JS源文件，经Browserify打包后生成app/dist/javascripts/bundle.js
/scss --> SCSS文件，经过编译后生成app/dist/stylesheets/bundle.css
index.html --> 页面HTML，经过Gulp-inject处理后生成app/dist/index.html
/config
vendors.js --> 第三方CSS、JS、Fonts列表，详见vendors.js说明
.gitignore
gulpfile.js --> Gulp任务
package.json
이 프로젝트를 로컬로 복제
콘솔에서 실행:
git clone --depth=1 https://github.com/panteng/wechat-h5-boilerplate.git <your-project-name>
cd <your-project-name>
또는 릴리스 페이지에서 직접 WHB 소스 코드 압축 패키지를 다운로드할 수 있습니다.
타사 패키지 설치
WHB는 NPM을 사용하여 타사 패키지를 관리합니다.
콘솔에서 실행:
npm install
참고 1: 중국의 열악한 네트워크 환경으로 인해 NPM에서 패키지를 다운로드하는 것은 매우 느립니다. Taobao NPM 미러 CNPM을 사용하는 것이 좋습니다. CNPM 설치 방법은 공식 홈페이지 안내를 참고하세요. CNPM v4.2.0에는 Windows 시스템에 버그가 있습니다(#97 참조). Windows 사용자는 이 버전을 사용하면 안 됩니다. 공식에서는 이 버전을 사용하면 안 된다고 했지만 Windows에서 CNPM을 사용하여 필요한 패키지를 설치하면 여전히 오류가 발생합니다. node-gyp 컴파일. 또한 내장된 NPM 버전이 너무 오래되었기 때문에 CNPM v3.4.1을 사용하지 않는 것이 좋습니다. 미러웨어 하우스를 사용하여 npm install --registry=https://registry.npm.taobao.org -d 직접 설치하는 것이 좋습니다. (설치 과정에서 자세한 정보를 표시하기 위해 -d를 추가했습니다. 저는 개인적으로 네트워크나 기타 문제로 인해 설치 과정이 중단되었는지 확인하기 위해 이 방법을 자주 사용합니다.)
참고 2: WHB에 필요한 일부 타사 패키지는 node-gyp에 따라 다릅니다. 이러한 패키지를 설치하기 전에 node-gyp가 시스템에 올바르게 설치되었는지 확인하십시오. 설치 방법은 node-gyp 공식 문서를 참고하세요. Windows 사용자는 Windows에 node-gyp을 설치하는 것이 고통스럽기 때문에 약간의 문제가 있을 수 있습니다.
참고 3: Windows 사용자는 경로가 너무 깊은 디렉터리에 WHB를 배치하지 마십시오. Windows에서는 255자 미만의 경로만 지원하기 때문에 이 프로젝트를 깊은 경로가 있는 디렉터리에 배치하면 node-gyp 컴파일에 실패할 가능성이 매우 높습니다.
참고 4: Windows 사용자의 경우 node-gyp를 올바르게 설치했지만 npm install -d 실행 시 여전히 오류가 발생하고 오류 메시지가 "EPERM, 작업이 허용되지 않음"인 경우 npm install -d --force 시도하십시오.
개발 시작
콘솔에서 실행:
gulp dev
잠시 후 브라우저 창이 자동으로 열리고 주소 localhost:3000 가리킵니다. app/src 아래의 파일을 수정하면 브라우저 페이지가 자동으로 새로 고쳐집니다.
gulp prod 작업 실행
콘솔에서 실행:
gulp prod
이 작업은 app/dist 폴더에 두 개의 새로운 파일인 Bundle.min.css 및 Bundle.min.js를 생성하고 원본 Bundle.css 및 Bundle.js를 삭제합니다.
게시할 때 app/dist 폴더에 있는 파일만 서버에 업로드하면 되며 다른 파일은 필요하지 않습니다. app/dist의 CSS, JS 및 이미지 파일은 압축되고 최적화됩니다.
애니메이션 로딩
H5 페이지에는 일반적으로 많은 그림과 배경 음악이 포함되어 있으므로 보기 좋은 로딩 애니메이션이 필요합니다.
일부 CSS3 애니메이션을 직접 작성하고, app/src/index.html의 <div class="loading-overlay"></div> 에 애니메이션 관련 HTML 코드를 삽입하고, 관련 CSS3 애니메이션 코드를 app/ src/scss.
문제를 해결하고 싶다면 loading.io 웹사이트가 미리 만들어진 로딩 애니메이션을 생성하는 데 도움을 줄 수 있습니다(열 수 없으면 벽을 통과하세요). SVG 형식의 애니메이션 이미지 파일을 생성하고 파일을 loading.svg로 변경한 후 app/src/images/ 아래에 동일한 이름으로 파일을 바꾸는 것이 좋습니다.
또한 뛰어난 CSS3 로딩 애니메이션 라이브러리를 공유해 보세요:
페이지 전환 효과
페이지 전환은 현재 Swiper와 함께 제공되는 네 가지 유형인 슬라이드, 페이드, 뒤집기 및 커버플로우만 지원합니다(큐브는 이 시나리오를 충족하지 않기 때문에 지원하지 않습니다). 자세한 내용은 Swiper 문서의 효과 섹션을 참조하세요.
WHB는 아직 페이지마다 다른 전환 방법을 지정할 수 없습니다. 후속 버전에서는 이 기능을 추가하고 더 멋진 전환 방법을 고려할 것입니다.
페이지 내 요소(그림, 텍스트) 애니메이션
WHB의 그림과 텍스트에 애니메이션을 추가하는 것은 매우 쉽습니다.
예를 들어 첫 번째 페이지에 애니메이션으로 표시해야 하는 텍스트 단락이 있습니다.
<div class="swiper-slide slide-1">
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
</div>
이 텍스트에 animated 클래스 이름을 추가하고 data-ani-name (애니메이션 이름), data-ani-duration (애니메이션 실행 시간) 및 data-ani-delay (애니메이션 지연 시간) 세 가지 속성을 지정하면 됩니다.
WHB의 애니메이션은 Animate.css에서 제공됩니다. 지원되는 애니메이션 이름은 Animate.css 공식 웹사이트에서 확인할 수 있습니다.
글꼴 아이콘
WHB와 함께 제공되는 글꼴 아이콘 파일에는 두 개의 아이콘, 즉 오른쪽 상단 모서리에 있는 음악 기호와 화면 하단에 있는 업스트로크 프롬프트 기호만 있습니다. 더 많은 아이콘이 필요한 경우 Icomoon.io를 사용하여 사용자 정의하고 필요한 아이콘을 선택한 다음(직접 디자인하고 업로드할 수도 있음) 글꼴 파일로 패키지하는 것이 좋습니다.
Font-Awesome과 같은 일반 글꼴 패키지를 사용하지 않는 것이 권장되는 이유는 Font-Awesome에 아이콘이 많아서 글꼴 파일의 용량이 상대적으로 크고, 대부분의 아이콘을 사용하지 않기 때문입니다. 글꼴 파일이 크면 사용자 장치에서 웹페이지 로드 속도가 느려질 수 있습니다.
이미지 최적화
WHB에는 app/src/images 아래에 있는 이미지의 손실 압축 기능이 제공되지만, 이미지를 app/src/images 폴더에 넣기 전에 적절한 크기로 조정, 통합과 같은 필요한 수동 최적화를 수행하는 것이 좋습니다. 작은 그림을 스프라이트로 만드는 등
유용한 이미지 최적화 및 처리 웹사이트를 공유하세요:
배경 음악
배경음악 파일 형식은 mp3를 권장하며, 크기는 1MB를 넘지 않는 것이 좋습니다. Adobe Audition과 같은 전문 오디오 편집 소프트웨어를 사용하여 배경 음악을 가로채서 압축할 수 있습니다.
꼭 필요하지 않은 경우, 사용자에게 방해가 되는 배경음악을 설정하지 마세요.
모바일 단말기 디버깅
먼저 gulp dev 작업을 실행하고 콘솔 출력에서 다음 단락을 찾습니다.
[BS] Access URLs:
----------------------------------------
Local: http://localhost:3000
External: http://192.168.187.101:3000
----------------------------------------
UI: http://localhost:3001
UI External: http://192.168.187.101:3001
----------------------------------------
그런 다음 모바일 장치(휴대폰, 태블릿 등)와 컴퓨터가 동일한 LAN에 있는지 확인하세요. (가장 간단한 방법은 컴퓨터, 휴대폰, 태블릿을 동일한 WIFI에 연결하거나 컴퓨터가 라우터에 연결되어 있는 것입니다. 네트워크 케이블을 사용하고 휴대폰과 태블릿은 라우터에서 발행한 동일한 WIFI에 연결됩니다.
마지막으로 모바일 장치에서 브라우저를 열고 위 세 번째 줄의 외부에 해당하는 URL에 액세스합니다. (귀하의 URL은 위에서 작성한 것과 다를 수 있으므로 자신의 콘솔에 표시된 외부 URL을 참조하십시오.)
이제 app/src 아래의 파일을 수정하면 이 URL에 액세스하는 모든 모바일 장치와 컴퓨터가 자동으로 브라우저 페이지를 새로 고칩니다. 한 장치에서 수행하는 작업은 다른 장치에도 실시간으로 동기화됩니다(예: 손가락으로 페이지 위로 스와이프).
반응형 디자인
요소의 크기, 여백, 글꼴 크기를 설정하려면 px 대신 rem을 사용하는 것이 좋습니다.
WHB에서는 1rem에 해당하는 px 값이 기기 화면 크기에 따라 변경됩니다.
화면 너비가 400px 미만인 장치에서는 1rem = 16px입니다.
화면 너비가 400px보다 크고 600px보다 작은 장치에서는 1rem = 22px입니다.
화면 너비가 600px보다 큰 장치에서는 1rem = 32px입니다.
app/src/scss/base/_base.scss에서 미디어 쿼리에 대한 코드를 참조하세요.
config/vendors.js 설명
Vendors.js 파일은 타사 CSS, JS 및 글꼴 정보를 등록하는 데 사용됩니다. Vendors.js에 등록된 모든 타사 파일은 어떤 형태로든 프로젝트에 추가됩니다. 예를 들어, 이제 Vendors.js가 다음과 같다면:
module.exports = {
stylesheets: [
'node_modules/normalize.css/normalize.css',
'node_modules/swiper/dist/css/swiper.css',
'node_modules/animate.css/animate.css',
'node_modules/font-awesome/css/font-awesome.css'
],
javascripts: [
'node_modules/jquery/dist/jquery.js'，
'node_modules/swiper/dist/js/swiper.jquery.js'
],
fonts: [
'node_modules/font-awesome/fonts/*'
]
};
Vendors.js 스타일시트의 모든 CSS 파일은 프로젝트에서 최종 생성된 Bundle.css에 추가됩니다.
Vendors.js의 자바스크립트에 있는 모든 js 파일은 프로젝트에서 최종 생성된 Bundle.js에 추가됩니다.
Vendors.js 글꼴의 모든 파일은 app/dist/fonts 폴더에 복사됩니다.
Vendors.js에 등록된 파일은 Bundle.css 및 Bundle.js에 먼저 추가되므로 작성한 SCSS의 스타일이 덮어쓰여지거나 타사 라이브러리의 객체가 다음과 같은지 걱정할 필요가 없습니다. main.js에서 정의된 상황을 찾을 수 없습니다. Vendors.js에 등록된 파일은 등록 순서대로 Bundle.css, Bundle.js에 추가되므로 등록 순서가 올바른지 확인해야 합니다. 예를 들어 swiper.jquery.js보다 먼저 jquery.js를 등록해야 합니다. , swiper.jquery .js는 jquery.js에 의존하기 때문입니다.
참고 1: 파일 경로는 Vendors.js가 아닌 gulpfile.js에 상대적입니다.
참고 2: 이러한 방식으로 타사 JS 파일을 가져오는 것을 원하지 않고 CommonJS의 필수 작성 방법을 사용하여 가져오려는 경우에도 가능합니다. 예를 들어 다음과 같이 app/src/javascripts/main.js에 jQuery를 도입합니다.
var $ = require('jquery');
Gulp 작업
개발 과정에서 app/src 파일 아래의 이미지, 오디오, 글꼴 및 기타 파일을 수정하거나 교체했지만 브라우저의 페이지가 그에 따라 변경되지 않은 경우 콘솔에서 gulp dev 다시 실행해 보세요. gulp dev 작업.
MIT
