微信小程序學習筆記-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>