阿里Weex 文本大小适应不同分辩率

Weex 的文本大小，使用px作为单位在手机端和网页端效果不一致，有个简单的解决办法， 使用weex 的单位 wx

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

经过测试发现，14wx 在Android和 iOS下效果是一致的，和html的28px差不多

可以在写weex代码的时候，把wx作为字体的单位

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

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

问题来了，html 不支持 wx 怎么办, 可以使用自定义loader在编译时把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 想要更精确的，需要通过分辨率，屏幕密度比计算
        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 起作用后，会在编译时自动把 1wx 换为 2px