Weex 的文本大小，使用px作為單位在手機(jī)端和網(wǎng)頁端效果不一致，有個(gè)簡單的解決辦法， 使用weex 的單位 wx

<text style="font-size: 14wx; color: #333333">weex</text>

經(jīng)過測試發(fā)現(xiàn)，14wx 在Android和 iOS下效果是一致的，和html的28px差不多

可以在寫weex代碼的時(shí)候，把wx作為字體的單位

.text-title {
  font-size: 16wx;
}

.text-content {
  font-size: 15wx;
}

問題來了，html 不支持 wx 怎么辦, 可以使用自定義loader在編譯時(shí)把wx替換為px

通過測試比較，可以得出 1wx 約等于 2px

新建 web-h5-font-size-loader.js

module.exports = function (source) {
    source = source.replace(/(\d{1,3})wx/g, function (con, $1) {
        // 1wx = 2px 想要更精確的，需要通過分辨率，屏幕密度比計(jì)算
        return `${ $1 * 2 }px`
    })
    return source;
}

配置 loader

config/webpack.common.conf.js

在webConfig的module下添加代碼，引入新建的自定義loader

module: {
    rules: [
        ......, //原有的配置不變
        {
           test: /\.vue$/,
           use: [
               {
                   loader: path.resolve('loaders/web-h5-font-size-loader.js'),
               }
          ]
       }
    ]
}
 

loader 起作用后，會(huì)在編譯時(shí)自動(dòng)把 1wx 換為 2px