微信小程序樣式介紹
2018-10-07
導讀：對于css不熟悉的 Android 程序員來說，開發微信小程序面臨的一個比較困難的問題就是界面的排版了。微信小程序的排版就跟wxml和wxss有關了，它們兩者相當于android的布局文件，其中wxm...
對于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 | 畫布 | ||
二、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文件只作用于當前頁面，并對全局樣式中的相同屬性會覆蓋。
第二部分：如何開通一個小商店
- 關注官方公眾號 -
咨詢電話：4006-089-731