weex 通用样式以及须要注意的问题

1、说明

weex 对于 css 样式的支持是很是有限的，而且使用样式的时候，必须遵循 weex 定义的规则。

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

weex 官方文档中，有专门的样式介绍：

• http://weex.apache.org/cn/wiki/common-styles.html

我最先只用 weex 的时候，想固然的以为，反正会 vue，直接写就好了，可是后面发现，仍是须要认真的去读官方的文档，不少注意事项，都是文档中有说明的。

2、通用样式

一、单位

weex 中，单位必须使用 px，其余都不支持，并且一般窗口宽度为 750px，在不一样的平台会进行相应的计算。

好比在 web 中，会转换成 em。

由于 native 开发中，是必须定宽高的，因此和 web 开发中不少概念是不相同的。

二、样式不会传递

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

好比在 <div> 中设置的 text-align:center;，没法做用到其 <text> 子元素，必须在 <text> 使用 text-align。

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

三、盒模型

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

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

内边距

padding {length}：内边距，内容和边框之间的距离，默认值 0。与标准 CSS 相似，padding 支持简写，也可分解为如下四个：

• padding {length}: 上、下、左、右四边内边距，默认值 0
• padding-left {length}：左内边距，默认值 0
• padding-right {length}：右内边距，默认值 0
• padding-top {length}：上内边距，默认值 0
• padding-bottom {length}：下内边距，默认值 0

外边距

margin {length}：外边距，元素和元素之间的空白距离，默认值 0。与标准 CSS 相似，margin 支持简写，也可分解为四边：

• margin {length}: 上、下、左、右四边外边距，默认值 0
• margin-left {length}：左外边距，默认值 0
• margin-right {length}：右外边距，默认值 0
• margin-top {length}：上外边距，默认值 0
• margin-bottom {length}：下外边距，默认值 0

边框

不支持速写形式，例如：border: 1 solid #ff0000; 的组合写法

border-style

border-width设定边框样式，若是四个方向的边框样式不一样，可分别设置：

• border-style {string}
• border-left-style {string}：可选值为 solid | dashed | dotted，默认值 solid
• border-top-style {string}：可选值为 solid | dashed | dotted，默认值 solid
• border-right-style {string}：可选值为 solid | dashed | dotted，默认值 solid
• border-bottom-style {string}：可选值为 solid | dashed | dotted，默认值 solid

支持的值以下：

• solid：实线边框，默认值 solid
• dashed：方形虚线边框
• dotted：圆点虚线边框

border-width

border-width：设定边框宽度，非负值, 默认值 0，若是四个方向的边框宽度不一样，可分别设置：

• border-width {length}：非负值, 默认值 0
• border-left-width {length}：非负值, 默认值 0
• border-top-width {length}：非负值, 默认值 0
• border-right-width {length}：非负值, 默认值 0
• border-bottom-width {length}：非负值, 默认值 0

border-color

border-color：设定边框颜色，默认值 #000000，若是四个方向的边框颜色不一样，可分别设置：

• border-color {color}：默认值 #000000
• border-left-color {color}：默认值 #000000
• border-top-color {color}：默认值 #000000
• border-right-color {color}：默认值 #000000
• border-bottom-color {color}：默认值 #000000

border-radius

border-radius：设置边框的圆角，默认值 0，若是四个方向的圆角弧度不一样，可分别设置：

• border-radius {length}: 非负值, 默认值 0
• border-bottom-left-radius {length}：非负值, 默认值 0
• border-bottom-right-radius {length}：非负值, 默认值 0
• border-top-left-radius {length}：非负值, 默认值 0
• border-top-right-radius {length}：非负值, 默认值 0

四、flexbox

weex 默认的布局模型就是 flexbox，所以其组件自己就是 display:flex，不须要再次声明。

weex 的 flexbox 模型的默认 flex-direction 是 column，若是你须要 row，则须要显示的说明。

weex 中一切皆为 flexbox。

通常来讲，水平垂直居中，均可以直接使用 flexbox 去实现。

而不是使用 position:absolute，由于不支持百分比的单位。（尝试写百分比来实现居中布局，会失效。）

关于 flex 的使用，能够参照阮一峰的文章：

• Flex 布局教程：语法篇

五、定位

weex 默认定位是 relative，不支持 static 的定位，支持 relative、absolute、fixed 和 sticky。

一样的，因为不支持百分比的单位，所以 top、left、right、bottom 必须使用 px，默认都是 0

通常来讲咱们会经过 z-index + position 来进行层级的设置，

可是 weex （目前）不支持 z-index 设置层级关系，默认的越靠后的元素层级越高。

Android 系统中，若是定出超出了边界， 则会直接隐藏，且（目前）不能设置 overflow:visible

六、transform

transform 属性目前比较特殊的一点是，translate、translateY、translateX 三个的值支持百分比。

目前支持的 transform 声明格式:

• translateX({<length/percentage>})：X 轴方向平移，支持长度单位或百分比。
• translateY({<length/percentage>})：Y 轴方向平移，支持长度单位或百分比。
• translate({<length/percentage>} {<length/percentage>})：X 轴和 Y 轴方向同时平移，translateX + translateY 简写。
• scaleX(<number>)：X 轴方向缩放，值为数值，表示缩放比例，不支持百分比。
• scaleY(<number>)：Y 轴方向缩放，值为数值，表示缩放比例，不支持百分比。
• scale(<number>)：X 轴和 Y 轴方向同时缩放，scaleX + scaleY 简写。
• rotate(<angle/degree>)：将元素围绕一个定点（由 transform-origin 属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，不然逆时针方向旋转。
• rotateX(<angle/degree>)0.14+：X 轴方向的旋转。
• rotateY(<angle/degree>)0.14+：Y 轴方向的旋转。
• rotateZ(<angle/degree>)0.26+：Z 轴方向的旋转。
• perspective(<length>)0.16+：指定了观察者与 z=0 平面的距离，使具备三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。Android 4.1及以上版本支持。详情可参考 MDN 介绍。
• transform-origin {length/percentage/关键字(top/left/right/bottom)}:：设置一个元素变形的原点，仅支持 2D 坐标。

七、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 之间

八、伪类

伪类只支持四种：active、focus、disabled、enabled

通常在 input/textarea 使用 focus、disabled、enabled 比较多，由于只有这两种组件支持，而全部的组件是支持 active 伪类的。

九、线性渐变

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 上是不起做用的。

十、box-shadow

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

十一、opacity

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

十二、background-color

支持的颜色包括：

• RGB
• RGBA
• 十六进制（#ffffff）
• 精简十六进制（#FFF）（我的不是很推荐）
• 英文单词（我的不推荐）

3、其余注意事项

若是发如今 web 上样式能用，到了 native 上样式不能用，考虑过程能够以下：

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