一、说明

weex 对于 css 样式的支持是非常有限的,并且使用样式的时候,必须遵循 weex 定义的规则。

对于不遵循 weex 样式规则的代码,往往在 web 页面上有效,而在 native 环境没有任何作用。

weex 官方文档中,有专门的样式介绍:

我最早只用 weex 的时候,想当然的觉得,反正会 vue,直接写就行了,但是后面发现,还是需要认真的去读官方的文档,很多注意事项,都是文档中有说明的。

二、通用样式

1、单位

weex 中,单位必须使用 px,其他都不支持,而且通常窗口宽度为 750px,在不同的平台会进行相应的计算。

比如在 web 中,会转换成 em

因为 native 开发中,是必须定宽高的,所以和 web 开发中很多概念是不相同的。

2、样式不会传递

weex 中,native 环境的属性样式不会传递给子元素。

比如在 <div> 中设置的 text-align:center;,无法作用到其 <text> 子元素,必须在 <text> 使用 text-align

<div> 不能直接写文字内容,及 <text> 不能有子节点这种约束,需要详细的去了解官方文档的内置组件部分。

3、盒模型

盒模型默认是使用 box-sizing:border-box,盒模型中需要注意的很大部分是属性样式的简写是不支持的,必须要分开来写。

盒模型更多注意内容可以看:http://weex.apache.org/cn/wiki/common-styles.html#zhu-yi

1)margin

margin 是所有组件都支持的样式,但是设置样式的时候,不能使用简写如 margin:10px; 的形式,必须分开使用,默认值都是 0:

  • margin-top:10px
  • margin-bottom:10px
  • margin-right:10px
  • margin-left:10px

2)padding

padding 样式同样不能使用简写,必须分开说明,默认值都是 0:

  • padding-top:10px;
  • padding-bottom:10px;
  • padding-left:10px;
  • padding-right:10px;

3) border

border 不支持 border:1px solid #cccccc 形式的简写,需要分开说明。

使用 border 实现的三角形,在 native 环境中是不起作用的,即使样式分开写了,也是不起作用,weex 环境中使用三角形,建议使用 svg

  • border-stylesolid | dashed | dotted

    • 更加细化的写法:
    • border-left-style
    • border-right-style
    • border-top-style
    • border-bottom-style
  • border-width:边框宽度,默认为 0

    • 更加细化的写法:
    • border-left-width
    • border-right-width
    • border-top-width
    • border-bottom-width
  • border-radius:边框弧度,默认为 0

    • 更加细化的写法:
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-top-left-radius
    • border-top-right-radius
  • border-color:边框颜色,默认 #000000

    • 更加细化的写法:
    • border-right-color:
    • border-left-color:
    • border-top-color:
    • border-bottom-color:

4、flexbox

weex 默认的布局模型就是 flexbox,因此其组件本身就是 display:flex,不需要再次声明。

weex 的 flexbox 模型的默认 flex-directioncolumn,如果你需要 row,则需要显示的说明。

weex 中一切皆为 flexbox,一般来说,水平垂直居中,都可以直接使用 flexbox 去实现,而不是使用 position:absolute,因为不支持百分比的单位。

关于 flex 的使用,可以参照阮一峰的文章:

5、定位

weex 默认定位是 relative,不支持 static 的定位,支持 relativeabsolutefixedsticky

同样的,由于不支持百分比的单位,因此 topleftrightbottom 必须使用 px,默认都是 0

一般来说我们会通过 z-index + position 来进行层级的设置,但是 weex (目前)不支持 z-index 设置层级关系,默认的越靠后的元素层级越高。

Android 系统中,如果定出超出了边界, 则会直接隐藏,且(目前)不能设置 overflow:visible

6、transform

transform 属性目前比较特殊的一点是,translatetranslateYtranslateX 三个的值支持百分比。

在线示例:

1.jpg

上面示例的百分比在 native 环境同样能够起作用

目前 transform 支持的格式:

  • translate( <number/percentage> [, <number/percentage>]?)
  • translateX( <number/percentage> )
  • translateY( <number/percentage> )
  • scale( )
  • scaleX( )
  • scaleY( )
  • rotate( <angle/degree> )
  • rotateX( <angle/degree> ) v0.14+
  • rotateY( <angle/degree> ) v0.14+
  • perspective( ) Android 4.1及以上版本支持 v0.16+
  • transform-origin: number/percentage/keyword(top/left/right/bottom)

7、transition

过渡动画建议使用 animation.transition(el,{},callback) 以 js 函数的方式进行,更加的可控,能够达到需求

transition 不支持简写形式,必须分开说明。

  • transition-property:允许过渡动画的属性名,不能使用 all

    • 支持的属性:
    • width
    • height
    • top
    • bottom
    • left
    • right
    • backgroundColor
    • opacity
    • transform
  • transition-duration:过渡动画的时间,默认值是0,单位是 毫秒
  • transition-delay:过渡动画的延迟时间,单位是毫秒或者秒,如 2s
  • tramsition-timing-function:过渡动画的速度曲线,默认是 ease

    • 目前支持的属性:
    • ease:逐渐变慢
    • ease-in:慢速开始,然后变快
    • ease-out:快速开始,然后变慢
    • linear:匀速变化
    • ease-in-out:慢速开始,然后变快,然后慢速结束
    • cubic-bezier(x1,y1,x2,y2):三阶拜赛尔曲线,参数在 0-1 之间

8、伪类

伪类只支持四种:activefocusdisabledenabled

一般在 input/textarea 使用 focusdisabledenabled 比较多,因为只有这两种组件支持,而所有的组件是支持 active 伪类的。

9、线性渐变

weex 支持通过 background-color 进行线性渐变,但是只支持横向渐变,现在不支持径向渐变。

使用示例:

background-image: linear-gradient(to top,#a80077,#66ff00);

weex 现在也只支持了两种颜色渐变,不支持更多的颜色渐变:

  • to right:从左向右渐变
    -to left:从右向左渐变
  • to bottom:从上到下渐变
  • to top:从下到上渐变
  • to bottom right:从左上角到右下角
  • to top left:从右下角到左上角

同时 background-image 的优先级比 background-color 要高,如果同时存在,前者将覆盖后者。

weex 不建议使用 background 的简写形式,background: #cccccc;这种在 native 上是不起作用的。

10、box-shadow

box-shadow 只支持 IOS,不推荐使用

11、opacity

opacity 默认支持,使用方式和原来使用方式一样,取值 0-1

12、background-color

支持的颜色包括:

  • RGB
  • RGBA
  • 十六进制(#ffffff)
  • 精简十六进制(#FFF)(个人不是很推荐)
  • 英文单词(个人不推荐)

三、其他注意事项

如果发现在 web 上样式能用,到了 native 上样式不能用,考虑过程可以如下:

  • 是否支持该样式
  • 书写形式是否正确,如不能简写
  • 是否拉掉了标点符号(比如 transform(30% 30%) 拉掉了中间的 , 逗号)