2.2 小程序的基礎組件

本節會介紹大部分經常使用的微信小程序基礎組件，但一些簡單的表單元素不會詳細介紹，只選擇了一部分經常使用但在官方文檔中較少出現的或非常零散的組件。

2.2.1 圖標組件：icon

微信為了避免開發者將大量的時間花費在美術設計上，專門提供了一套圖標組件。雖然提供的圖標和配置都非常簡單，但對于開發一個符合微信設計風格的小程序而言，這些完全夠用且符合簡潔的設計風格，只需要配置即可。這些圖標顯示的速度也遠遠超過使用圖片自制的圖標。

小程序全部的icon如表2-2所示。

表2-2 小程序全部的icon

當然了，所有圖標的顏色和大小都是可以更改的，只需要配置其size和color屬性即可。最基本的icon如下所示。

＜icon type="" size="" color=""/＞

注意：在大多數情況下，微信小程序提供的icon并不能滿足我們的全部需求，這個時候，適當地使用圖片和字符也是一種很好的選擇。

2.2.2 文字組件：text

文字組件是所有組件中最重要的一個組件。其實在小程序中，在任何的標簽內輸入需要顯示的文字，都可以實現文字的輸出，為什么還需要這個組件呢？主要是因為，只有在這個組件內，微信小程序才會對一些特殊的占位符進行解析。

占位符是否被解碼，顯示在其decode屬性中。不僅如此，在text組件中，可以在space屬性中控制是否顯示連續空格和空格的樣式。

text組件可以解析的占位符如表2-3所示。

表2-3 text組件可以解析的占位符

注意：占位符的顯示效果在不同系統中可能不同，并且在text標簽中只支持text標簽的嵌套。

2.2.3 富文本組件：rich-text

富文本組件rich-text是一個非常有用的組件，開始在小程序中是不存在的（當時需要通過手動循環來顯示文章內容）。

富文本的顯示和一般網頁的顯示有非常大的不同。該組件不能讀取純粹的HTML，只支持已經格式化的JSON對象。

rich-text基本的格式如下所示。

[{"name": "div"，"attrs": {"class": "div_class"，"style": "line-height: 19px; color:
black;"}，"children": [{"type": "text"，"text": "文字內容"}]}]

如果文字格式是不對的，則不會在任何的界面顯示正確的內容，而是直接顯示帶[“name”]等標簽的原本內容。

注意：在Node中不推薦使用String類型，因為這會讓性能下降，且在組件內會屏蔽所有節點的事件。

2.2.4 進度條組件：progress

進度條組件在用戶體驗中是很重要的一個組件，利用該組件可以對下載和上傳操作進行良好的可視化控制。

progress基本的使用方法如下所示，通過配置show-info可以決定是否顯示百分比，通過配置color、backgroundColor和activeColor可以控制進度條的顏色和背景。

＜progress percent="20" show-info /＞

2.2.5 表單組件：form

表單是一個小程序的靈魂，所有的用戶輸入都需要使用表單進行回傳。除了一般的表單應用，在小程序中另外一個應用是獲得用戶的formId。只有使用該formId才可以給用戶推送消息，一個id只可以使用一次，而這個時候，收集足夠的formId對于一個小程序是非常必要的。這也使得大量的元素都包含在一個表單中，有時甚至整個頁面都在表單中。也就是說，用戶單擊任何一個元素，都將上傳一個formId給后臺。

＜form＞元素的使用如下所示，這里的表單擁有一個輸入框和兩個相關的按鈕，并且綁定了相關事件。

＜form bindsubmit="formSubmit" bindreset="formReset"＞
＜input name="input" placeholder="please input here" /＞
＜button form-type="submit"＞Submit＜/button＞
＜button form-type="reset"＞Reset＜/button＞
＜/form＞

可以在JavaScript代碼中通過聲明綁定的事件獲得表單的情況和用戶輸入的值，其代碼如下所示，而用戶的值可以在e事件中獲取。

formSubmit（e）{
  console.log（'form發生了submit事件，攜帶數據為：'，e.detail.value）
}，
formReset（）{
  console.log（'form發生了reset事件'）
}

同樣，如果需要綁定一個獲得formId的表單，也需要在＜form＞＜/form＞標簽中增加綁定事件，代碼如下所示。

＜form bindsubmit="formSubmit" bindreset="formReset" report-submit＞
＜/form＞

當通過這樣的方式提交后，將會在提交表單的事件中獲取一個用戶的formId。當然，此id需要發送至服務器端進行保存，之后才可以通過該id發送模板消息給該用戶（在模擬器中模擬的是無效formId），如圖2-1所示。

圖2-1 發送formId至服務器

具體的實例可以參考2.3.2節的圖片組件。

2.2.6 極其重要的按鈕組件：button

按鈕組件是任何一個程序都不可或缺的組件，對于小程序而言尤其如此。除了處理普通的用戶單擊事件，大量用戶權限和提示的獲取都要用到按鈕組件。

這當然就導致了和表單組件一樣的問題：大量的圖片甚至界面被制作成一個個的按鈕，只是為了方便獲取用戶的單擊事件，提示用戶打開其他的小程序廣告，或者獲取一個有效formId或展示一個獲取權限的提示。

按鈕一般需要給open-type屬性設置相應的值，代碼如下。button基本的開放能力是綁定一個事件用于接收單擊事件后的返回信息，此綁定事件和form的提交事件或者用戶自身設置的綁定事件不沖突。

＜button bindtap="綁定事件" open-type="開放能力" ……＞按鈕 ＜/button＞

button基本的開放能力如表2-4所示。

表2-4 button基本的開放能力

注意：button-hover默認為{background-color: rgba（0，0，0，0.1）; opacity: 0.7;}，從2.1.0版本起，button可作為原生組件的子節點嵌入，以便在原生組件上使用open-type的能力。

有關button組件具體的實例可參考2.3.2節。