微信小程序樣式介紹

2018-10-07

導讀：對于css不熟悉的 Android 程序員來說，開發(fā)微信小程序面臨的一個比較困難的問題就是界面的排版了。微信小程序的排版就跟wxml和wxss有關了，它們兩者相當于android的布局文件，其中wxm...

對于css不熟悉的Android程序員來說，開發(fā)微信小程序面臨的一個比較困難的問題就是界面的排版了。微信小程序的排版就跟wxml和wxss有關了，它們兩者相當于android的布局文件，其中wxml指定了界面的框架結構，而wxss指定了界面的框架及元素的顯示樣式。

一、wxml

界面結構wxmL比較容易理解，主要是由八大類基礎組件構成：

二、wxss

wxml理解起來容易，但光搭好了框架，并不能達到我們想要的界面效果，這就需要用到wxss樣式了。

wxss樣式決定了組件應該如何顯示，并在css的基礎上做了一些功能擴展，主要包括：

1.尺寸單位

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。一般以iphone6屏幕做為視覺設計標準。

rpx 與 px單位換算如下：

2.樣式導入

可以使用@import語句來導入外聯(lián)樣式表，其后面跟需要導入外聯(lián)樣式表的相對路徑，并以分號結束。

例如：

/** other.wxss **/

.appText{

margin:10px;

}

/** app.wxss **/

@import "other.wxss";

.content_text:{

margin:15px;

}

app.wxss是全局樣式，作用于每一個頁面，而page下的每一個的wxss文件只作用于當前頁面，并對全局樣式中的相同屬性會覆蓋。

第二部分：如何開通一個小商店

上一篇：Westore發(fā)布小程序插件開發(fā)模板和其他重大更新及原理 下一篇：微信小程序實現(xiàn)移動端滑動分頁效果代碼展示