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%) 拉掉了中間的 , 逗號）