Weex 样式开发规范总结

最新推荐文章于 2020-07-10 16:56:15 发布

置顶林涧

最新推荐文章于 2020-07-10 16:56:15 发布

阅读量1.9k

点赞数

分类专栏： Web前端 native weex 文章标签： Weex Vue 原生

本文链接：https://blog.youkuaiyun.com/u010644262/article/details/102845321

版权

Web前端同时被 3 个专栏收录

37 篇文章

订阅专栏

native

5 篇文章

订阅专栏

weex

5 篇文章

订阅专栏

样式表和 CSS 规则是由 Weex js 框架和原生渲染引擎管理的。出现性能考虑，Weex 目前只支持单个类选择器，并且只支持 CSS 规则的子集。在Weex里，每一个Vue组件的样式都是scoped。

一、盒模型

Weex 盒模型基于 CSS 盒模型，每个 Weex 元素都可视作一个盒子。

盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 margin edge, 边框边界 border edge, 内边距边界 padding edge 与内容边界 content edge。

Weex 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。
在 Android 平台，Weex 只支持 overflow:hidden。
在 iOS 上，Weex 支持 overflow:hidden 和 overflow:visible，默认是 overflow:visible。

二、Flexbox

Weex 布局模型基于 CSS Flexbox，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。Flexbox 包含 flex 容器和 flex 成员项。文档中未说明的 flexbox 属性均不支持：如 order、flex-flow 等。

在 Weex 中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性。

1、direction

决定了文字方向和Flex容器的基线方向。默认值为ltr（从左到右排布）；

2、flex-direction

flex-direction定义了 flex 容器中 flex 成员项的排列方向，默认值为 column。

column：从上到下排列。
column-reverse: 从下到上排布
row：如果存在direction:ltr，则从左到右排布；如果存在direction:rtl，则从右到左排布。
row-reverse: 排布方向与flex-direction:row相反

3、flex-wrap

flex-wrap属性决定了Flex成员项在一行还是多行分布，默认值为nowrap。

nowrap: Flex成员项在一行排布，排布的开始位置由direction指定。
wrap：Flex成员项在多行排布，排布的开始位置由direction指定
wrap-reverse: 行为类似于wrap，排布方向与其相反。

4、justify-content

定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。可选值为 flex-start | flex-end | center | space-between，默认值为 flex-start。

flex-start：是默认值，所有的 flex 成员项都排列在容器的前部；
flex-end：则意味着成员项排列在容器的后部；
center：即中间对齐，成员项排列在容器中间、两边留白；
space-between：表示两端对齐，空白均匀地填充到 flex 成员项之间。

5、align-items

定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 stretch | flex-start | center | flex-end，默认值为 stretch。

stretch 是默认值，即拉伸高度至 flex 容器的大小；
flex-start 则是上对齐，所有的成员项排列在容器顶部；
flex-end 是下对齐，所有的成员项排列在容器底部；
center 是中间对齐，所有成员项都垂直地居中显示。

三、定位

Weex 支持 position 定位，用法与 CSS position 类似。为元素设置 position 后，可通过 top、right、bottom、left 四个属性设置元素坐标。

position：

设置定位类型。可选值为 relative | absolute | fixed | sticky，默认值为 relative。

如果定位元素超过容器边界，在 Android 下，超出部分将不可见，原因在于 Android 端元素 overflow 默认值为 hidden，但目前 Android 暂不支持设置 overflow: visible。

四、书写规范

项目开发css 书写规范：

1、样式简写

不支持简写法，所有类似margin: 0 0 10px 10px的都是不支持的，margin、padding必须明确分开定义；

.form-new { 
    width: 750px;    
    background-color: #ffffff;
    padding-left: 15wx;
    padding-right: 15wx;
    padding-bottom: 10wx;  
    padding-top: 10wx;
    font-size: 14wx;
    color: #666;  
}

2、样式嵌套

Weex不支持且套写法，即使使用了预处理器, css嵌套的写法也是会导致样式失效的；

3、默认尺寸

Weex默认使用750px * 1334px作为适配尺寸；

4、z-index

Native中不支持z-index，越靠后写的展示在最上层；

5、伪类

Weex 支持四种伪类：active, focus, disabled, enabled，不支持css中的after , before 伪类选择器；

6、border

border 画三角的差异性：在ios / andorid 上显示的是方形；

7、class

class样式类名不支持多个分割线写法，比如select-center-list-item 会提示SyntaxError: No identifiers allowed directly after numeric literal；

8、引入样式文件

Native环境下不存在全局样式, 在js文件中import ‘index.css’无效，但支持单独import样式文件。

@charset "UTF-8";
@import url('../global/fn.less');        // 功能样式 
body{
    background-color: #f5f7f6;
}
.container {  
    position: absolute;	
	width: 750px;
    right: 0;
    bottom: 0;
    left: 0;
}

9、渐变

weex不支持径向渐变radial-gradient,只支持创建线性渐变。并且只支持两种颜色的渐变。渐变方向如下

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

background-image优先级高于background-color，这意味着同时设置background-image和background-color,后者会被覆盖。

.submit-on {
    color: #fff;     
    background-image: linear-gradient(to right, #ff6831, #ff974d);
}

10、单位

Weex 支持'wx' 和‘px’ 长度单位，且不可忽略；不支持'em'、'rem'、'%'、'pt'这类长度单位，在web端可以利用插件'postcss-plugin-px2rem' 将px转换成rem , 插件'postcss-plugin-weex' 将'wx'转化成‘px’。

11、样式继承

Native 中，子元素不能继承父元素样式，各原生样式相对独立（0.20版本以下）。0.20版本以上richtext 中的部分样式可被继承。

12、样式需要声明scoped 属性，宽度设置不支持 %

参考资料

Weex 通用样式