wechat h5 boilerplate
v0.3.6
「讓製作H5像製作PPT一樣簡單！」
Wechat-H5-Boilerplate(以下簡稱WHB）是一個H5動效模板，專為微信優化，適合快速建立全螢幕滾動型H5宣傳頁。
例如讓一段文字動起來只需要一行程式碼：
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
使用手機存取下面的地址或掃描下方二維碼
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
將本項目clone到本地
在控制台中運行：
git clone --depth=1 https://github.com/panteng/wechat-h5-boilerplate.git <your-project-name>
cd <your-project-name>
或者你也可以直接在Release頁面下載WHB的源碼壓縮包。
安裝第三方包
WHB使用NPM管理第三方包
在控制台中運行：
npm install
注意1：由於中國網路環境惡劣，下載NPM上的套件速度很慢，建議使用淘寶NPM鏡像CNPM。 CNPM的安裝方法請參考官網使用說明。 CNPM v4.2.0在Windows系統上有Bug（參考#97），Windows用戶請勿使用該版本，雖然官方說已經修復，但我在Windows上使用CNPM安裝需要node-gyp編譯的包時仍然會報錯。我也不建議使用CNPM v3.4.1，因為其內建的NPM版本太舊。推薦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, operation not permitted”的話，請嘗試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動畫，將動畫相關的HTML程式碼插入在app/src/index.html中的<div class="loading-overlay"></div>中，並將相關的CSS3 Animation程式碼整合進app/src/scss中。
想省事的話，loading.io這個網站可以幫你產生現成的載入動畫（打不開請翻牆）。建議產生SVG格式的動畫圖片文件，將文件改為loading.svg並取代app/src/images/下的同名文件即可。
另外分享一些優秀的CSS3載入動畫庫：
頁面切換效果
頁面切換暫時只支援Swiper自備的四種：slide，fade, flip和coverflow（cube不支持，因為不符合此場景）。詳見Swiper文件中關於effect的部分。
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
----------------------------------------
然後，確保你的行動裝置（手機、平板等）和電腦處於同一區域網路內（最簡單的方式就是讓電腦、手機和平板連接同一個WIFI；或是電腦用網路線連接路由器，手機和平板連線同是這個路由器發出的WIFI）。
最後，在你的行動裝置上開啟瀏覽器，存取上面第三行中External對應的URL（注意你的URL可能跟我上面寫的不一樣，以你自己的控制台中顯示的External URL為準）。
現在只要你修改app/src下的文件，所有造訪這個URL的行動裝置和電腦都會自動刷新瀏覽器頁面。你在其中一個裝置上進行的操作也會即時同步到其他裝置（例如用手指向上劃動頁面）。
響應式設計
建議使用rem替代px來設定元素的尺寸、邊距和字體大小。
在WHB中，1rem對應的px數值會隨著裝置螢幕尺寸的不同而改變。
在螢幕寬度小於400px的裝置上，1rem = 16px；
在螢幕寬度大於400px且小於600px的裝置上，1rem = 22px；
在螢幕寬度大於600px的裝置上，1rem = 32px；
請參閱app/src/scss/base/_base.scss中關於Media Query的程式碼。
config/vendors.js說明
vendors.js文件用來登記第三方CSS、JS和Fonts信息，凡在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的stylesheets中所有的css檔案都會被加入到專案最終產生的bundle.css中；
vendors.js的javascripts中所有的js檔案都會被加入專案最終產生的bundle.js中；
vendors.js的fonts中所有的檔案都會被複製到app/dist/fonts資料夾中。
記住vendors.js中登記的檔案會被優先加入bundle.css和bundle.js中，因此你無需擔心自己寫的SCSS中的樣式被覆蓋或在main.js中發現某個第三方函式庫的物件未定義的情況。而在vendors.js中登記的文件會按照登記順序依次加入bundle.css和bundle.js，因此你要確保登記順序正確，例如jquery.js一定要在swiper.jquery.js前面登記，因為swiper.jquery .js是依賴jquery.js的。
注意1：檔案路徑是相對於gulpfile.js的，不是相對於vendors.js的。
注意2：如果你不喜歡透過這種方式引入第三方JS文件，而想使用CommonJS的require寫法來引入，也是可以的。例如在app/src/javascripts/main.js中用這種方式引入jQuery：
var $ = require('jquery');
Gulp任務
在開發過程中，如果你發現明明已經修改或替換了app/src檔案下的圖片、音訊、字體等文件，但瀏覽器中的頁面卻沒有做出相應改變的話，請嘗試在控制台中重新運行gulp dev任務。
MIT
