一、前言

寫了很多h5之后，對于寫手寫html和css已經麻木的我決定動手寫個工具自動生成h5結構和樣式。其實這個想法由來已久，但總是覺得自己技術不夠，所以一直沒實行。直到某天我真的寫夠了，我決定動手了。在此也要感謝我周圍的小伙伴。是波波同學告訴了我如何使用ps中的腳本批量把圖層導出成圖片，嘉哥告訴了我怎么裁剪png圖片。站在了巨人肩膀上的我，利用這兩個方法和我自己的聰明才智，經過2/3天的努力，終于完成了我的工具。個人感覺非常滿意。

二、規范說明

設計稿要求為640x1006尺寸，設計人員給的設計稿通常帶有微信頭，尺寸為640x1136.這時候需要制作人員修改畫布大小，選擇向上截取，將畫布大小改為640x1006
圖片文件夾規范，圖片文件夾根目錄名稱image，子文件夾p1、p2、p3、other……。子文件夾里不能再含有文件夾。如果有n個子文件夾，程序會創建n-1個slider。other文件夾一般用于存放一些slider共有的或者loading頁用的的圖片素材，所以不會被創建成slider。
實用cropPng裁剪完圖片以后，默認的圖片名稱為“文件夾名-數字(位序)-t數字-l數字-w數字-h數字”;t、l分別是圖片在設計稿中距離上邊和左邊的距離單位px，w、h為圖片的寬和高。tlwh用于生成css文件時使用。使用initH5-xxx.js生成專題以后，圖片的名稱更改為"文件夾-數字（位序）"，比如原先的圖片名稱為p1-0-1-t159-l533-w101-h131.png，生成專題后圖片名稱變為p1-0-1.png
自定義屬性,因為生成的index.html文件中，各個div的class名稱是"文件夾+數字",這樣的命名是沒有意義的。所以在使用cropPng裁剪完圖片后還你還可以通過修改圖片的名字為該圖片定義class屬性，id屬性，和事件。這樣使用initH5-xxx.js生成的專題后，使用該圖片為背景圖的div就會擁有class屬性、id屬性和事件。

clN[xxx] 其中xxx為圖片的class名。比如p1-0-t159-l533-w101-h131-clN[p1-car].png；如果有多個class，class之間使用空格分開，綁定時間時以[]內第一個class名為準，如果沒有自定義class名和id名，綁定事件時綁定的元素名為使用該圖片作為背景的元素名，比如$(".p1-0");
id[xxx] 其中xxx為圖片的id名。比如p1-0-t159-l533-w101-h131-id[p1-car].png
ev[xxx] 其中xxx為需要給該div綁定的事件名稱p1-0-t159-l533-w101-h131-ev[touchstart].png

三、使用步驟

修改尺寸：拿到設計稿后，確保設計稿的尺寸為640x1006
合并圖層：把需要添加動畫的圖層合（ctrl+e）并起來，比如在小車需要添加動畫，在psd中就應該把跟小車有關的圖片合并成一個圖層；比如某段文字需要添加動畫，就需要把跟該文字有關的圖層合并起來；其他不需要做動畫的元素直接合并到背景上。目的是圖層越少越好，減少工作量。
合并完圖層以后在項目所在目錄生成image文件夾，然后使用ps中的腳本將圖層導出到image文件夾下對應的p1、p2……文件夾下，生成png圖片。ps-文件-腳本-講圖層導出到文件…，選擇僅可見圖層，選擇png-24格式。默認使用ps腳本導出的圖片名稱是沒有規則的，這樣生成的專題需要調整slider里div的順序，建議使用本人修改過的腳本導出，這樣生成的專題就不用再調順序了。新的腳本見附錄。initH5-swiper.js創建的是基于swiper插件的h5，initH5-pageslider.js創建的是基于pageslider的h5專題。
使用initH5-xxx.js生成專題，然后根據自己的需要給專題添加動畫和事件即可

四、附錄

修改photoshop"將圖層導出成文件…"的規則。該程序所在目錄（我電腦）C:Program FilesAdobeAdobe Photoshop CS6 (64 Bit)PresetsScriptsExport Layers To Files.jsx。將文件夾“ps腳本中文件”中的文件替換掉photoshop中原有的文件就可以了。
文件夾image-bf中的文件，是我從ps中導出來的文件，image-crop中的文件是我使用cropPng.js裁剪后的圖片，測試的時候，如果測試生成h5只需要使用image-crop文件夾中的子文件夾覆蓋image中的子文件夾即可，然后運行initH5-xxx.js。如果要測試裁剪就使用image-bf中的子文件夾替換掉image中的子文件夾即可。這兩個文件夾主要是方便測試使用，不需要你們再從ps中導出文件。

五、遇到過的問題

1、node異步問題，這個問題非常嚴重，因為異步導致很多時候我們判斷不出來程序是否完成。這個工具中有很多是需要同步操作的，比如只有讀取了圖片你才能修改圖片的名字。如果兩個程序同時操作一個文件，比如修改名字和裁剪同時操作一個圖片或者改了文件名字再裁剪都會爆出文件not found錯誤。為了避免這個問題，這個工具很多地方都使用了同步的方法。
2、數組排序問題。我們從ps中批量導出的文件是按照圖層上下順序排列的，頂層的是px-0,再往下是px-1……。linux讀取文件是按索引排列的，本來p10應該排在p2的后面，但是因為linux的讀取規則問題，導致p10排在了p1后p2前。這就導致專題里某些圖片會被遮擋而不能顯示。解決辦法是對fs.readdirSync返回的數組重新排序。

附件

h5自動生成工具下載地址http://pan.baidu.com/s/1nv3vnOd

總結

以上是生活随笔為你收集整理的h5自动生成工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。