WeUI在rem项目中的一种适配方法

2020-06-15 15:10:58 浏览数 (1)

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素

以上是官方团队对WeUI的介绍,作为一个使用频率非常高的UI库,官方也给其提供了weui-wxssweui.jsreact-weui等配套工具来适应微信小程序、普通h5页面、react项目等日常开发

但在移动页面开发的过程中,另一个高频面临的问题[rem适配]会和WeUI八字不合;由于WeUI中的单位大都是由px定义,如果直接用在项目中,大概就成了以下的画风:

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

直接手动修正:

一个笨办法就是“逢山开道、遇水架桥”,也就是。。。对使用到的WeUI组件一个个的覆盖其样式,比如:

代码语言:javascript复制
/* weui-rem-reset.less */.weui_cells {
   .px2rem(10px, margin-top);
   line-height: 1.41176471;
   .px2rem(34px);
   &::after,
   &::before {
       .ab1px();
   }
   &::before {
       .px2rem(1px, border-top-width);
       border-top-color: #e9ecec;
   }
   &::after {
       .px2rem(1px, border-bottom-width);
       border-bottom-color: #e9ecec;
   }
}
.weui_cell {
   .px2rem_2(28px,30px,padding);
   &::before {
       .ab1px();
       .px2rem(1px, border-top-width);
           border-top-color: #f0f0f0;
       left: 0;
   }
}...

更省事一些的解决办法:

官方团队对于这个问题的回应和建议是这样的:

好像比较简单粗暴ㄟ( ▔, ▔ )ㄏ,不过也是比较适用的办法了

在webpack中的实现方式:

以webpack项目为例,我们按照以上思路,可以用几种插件实现,这里举两种实现方式的栗子:

a. 使用 postcss-px2rem 插件

引入安装好的包:

代码语言:javascript复制
const px2rem = require('postcss-px2rem');

在处理 css 的相关 rules 中添加:

代码语言:javascript复制
{
   loader: 'postcss-loader',
   options: {
     plugins: [
       px2rem({
         remUnit: 375 / 20,
         remPrecision: 5
       })
     ]
   }
}

需要注意的是

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

b. 使用 webpack2-replace-loader 插件

按照第一种方法的思路,直接用文本替换的方法也可以自行实现,并且拥有更多的自由度:

代码语言:javascript复制
{
   loader: 'webpack2-replace-loader',
   options: {
     replace: {
       '([0-9\.] )px': function(match, p1, office, string) {
         let vlu = parseInt(p1);
         
         //忽略小于等于1px的尺寸
         if (vlu<=1) return `${p1}px`;
         
         vlu = vlu / (375 / 20);
         vlu = vlu.toPrecision(5);
         return `${ vlu }rem/*${ p1 }px*/`;
       }
     }
   }
}

至此,再结合具体的设计稿进行微调,即可正常使用:

0 人点赞