style增强特性

css预处理器

mpx支持所有主流的css预编译处理,只需要在<style>lang中设置使用的预编译语言(stylus/less/sass等)并且安装对应的webpack-loader即可正常使用。

示例:

<template>
  <view class="container">
    <text class="item">123</text>
  </view>
</template>

<style lang="stylus">
.container
 padding 10px
 .item
     text-align center
</style>

样式引用

两种方式引用:

  • style内使用@import语法引入
  • 在style标签上通过src引入

前者会被内联打入 组件/页面 对应的wxss文件,后者则是会将src对应的文件收集到wxss文件夹里,再在 组件/页面 对应的wxss文件中通过@import引入。

在一个mpx文件中,两者可以同时使用,例如:

<!--src/components/test.mpx-->
<!--省略template\script\json部分-->

<!--这个部分的样式会被收集进wxss文件夹再被test.wxss引入-->
<style src="../common/index.css"></style>

<style>
/*这个部分的代码会被内联打入test.wxss*/
.test {
  background-color: red;
}
</style>

<!--也可以使用样式预处理语言比如sass、stylus、less等等-->
<style lang="scss" src="../style/test.scss"></style>

建议对于多个 页面/组件 公用的样式,使用src形式引入,避免一份样式被内联打成多份。

rpx转换

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

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

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

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

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

应用场景及相应配置

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

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

场景一

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

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

场景二

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

const transRpx = {
  mode: 'only',
  comment: 'use rpx',
  designWidth: 750 // 设计稿宽度
}

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

场景三

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

  {
    test: /\.mpx$/,
    use: MpxWebpackPlugin.loader({
      transRpx: [
        {
          mode: 'only',
          designWidth: 750,
          comment: 'use rpx',
          include: resolve('src')
        },
        {
          mode: 'all',
          designWidth: 1280, // 对iview单独使用一个不同的designWidth
          include: resolve('node_modules/iview-weapp')
        }
      ]
    })
  }

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

transRpx附录

designWidth

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

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

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

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

例如:

/* 转换前:designWidth = 1280 */
.btn {
  width: 200px;
  height: 100px;
}

/* 转换后: transRatio = 0.59 */
.btn {
  width: 118rpx;
  height: 59rpx;
}

comment: rpx注释样式

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

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

例如:

<style lang="css">
  /* use px */
  .not-translate-a {
    font-size: 100px;
    padding: 10px;
  }
  .not-translate-b {
    /* use px */
    font-size: 100px;
    padding: 10px;
  }
  .translate-a {
    font-size: 100px;
    padding: 10px;
  }
  .translate-b {
    font-size: 100px;
    padding: 10px;
  }
</style>

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

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

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

results matching ""

    No results matching ""