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