微信小程序：其中wxml和wxss的樣式說明

一、簡介

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

二、wxml

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

關於這八大類的屬性和具體用法可參考以下參考文獻鏈接：

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單位換算如下：

2.樣式導入

可以使用@import語句來導入外聯樣式表，其後面跟需要導入外聯樣式表的相對路徑，並以分號結束。

例如：

/** other.wxss **/

.appText{

  margin:10px;

}

 
/** app.wxss **/

@import “other.wxss“;

.content_text:{

  margin:15px;

}

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

對於微信小程序wxss樣式的使用來說，其實大部分都和css樣式一致，下面簡單的進行介紹一下：

wxss樣式屬性

（1）wxss display（顯示）

flex:多欄多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml

（2）wxss position（定位）

（3）wxss float（浮動）

（4）wxss backgrounp（背景）

（5）wxss border（邊框）

（6）wxss outline（輪廓）

（7）wxss text（文件屬性）

（8）wxss font（字體屬性）

（9）wxss margin（外邊距）

（10）wxss padding（填充）

（11）wxss 選擇器

有一些屬性值太多且實際應用的比較少 可以參考w3cschool的css文檔：

http://www.w3cschool.cn/css/css-tutorial.html

對於微信小程序的文檔手冊可參考以下鏈接：

http://www.w3cschool.cn/weixinapp/9wou1q8j.html

微信小程序：其中wxml和wxss的樣式說明