使用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等並不是微信官方推薦的標簽，但是如果你們的項目時間特別緊，還是可以考慮一下的。