微信小程序學習筆記-2-常用組件介紹

微信小程序常用組件

• 組件的定義:

　　　　開發者可以利用微信團隊提供的框架中的一系列基礎組件進行快速的開發，什么是組件？

1. 組件是視圖層的基本組成單元。
2. 組件自帶一些功能與微信風格的樣式。
3. 一個組件通常包括開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之間。

　　形式:

　　　　<tagname property="value">

　　　　　Content goes here

　　　　</tagname>

　　例如:

<view class="container">
</view>

• 組件的屬性

　　　　所有組件的屬性都是小寫，以連字符"-"連接

1. 屬性類型:每個組件的屬性是分不同的類型的
2. 公共屬性:所有的主鍵都有的屬性
3. 特殊屬性

　　1.屬性的類型

　　

　　2.共同屬性

　　

　　3.特殊屬性

　　幾乎所有組件都有各自定義的屬性，可以對該組件的功能或樣式進行修飾。

• 組件及類型的說明

組件名稱	組件類型	組件說明
view	視圖容器	視圖容器
scroll-view	視圖容器	可滾動視圖容器
swiper	視圖容器	滑塊視圖容器
icon	基礎內容	圖標
text	基礎內容	文字
progress	基礎內容	進度條
button	表單	按鈕
form	表單	表單
input	表單	輸入框
checkbox	表單	多項選擇器
radio	表單	單項選擇器
picker	表單	列表選擇器
picker-view	表單	內嵌列表選擇器
slider	表單	滾動選擇器
switch	表單	開關選擇器
label	表單	標簽
navigator	導航	應用連接
audio	多媒體	音頻
image	多媒體	圖片
video	多媒體	視頻
map	地圖	地圖
canvas	畫布	畫布
contact-button	客服會話	進入客服會話按鈕

• 實例理解組件屬性

　　在根目錄下創建如下的頁面目錄

　　

　　然后在mypages.wxss文件中添加button1的樣式如下

　　

/* mypages.wxss */
.button1{
  width: 256rpx;
  height: 128rpx;
}

　　然后在mypages.wxml文件中添加如下代碼

　　

<!--mypages.wxml-->
<view class="container">
<text>我的第一個微信小程序</text>
<button id="button1" class="button1" bindtap="anyfunction">按鈕</button>
</view>

　　其中，主要是看button這個按鈕控件，其中的屬性id 由前面可知是string類型的，所以這個屬性的格式為 屬性名稱="自定義字符串"，class也是string類型的屬性，所以格式相同，后面的bingdtap屬性就是之前所介紹過的組件的事件，在這個按鈕組件中點擊按鈕，就會出發bindtap屬性所指向的在myages.js中對應的名字為"anyfunction"的方法。

　　點擊左側編譯后查看效果如下

　　boolean類型的屬性，只要寫了屬性名，那值就是為true，例如

<!--mypages.wxml-->
<view class="container">
<text>我的第一個微信小程序</text>
<button id="button1" hidden class="button1" bindtap="anyfunction">按鈕</button>
</view>

　　其中只要寫了hidden這個類型是boolean類型的屬性名字，那這個屬性就是生效的,運行效果如下，按鈕被隱藏:

　　如果想用代碼動態的去操作讓這個hidden屬性失效，只有這種方法:

<!--mypages.wxml-->
<view class="container">
<text>我的第一個微信小程序</text>
<button id="button1" hidden="{{false}}" class="button1" bindtap="anyfunction">按鈕</button>
</view>