移动端框架（如WeUI）与一般的h5设计稿（750px）结合使用的方式

背景

我们在进行h5开发时，通常使用的设计稿是750px（考虑retina），我们会直接根据设计稿的尺寸去开发，然后进行适配（常用的有淘宝的flexible方案以及近期流行的vw适配方案）。但有时，我们又想直接使用现有移动端框架的一些组件（如简洁大方的weui）。weui作为基础组件，大多数是使用px为单位的，比如直接在自己的项目中用upload组件，看起来就小了一号。

image.png

这是由于中的 viewport已经被相关js改成 640 或 750 之类的值，WeUI中的 13px 等字号或尺寸就显得捉襟见肘了。

解决方案

1. 最笨的

要解决这个问题，最直接的方式就是把框架里相关代码拷贝过来，自己默默地覆盖样式，这样做的好处是可以精确控制像素，缺点自然是浪费生命~~

2. 与适配方案相关的

如果你使用rem的适配方案，有现成的工具可以将px转化成rem（如，px2rem），或者在webpack工程中使用postcss-px2rem插件，并在处理css的相关rules中添加

{
    loader: 'postcss-loader',
    options: {
      plugins: [
        px2rem({
          remUnit: 375 / 20,
          remPrecision: 5
        })
      ]
    }
}

需要注意的是

• remPrecision指的是生成的rem数值精度，避免过长
• 而 remUnit 中用 375，是基于 iphone6 的尺寸做一个基准，计算出来的尺寸基本在各自手机型号中都可以接受
• 20 则参考了小程序中的标准，这个值其实也可以自定义，和相关rem辅助工具中的设置一致即可

该方案参考自《WeUI在rem项目中的一种适配方法》 一文，该文还提出“使用 webpack2-replace-loader 插件”的方式，但本人测试后无法编译通过，如果有同学成功了，请多多指教~

3. 字符串替换方式，修改原来的px（大概2倍大小比较合适）

这个方式的思路是找出框架中所有以px为单位的数字，乘以2。借用node文件处理，按行读取文件，对每行文件进行正则匹配，并替换所有以px结尾的数值。代码如下：

let output = '';    // 最终输出的结果
const readline = require('readline');
const path = require('path');
const fs = require('fs');
let filepath = path.join(__dirname, "weui.css");   // 需要转化的css文件
let input = fs.createReadStream(filepath);
const rl = readline.createInterface({
  input: input
});
rl.on('line', (line) => {
  var exp = new RegExp(/\b(\d+(\.\d+)?)px\b/g);    // 获取所有以px结尾的数值
  var out = line.replace(exp, function ($0, $1) {
    return $1 * 2 + 'px';
  });  // 将匹配到的数值进行计算
  output += `${out}\n`; 
});
rl.on('close', (line) => {
  fs.writeFile(__dirname + '/output.css', output, function (err) {
    if (err) {
      throw err;
    }
    console.log('已保存!');
  });
  console.log("读取完毕！");
});

将输出的文件引入项目，可以看到刚才的上传组件变成正常大小啦

image.png

踩过的几个坑：

1. 一开始没想到replace函数可以直接用替换函数，还在那里自己拼字符串，如下：

  var result = exp.exec(line);
  var out = line;
  if (result !== null) {
    out = line.substring(0, result.index) + parseInt(result[1])*2 + line.substring(result.index+result[1].length);
  }

但这也只能解决一行只出现一次px的情况，如果有多个匹配串，拼起来太痛苦了，就想着px转rem的工具肯定已经解决了这个问题，所以屁颠屁颠跑去参考了px2rem的源码（思路!!!），发现replace可以这么用，马上解决了我的痛点，开心！

2. 本来想每行处理的时候顺便写入到文件，但写入文件的过程是异步的，所以生成出来的文件会错位。一般css文件都不会很大，因此我直接把结果缓存起来，最后一起写入文件。毕竟读写文件的开销比较大。

本人初入移动端，希望各位多多吐槽，一起讨论解决问题的思路。