3.2　內容組件

相較于視圖組件，內容組件的內容會少很多。在微信小程序中，僅提供了icon（圖標組件）、text（文本組件）、rich-text（富文本組件）、progress（進度條組件）。通常大家都會選擇設置CSS樣式來改變文字效果，所以富文本組件不是很常用。所以，在本節的學習中主要掌握圖標、文本和進度條組件即可。

3.2.1　圖標icon

其實，icon的功能實際上用image也可以實現，主要是小程序官方提供了很多內置的圖標，方便開發者使用，而且這些圖標與系統風格一致。icon的自帶屬性如表3.6所示。

icon的type屬性對應的樣式如表3.7所示。

【示例3-6】

在演示代碼之前，我們先修改index.wxml和index.js，增加基礎內容組件的演示按鈕。

首頁效果如圖3.7所示。

接下來繼續演示icon組件。它的屬性不多，這里直接演示3個屬性效果，代碼如下：

運行效果如圖3.8所示。

【代碼解析】第1個view用于樣式不同的type樣式，第2個view演示尺寸的變化，最后一個是顏色的變化。

3.2.2　進度條progress

progress是進度條組件。在日常開發中，進度條是十分常見的，需要用戶等待的地方基本都要使用一個進度條。progress的自帶屬性如表3.8所示。

【示例3-7】

使用progress組件創建一個從0到100的進度條，代碼如下：

運行效果如圖3.9所示。

【代碼解析】我們通過percent控制百分比，通過stroke-width調整寬度，通過show-info顯示進度，最后的active也是不可少的，否則進度會沒有動畫直接跳到100%。從圖中可以看到進度到了27%。讀者可以自行運行代碼，看看進度條的動畫。

3.2.3　文本text

text是最基礎的文本組件。它提供了一些方便的屬性，所以需要處理文字的時候盡量使用text而非view組件。text的自帶屬性如表3.9所示。

space的合法值如表3.10所示。

【示例3-8】

使用text組件演示selectable和space屬性，代碼如下：

運行效果如圖3.10所示。

【代碼解析】從中可以看出，設置了selectable之后，長按這塊文字即可選中。A、B、C、D四行文字分別對應了空格設置的狀態，對照表格的說明查看即可。