switch元件是一個開關選擇器，wxml示例代碼如下：
說明：
name屬性設定該switch元件的名稱
checked屬性設定該switch元件是否為選中狀态，true為選中，false為不選中，不設定該屬性的話預設為false
color屬性設定該switch元件的顔色
樣式代碼如下：
運作效果：
switch元件裡有一個bindchange事件，通過該事件我們可以獲得該元件的狀态值，wxml代碼如下：
js代碼如下：
列印結果：
switch元件的官方說明文檔如下：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/switch.html">https://mp.weixin.qq.com/debug/wxadoc/dev/component/switch.html</a>
slider元件是一個滑動選擇器，也就是滑動條，wxml示例代碼如下：
min屬性設定該slider元件的最小值
max屬性設定該slider元件的最大值
step屬性 設定該slider元件的步長，也就是每拖動一次就遞增多少個數值。以上設定的是100，那麼每拖動一次就會遞增100
value屬性設定該slider元件預設選中的值
show-value屬性顯示該slider元件目前被選中的值
slider元件的官方說明文檔如下：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html">https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html</a>
radio-group是單項選擇器，也就是單選框，而其内部由多個<code>&lt;radio/&gt;</code>單選項目組成，示例代碼如下：
disabled屬性設定該radio元件為禁用狀态
radio元件的官方說明文檔如下：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/radio.html">https://mp.weixin.qq.com/debug/wxadoc/dev/component/radio.html</a>
checkbox-group是多項選擇器，也就是多選框，其内部由多個checkbox組成，示例代碼如下：
然後選擇多個：
控制台列印出來的是一個數組：
checkbox元件的官方說明文檔如下：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/checkbox.html">https://mp.weixin.qq.com/debug/wxadoc/dev/component/checkbox.html</a>
熟悉web前端開發的小夥伴應該對表單送出都不陌生，表單送出就是把表單元件中的資料都收集起來，然後向伺服器進行送出。小程式中也有form元件，它是通過觸發事件來進行資料的送出的，小程式的表單送出比web中的表單送出更為簡單一些，wxml代碼示例：
樣式代碼示例：
js代碼示例：
填寫一些資料，然後點選Submit按鈕進行表單的送出：
控制台列印的資料如下：
form表單元件的官方說明文檔如下：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html">https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html</a>
map元件是用來實作地圖功能的，wxml示例代碼：
longitude屬性用于設定中心經度
latitude屬性則用于設定中心次元
scale屬性用于設定地圖的縮放級别，取值範圍為5-18，也就是我們在手機上能夠雙指放大縮小的級别
markers屬性用于設定地圖的mark點資訊，也就是定位時的那個表示位置或者用于标記位置的圖示
bindmarkertap表示點選mark點時會觸發的事件
polyline屬性用于設定地圖的mark點路線資訊
點選地圖的mark圖示觸發事件後會進入微信的内置地圖：
注：map元件的一些功能在模拟器上不能完全顯示出來，是以研究該元件的時候，最好使用真機來調試。
本文轉自 ZeroOne01 51CTO部落格，原文連結：http://blog.51cto.com/zero01/2068721，如需轉載請自行聯系原作者