WeUI在rem項目中的一種適配方法

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信 Web 開發量身設計，能夠令用戶的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素

以上是官方團隊對WeUI的介紹，做爲一個使用頻率很是高的UI庫，官方也給其提供了weui-wxss、weui.js、react-weui等配套工具來適應微信小程序、普通h5頁面、react項目等平常開發

但在移動頁面開發的過程當中，另外一個高頻面臨的問題[rem適配]會和WeUI八字不合；因爲WeUI中的單位大都是由px定義，若是直接用在項目中，大概就成了如下的畫風：

這是因爲<meta>中的viewport已經被相關js改爲 640 或 750 之類的值，WeUI中的 13px 等字號或尺寸就顯得捉襟見肘了；

直接手動修正：

一個笨辦法就是「逢山開道、遇水架橋」，也就是。。。對使用到的WeUI組件一個個的覆蓋其樣式，好比：

/* 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 插件

引入安裝好的包:

const px2rem = require('postcss-px2rem');

在處理 css 的相關 rules 中添加:

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

須要注意的是

• remPrecision指的是生成的rem數值精度，避免過長

• 而 remUnit 中用 375，是基於 iphone6 的尺寸作一個基準，計算出來的尺寸基本在各自手機型號中均可以接受

• 20 則參考了小程序中的標準，這個值其實也能夠自定義，和相關rem輔助工具中的設置一致便可

b. 使用 webpack2-replace-loader 插件

按照第一種方法的思路，直接用文本替換的方法也能夠自行實現，而且擁有更多的自由度：

{
    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*/`;
        }
      }
    }
}

至此，再結合具體的設計稿進行微調，便可正常使用：

-------------------------------------

長按二維碼或搜索 fewelife 關注咱們哦

本文分享自微信公衆號 - 雲前端（fewelife）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。