weex 通用樣式以及需要注意的問題

2021-10-24 00:16:01 字數 4289 閱讀 4098

weex 對於 css 樣式的支援是非常有限的,並且使用樣式的時候,必須遵循 weex 定義的規則。

對於不遵循 weex 樣式規則的**,往往在 web 頁面上有效,而在 native 環境沒有任何作用。

weex 官方文件中,有專門的樣式介紹:

我最早只用 weex 的時候,想當然的覺得,反正會 vue,直接寫就行了,但是後面發現,還是需要認真的去讀官方的文件,很多注意事項,都是文件中有說明的。

weex 中,單位必須使用 px,其他都不支援,而且通常視窗寬度為 750px,在不同的平台會進行相應的計算。

比如在 web 中,會轉換成 em。

因為 native 開發中,是必須定寬高的,所以和 web 開發中很多概念是不相同的。

weex 中,native 環境的屬性樣式不會傳遞給子元素。

比如在

中設定的 text-align:center;,無法作用到其

子元素,必須在

使用 text-align。

如 不能直接寫文字內容,及

不能有子節點這種約束,需要詳細的去了解官方文件的內建元件部分。

盒模型預設是使用 box-sizing:border-box,盒模型中需要注意的很大部分是屬性樣式的簡寫是不支援的,必須要分開來寫。

盒模型更多注意內容可以看:#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-style:solid | 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:

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 屬性目前比較特殊的一點是,translate、translatey、translatex 三個的值支援百分比。

上面示例的百分比在 native 環境同樣能夠起作用

目前 transform 支援的格式:

translate( [, ]?)

translatex( )

translatey( )

scale( )

scalex( )

scaley( )

rotate( )

rotatex( ) v0.14+

rotatey( ) v0.14+

perspective( ) android 4.1及以上版本支援 v0.16+

transform-origin: number/percentage/keyword(top/left/right/bottom)

過渡動畫建議使用 animation.transition(el,{},callback) 以 js 函式的方式進行,更加的可控,能夠達到需求

transition 不支援簡寫形式,必須分開說明。

transition-property:允許過渡動畫的屬性名,不能使用 all

支援的屬性:

width

height

topbottom

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 進行線性漸變,但是只支援橫向漸變,現在不支援徑向漸變。

使用示例:

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 只支援 ios,不推薦使用

opacity 預設支援,使用方式和原來使用方式一樣,取值 0-1

支援的顏色包括:

rgbrgba

十六進製制(#ffffff)

精簡十六進製制(#fff)(個人不是很推薦)

英文單詞(個人不推薦)

如果發現在 web 上樣式能用,到了 native 上樣式不能用,考慮過程可以如下:

是否支援該樣式

書寫形式是否正確,如不能簡寫

是否拉掉了標點符號(比如 transform(30% 30%) 拉掉了中間的 , 逗號)

OPENQUERY用法以及使用需要注意的地方

對給定的鏈結伺服器執行指定的傳遞查詢。該伺服器是 ole db 資料來源。openquery 可以在查詢的 from 子句中引用,就好象它是乙個表名。openquery 也可以作為 insert update 或 delete 語句的目標表進行引用。但這要取決於 ole db 訪問介面的功能。儘管查...

需要注意的問題

決策樹id3和c4.5的差別?各自優點?boost演算法 cart 回歸樹用平方誤差最小化準則,分類樹用基尼指數最小化準則 gbdt與隨機森林演算法的原理以及區別。優化演算法中常遇到的kkt條件?作用是?最近鄰演算法knn 分類與回歸 l1和l2函式?l1和l2正則項的比較,如何解決 l1 求導困難...

const需要注意的

1.對於函式後邊新增const後,函式成為const型別,該函式中不允許對類中成員進行修改,可以認為是在該函式中,類成為了const型別。另外要注意的是,const函式中只能呼叫const型別的函式。2.對於const型別的變數來說,只能把const的賦值給非const,不能把非const賦值給co...