rpx转换

为了处理某些ide中不支持rpx单位的问题，mpx提供了一个将px转换为rpx的功能。

支持通过注释控制行级、块级的是否转换，支持局部使用，支持不同依赖分别使用不用的转换规则等灵活的能力。

通过transRpx参数来进行配置，配置项是这样 一个对象 ，也可以是 多个这样的对象组成的数组 。

  1. const transRpx = {
  2.   mode: 'all', // 可选值有none/only/all 分别是不启用，只对注释内容启用，只不对注释内容启用
  3.   comment: 'use px', // rpx注释，建议使用 'use px' / 'use rpx'，当mode为all时默认值为use px，mode为only时默认值为use rpx
  4.   include: resolve('src'), // 同webpack的include规则
  5.   exclude: resolve('lib'), // 同webpack的exclude规则
  6.   designWidth: 750 // 设计稿宽度，默认值就是750
  7. }

配置在 build.js / webpack.conf.js 中的 MpxWebpackPlugin.loader 的参数中（找已经存在的，勿新加）。关于如何配置详情请查看mpx-loader选项

应用场景及相应配置

接下来我们来看下一些应用场景及如何配置。如果是用脚手架生成的项目，在webpack.conf.js里找到MpxWebpackPlugin.loader，应该已经有预设的transRpx选项，按例修改即可。本处示例中为了代码合规，声明了新变量表示来这个选项，项目中应该直接为option对象的子属性。

三种场景分别是 普通使用，因设计稿是px的二倍/三倍图 ， 只对某些特殊样式转换 ， 不同路径分别配置规则

场景一

设计师给的稿是2倍图，分辨率750px。或者更高倍图。

  1. const transRpx = {
  2.   mode: 'all',
  3.   designWidth: 750 // 如果是其他倍，修改此值为设计稿的宽度即可
  4. }

场景二

大部分样式都用px下，某些元素期望用rpx。或者反过来。

  1. const transRpx = {
  2.   mode: 'only',
  3.   comment: 'use rpx',
  4.   designWidth: 750 // 设计稿宽度
  5. }

mpx的rpx注释能帮助你仅为部分类或者部分样式启用rpx转换，细节请看下面附录。

场景三

使用了第三方组件，它的设计宽度和主项目不一致，期望能设置不同的转换规则

  1.   {
  2.     test: /\.mpx$/,
  3.     use: MpxWebpackPlugin.loader({
  4.       transRpx: [
  5.         {
  6.           mode: 'only',
  7.           designWidth: 750,
  8.           comment: 'use rpx',
  9.           include: resolve('src')
  10.         },
  11.         {
  12.           mode: 'all',
  13.           designWidth: 1280, // 对iview单独使用一个不同的designWidth
  14.           include: resolve('node_modules/iview-weapp')
  15.         }
  16.       ]
  17.     })
  18.   }

注意事项：转换规则是不可以对一个文件做多次转换的，会出错，所以一旦被一个规则命中后就不会再次命中另一个规则，include和exclude的编写需要注意先后顺序，就比如上面这个配置，如果第一个规则include的是’/‘即整个项目，iview-weapp里的样式就无法命中第二条规则了。

transRpx附录

designWidth

设计稿宽度，单位为px。默认值为750px。

mpx会基于小程序标准的屏幕宽度baseWidth 750rpx，与option.designWidth计算出一个转换比例transRatio

转换比例的计算方式为transRatio = (baseWidth / designWidth)。精度为小数点后2位四舍五入

所有生效的rpx注释样式中的px会乘上transRatio得出最终的rpx值

例如：

  1. /* 转换前：designWidth = 1280 */
  2. .btn {
  3.   width: 200px;
  4.   height: 100px;
  5. }
  7. /* 转换后: transRatio = 0.59 */
  8. .btn {
  9.   width: 118rpx;
  10.   height: 59rpx;
  11. }

comment: rpx注释样式

根据rpx注释的位置，mpx会将一段css规则或者一条css声明视为rpx注释样式

开发者可以声明一段rpx注释样式，提示编译器是否转换这段css中的px

例如：

  1. <style lang="css">
  2.   /* use px */
  3.   .not-translate-a {
  4.     font-size: 100px;
  5.     padding: 10px;
  6.   }
  7.   .not-translate-b {
  8.     /* use px */
  9.     font-size: 100px;
  10.     padding: 10px;
  11.   }
  12.   .translate-a {
  13.     font-size: 100px;
  14.     padding: 10px;
  15.   }
  16.   .translate-b {
  17.     font-size: 100px;
  18.     padding: 10px;
  19.   }
  20. </style>

第一个注释位于一个选择器前，是一个css规则注释，整个规则都会被视为rpx注释样式

第二个注释位于一个css声明前，是一个css声明注释，只有font-size: 100px会被视为rpx注释样式

transRpx = all模式下，除了这两条rpx注释样式之外，其他都会转rpx