h5自动生成工具

最新推荐文章于 2024-10-10 07:27:35 发布

相太阳

最新推荐文章于 2024-10-10 07:27:35 发布

阅读量801

点赞数

文章标签： ui 数据库 photoshop

原文链接：http://www.cnblogs.com/gg1234/p/5601505.html

版权

一、前言

写了很多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返回的数组重新排序。