1、小程序中組件的分類

小程序中的組件也是由宿主環境提供的，開發者可以基于組件快速搭建出漂亮的頁面結構。官方把小程序的組件分為了9大類，分別是：

* 視圖容器，* 基礎內容，* 表單組件，* 導航組件

媒體組件，map地圖組件，canvas畫布組件，開放能力，無障礙訪問

2、常用的視圖容器類組件

1、view

普通視圖區域

類似于HTML中的div，是一個塊級元素

常用來實現頁面的布局效果

2、scroll-view

可滾動的視圖區域

常用來實現滾動列表效果

* 給組件添加scroll-y表示可以在縱向上滑動，需要加一個固定的高度

3、swiper和swiper-item

輪播圖容器組件 和 輪播圖item組件

* swiper組件的常用屬性

屬性	類型	默認值	說明
indicator-dots	boolean	false	是否顯示面板指示點
indicator-color	color	rgba(0,0,0,.3)	指示點顏色
indicator-active-color	color	#000000	當前選中的指示點顏色
autoplay	boolean	false	是否自動切換
interval	number	5000	自動切換時間間隔
circular	boolean	false	是否采用銜接滑動

3、常用的基礎內容組件

1、text

文本組件

類似于HTML中的span標簽，是一個行內元素

通過text組件的selectable屬性，實現長按選中文本內容的效果

2、rich-text

通過rich-text組件的nodes屬性節點，把HTML字符串渲染為對應的UI結構

即可以識別文本中的標簽

4、其他常用組件

1、button

按鈕組件

功能比HTML中的button按鈕豐富

通過open-type屬性可以調用微信提供的各種功能（客服、轉發、獲取用戶授權、獲取用戶信息等）

type="primary" 主色調按鈕

type="warn" 警告按鈕

size="mini" 小尺寸按鈕

加上plain為鏤空按鈕

2、image

圖片組件

image組件默認寬度約為300px、高度約為240px

image組件的mode屬性用來指定圖片的裁剪和縮放功能，常用的mode屬性值如下：

mode值	說明
scaleToFill	（默認值）縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿image元素
aspectFit	縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來，也就是說，可以完整地將圖片顯示出來
aspectFill	縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取
widthFix	縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變
heightFix	縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變

3、navigator

頁面導航組件

類似于HTML中的a鏈接

5、小程序的宿主環境-API

概述：小程序中的API是由宿主環境提供的，通過這些豐富的小程序API，開發者可以方便的調用微信提供的能力，例如：獲取用戶信息、本地存儲、支付功能等?

分類：

1、事件監聽API

特點：以on開頭，用來監聽某些事件的觸發

舉例：wx.onWindowResize(function callback)監聽窗口尺寸變化的事件?

2、同步API

特點1：以Sync結尾的API都是同步API

特點2：同步API的執行結果，可以通過函數返回值直接獲取，如果執行出錯會拋出異常

舉例：wx.setStorageSync('key','value')向本地存儲中寫入內容

3、異步API

特點：類似于JQuery中的$.ajax(options)函數，需要通過success、fail、complete接收調用的結果

舉例：wx.request()發起網絡數據請求，通過success回調函數接收數據