使用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等并不是微信官方推荐的标签，但是如果你们的项目时间特别紧，还是可以考虑一下的。