使用PHP脚本快速将H5的css文件转换为微信小程序wxss文件

公司需要开发微信小程序,根据领导指示,小程序的UI和功能和我们公司原有项目的H5版本一模一样,而且尽可能快地发布。我使用了如下方案,极大加快了我们团队的开发进度。

我发现微信小程序的wxss对于css的支持程度还是非常高的,可以很大程度的复用。但是有个问题:我们原H5项目中css的长度单位使用的是rem,而小程序使用的是自己的rpx。虽然单位不同,但是道理和作用是一样的,都是为了适配各种移动端屏幕,因此我只需要做一个换算即可。

微信规定屏幕宽度为750rpx,而我们公司所用的设计稿宽度为640px,1rem规定为100px,因此,对于原css文件中的长度数值,我需要做以下换算:

$design=640;//设计稿宽px值
$rem=100;//原css中规定的1rem的px值
$ratio=750/($design/$rem);//计算rpx时的比例

假设原css宽度为6.4rem(即设计稿全宽),则换算为rpx为:6.4 * (750/(640/100))=750

这种简单重复的换算工作自然要交给脚本。

下面是我写的代码 ,思路为,通过正则匹配rem的宽度,然后转换长度值,再把rem替换为rpx:

<?php
//changecss.php
!empty($argv[1]) or die('请输入文件名'); $file=$argv[1]; $cwd=getcwd().DIRECTORY_SEPARATOR ; $file_path=$cwd.$file; file_exists($file_path) or die($file_path.'文件不存在!'); $newStr='';//新字符串 $design=640;//设计稿宽px值 $rem=100;//原css中规定的1rem的px值 $ratio=750/($design/$rem);//计算rpx时的比例$file_arr = file($file_path); for($i=0;$i<count($file_arr);$i++){//逐行读取文件内容 $curLine=$file_arr[$i];//当前行 if(strpos($curLine, 'rem')!==false){//使用了rem if (preg_match('(\d+(\.\d+)?)',$curLine,$r)) {//找出数字 $num=$r[0]; $newNum=$num*$ratio; $curLine=str_replace($num, $newNum, $curLine);//更新数字 $curLine=str_replace('rem', 'rpx', $curLine);//更新单位 }; } $newStr.=$curLine; }
//保存为新文件
$tmp=explode('.', $file); $newFileName=$tmp[0].'_'.time().'.'.$tmp[1]; $savePath=$cwd.$newFileName; $res=file_put_contents($savePath, $newStr); if($res){ echo '保存成功,路径为:',$savePath; }else{ echo '失败'; }

 

需要在PHP 命令行模式运行,运行方法为

path_to_php changecss.php  path_to_your_cssfile.css

当然,以上只是一个对长度数值及单位的转换。还有一些工作需要做,比如:

1.匹配全部标签的*样式,比如*{border:none}不被小程序允许,需要手动判断修改或删除。

2.在小程序中,有一些标签不支持,比如h2,需要将h2改为h,同时wxml文件中也要同步改。

3.有一些标签不再是块级别的,比如div,p,h。

如果懒得将div,p,h改为小程序使用的view,其实也是可以的。只需要在wxss文件中初始化样式:

div,p,h{display:block}

实测ok。

经过以上步骤,html转wxml需要做的改动会特别少。

其实,从长期维护的角度考虑,我不推荐这样做,因为div,p,h等并不是微信官方推荐的标签,但是如果你们的项目时间特别紧,还是可以考虑一下的。

 

posted @ 2018-01-18 10:28  toDoYourBest  阅读(...)  评论(... 编辑 收藏