|
對于css不熟悉的Android程序員來說，開發微信小程序面臨的一個比較困難的問題就是界面的排版了。微信小程序的排版就跟wxml和wxss有關了，它們兩者相當于android的布局文件，其中wxml指定了界面的框架結構，而wxss指定了界面的框架及元素的顯示樣式。
一、wxml
界面結構wxmL比較容易理解，主要是由八大類基礎組件構成：
|
一、視圖容器(View Container)： |
二、基礎內容(Basic Content) |
|
組件名 |
說明 |
組件名 |
說明 |
|
view |
視圖容器 |
icon |
圖標 |
|
scroll-view |
可滾動視圖容器 |
text |
文字 |
|
swiper |
可滑動的視圖容器 |
progress |
進度條 |
|
三、表單組件(Form) |
四、操作反饋組件(Interaction) |
|
組件名 |
說明 |
組件名 |
說明 |
|
button |
按鈕 |
action-sheet |
上拉菜單 |
|
form |
表單 |
modal |
模態彈窗 |
|
input |
輸入框 |
progress |
進度條 |
|
checkbox |
多項選擇器 |
toast |
短通知 |
|
radio |
單項選擇器 |
五、導航(Navigation) |
|
picker |
列表選擇器 |
組件名 |
說明 |
|
slider |
滑動選擇器 |
navigator |
應用內跳轉 |
|
switch |
開關選擇器 |
|
label |
標簽 |
|
六、多媒體(Media) |
七、地圖(Map) |
|
組件名 |
說明 |
組件名 |
說明 |
|
audio |
音頻 |
map |
地圖 |
|
image |
圖片 |
|
video |
視頻 |
|
八、畫布(Canvas) |
|
組件名 |
說明 |
|
canvas |
畫布 |
關于這八大類的屬性和具體用法可參考以下參考文獻鏈接：
http://www.w3cschool.cn/weixinapp/itz51q8o.html
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
二、wxss
wxml理解起來容易，但光搭好了框架，并不能達到我們想要的界面效果，這就需要用到wxss樣式了。
wxss樣式決定了組件應該如何顯示，并在css的基礎上做了一些功能擴展，主要包括：
1.尺寸單位
rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。一般以iphone6屏幕做為視覺設計標準。
rpx 與 px單位換算如下：
|
設備 |
rpx換算px (屏幕寬度/750) |
px換算rpx (750/屏幕寬度) |
|
iPhone5 |
1rpx = 0.42px |
1px = 2.34rpx |
|
iPhone6 |
1rpx = 0.5px |
1px = 2rpx |
|
iPhone6s |
1rpx = 0.552px |
1px = 1.81rpx |
2.樣式導入
可以使用@import語句來導入外聯樣式表，其后面跟需要導入外聯樣式表的相對路徑，并以分號結束。
例如：
/** other.wxss **/
.appText{
margin:10px;
}
/** app.wxss **/
@import "other.wxss";
.content_text:{
margin:15px;
}
app.wxss是全局樣式，作用于每一個頁面，而page下的每一個的wxss文件只作用于當前頁面，并對全局樣式中的相同屬性會覆蓋。
對于微信小程序wxss樣式的使用來說，其實大部分都和css樣式一致，下面簡單的進行介紹一下：
|
wxss樣式屬性 |
|
一、wxss display(顯示) |
|
屬性 |
說明 |
|
flex |
多欄多列布局 |
flex-direction:row/column |
|
inline-block |
行內塊元素 |
|
inline |
此元素會被顯示為內聯元素，元素前后沒有換行符 |
|
inline-table |
作為內聯表格來顯示（類似 ），表格前后沒有換行符
|
inline-flex |
將對象作為內聯塊級彈性伸縮盒顯示 |
|
none |
此元素不會被顯示 |
|
block |
此元素將顯示為塊級元素，此元素前后會帶有換行符 |
|
list-item |
此元素會作為列表顯示 |
|
table |
會作為塊級表格來顯示（類似 ），表格前后帶有換行符））））））
）
|
table-footer-group |
作為一個或多個行的分組來顯示（類似 |
|
inherit |
從父元素繼承 display 屬性的值 |
|
flex:多欄多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml |
|
table-caption |
作為一個表格標題顯示（類似 |
|
table-cell |
作為一個表格單元格顯示（類似 |
和 |
） |
|
table-column |
作為一個單元格列顯示（類似 |
|
table-column-group |
作為一個或多個列的分組來顯示（類似 |
|
table-row |
作為一個表格行顯示（類似 |
|
table-row-group |
作為一個或多個行的分組來顯示（類似 |
|
table-header-group |
作為一個或多個行的分組來顯示（類似 |
|
二、wxss position(定位) |
|
屬性 |
說明 |
|
absolute |
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
|
relative |
生成相對定位的元素，相對于其正常位置進行定位。
因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 |
|
fixed |
生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
|
static |
默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
|
inherit |
規定應該從父元素繼承 position 屬性的值 |
|
三、wxss float(浮動) |
|
屬性 |
說明 |
|
left |
元素向左浮動 |
|
right |
元素向右浮動 |
|
none默認值 |
元素不浮動，并會顯示在其在文本中出現的位置。 |
|
inherit |
規定應該從父元素繼承 float 屬性的值。 |
|
四、wxss background(背景) |
|
屬性 |
說明 |
語法(屬性值) |
|
background |
簡寫屬性，作用是將背景屬性設置在一個聲明中 |
background: color position size repeat origin clip attachment image; |
|
background-color |
指定要使用的背景顏色 |
|
background-position |
指定背景圖像的位置 |
background-position:center |
|
background-size |
指定背景圖片的大小 |
background-size:80px 60px;寬度 高度 |
|
background-repeat |
指定如何重復背景圖像 |
repeat,repeat-x,repeat-y,no-repeat,inherit |
|
background-origin |
指定背景圖像的定位區域 |
padding-box 背景圖像填充框的相對位置
border-box 背景圖像邊界框的相對位置
content-box 背景圖像的相對位置的內容框 |
|
background-clip |
指定背景圖像的繪畫區域 |
屬性值，同上 |
|
background-attachment |
設置背景圖像是否固定或者隨著頁面的其余部分滾動。 |
scroll 背景圖片隨頁面的其余部分滾動。這是默認
fixed 背景圖像是固定的
inherit 指定background-attachment的設置應該從父元素繼承
local 背景圖片隨滾動元素滾動 |
|
background-image |
指定要使用的一個或多個背景圖像 |
url('URL') 圖像的URL
none 無圖像背景會顯示。這是默認
inherit 指定背景圖像應該從父元素繼承 |
|
五、wxss border(邊框) |
|
屬性 |
說明 |
語法(屬性值) |
|
border |
簡寫屬性，用于把針對四個邊的屬性設置在一個聲明 |
border:5px solid red; |
|
border-width |
用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度 |
border-top-width 上右下左邊框厚度 屬性值：thin medium thick length |
|
border-style |
設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。 |
border-top-width 上右下左邊框樣式 屬性值：solid,dashed,dotted,double等 |
|
border-color |
元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色 |
border-top-width 上右下左邊框顏色 |
|
六、xss 輪廓（outline） |
|
屬性 |
說明 |
語法(屬性值) |
|
outline |
在一個聲明中設置所有的外邊框屬性 |
outline: outline-color, outline-style, outline-width |
|
outline-color |
設置外邊框的顏色 |
|
outline-style |
設置外邊框的樣式。 |
屬性值：solid,dashed,dotted,double等 |
|
outline-width |
設置外邊框的寬度 |
屬性值：thin medium thick length |
|
七、xss 文本屬性（text） |
|
屬性 |
說明 |
語法(屬性值) |
|
color |
設置文本顏色 |
|
direction |
設置文本方向。 |
ltr:文本方向從左到右;rtl:文本方向從右到左 |
|
letter-spacing |
設置字符間距 |
|
line-height |
設置行高 |
|
text-align |
對齊元素中的文本 |
left：把文本排列到左邊。默認值，由瀏覽器決定。
right：把文本排列到右邊。
center：把文本排列到中間。
justify：實現兩端對齊文本效果。
inherit: 規定應該從父元素繼承 text-align 屬性的值。 |
|
text-decoration |
向文本添加修飾 |
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
blink 定義閃爍的文本。 |
|
text-indent |
縮進元素中文本的首行 |
|
text-shadow |
設置文本陰影 |
text-shadow: h-shadow v-shadow blur color;
h-shadow:水平陰影的位置,允許負值;
v-shadow:垂直陰影的位置,允許負值;
blur:模糊的距離;
color:陰影的顏色 |
|
text-transform |
控制元素中的字母 |
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母，僅有小寫字母。 |
|
unicode-bidi |
設置或返回文本是否被重寫 |
|
vertical-align |
設置元素的垂直對齊 |
|
white-space |
設置元素中空白的處理方式 |
|
word-spacing |
設置字間距 |
|
八、xss 字體屬性（font） |
|
屬性 |
說明 |
語法(屬性值) |
|
font |
在一個聲明中設置所有字體屬性 |
font:font-style font-variant font-weight font-size/line-height font-family(按順序) |
|
font-style |
指定文本的字體樣式 |
normal 默認值。瀏覽器顯示一個標準的字體樣式。
italic 瀏覽器會顯示一個斜體的字體樣式。
oblique 瀏覽器會顯示一個傾斜的字體樣式。
inherit 規定應該從父元素繼承字體樣式。 |
|
font-variant |
以小型大寫字體或者正常字體顯示文本 |
normal 默認值。瀏覽器會顯示一個標準的字體。
small-caps 瀏覽器會顯示小型大寫字母的字體。
inherit 規定應該從父元素繼承 font-variant 屬性的值。 |
|
font-weight |
指定字體的粗細 |
normal 默認值。定義標準的字符。
bold 定義粗體字符。
bolder 定義更粗的字符。
lighter 定義更細的字符。
inherit 規定應該從父元素繼承字體的粗細。 |
|
font-size |
指定文本的字體大小 |
smaller 把 font-size 設置為比父元素更小的尺寸。
larger 把 font-size 設置為比父元素更大的尺寸。
length 把 font-size 設置為一個固定的值。
% 把 font-size 設置為基于父元素的一個百分比值。 |
|
font-family |
指定文本的字體系列 |
|
九、xss margin(外邊距)（margin） |
|
屬性 |
說明 |
語法(屬性值) |
|
margin |
在一個聲明中設置所有外邊距屬性。 |
margin:10px 5px 15px 20px;(上邊距，右邊距，下邊距，左邊距) |
|
margin-top |
設置元素的上外邊距。 |
|
margin-right |
設置元素的右外邊距。 |
|
margin-bottom |
設置元素的下外邊距。 |
|
margin-left |
設置元素的左外邊距 |
|
十、xss padding(填充)（padding） |
|
屬性 |
說明 |
語法(屬性值) |
|
padding |
使用縮寫屬性設置在一個聲明中的所有填充屬性 |
padding:10px 5px 15px 20px;(上填充，右填充，下填充，左填充) |
|
padding-top |
設置元素的頂部填充。 |
|
padding-right |
設置元素的右部填充 |
|
padding-bottom |
設置元素的底部填充 |
|
padding-left |
設置元素的左部填充 |
|
十一、xss 選擇器 |
|
選擇器 |
樣例 |
樣例描述 |
|
.class(類選擇器) |
.intro |
選擇所有擁有class="intro"的組件 |
|
#id(id選擇器) |
#firstname |
選擇擁有id="firstname"的組件 |
|
element |
view |
選擇所有view組件 |
|
element, element |
view checkbox |
選擇所有文檔的view組件和所有的checkbox組件 |
|
::after |
view::after |
在view組件后邊插入內容 |
|
::before |
view::before |
在view組件前邊插入內容 |
有一些屬性值太多且實際應用的比較少 可以參考w3cschool的css文檔：
|
|
|
