本文介紹小程序框架中為我們提供的組件，還專門對view、text、image等組件的基本使用進行了說明，還補充了為標(biāo)簽設(shè)置樣式的幾種方式并提供綜合案例。
1.0 組件
組件就是控件或者說標(biāo)簽。
小程序官方為我們提供了各種各樣的組件，按照類型來劃分可以分成：視圖容器組件、基礎(chǔ)內(nèi)容組件、表單組件、導(dǎo)航組件、多媒體組件、地圖組件和畫布組件共七類30種。
小程序中的組件和HTML中的元素差不多，一個組件是指從組件開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼，因為平臺的差異性所以小程序中的組件可能會被轉(zhuǎn)譯為不同端對應(yīng)的代碼，所以在進行小程序開發(fā)的時候不能使用除上述組件之外的標(biāo)簽。
組件的定義
? 組件是視圖層的基本組成單元。
? 組件會自帶一些功能和微信風(fēng)格的樣式。
? 組件通常包括開始和結(jié)束標(biāo)簽、修飾該組件的屬性以及兩個標(biāo)簽中間的內(nèi)容。
組件的屬性
組件可以擁有屬性，屬性用于對組件進行配置。
組件的屬性可以分為所有組件都擁有的共同屬性和某些組件才有的特定屬性。
組件的屬性只能用在開始標(biāo)簽或者是單個自閉合標(biāo)簽身上，不能用于結(jié)束標(biāo)簽。
組件中可以設(shè)置多個屬性，屬性具有屬性名稱和屬性值兩部分，組件的屬性名稱都是小寫。
所有組件都擁有的共同屬性
?
id??組件的唯一標(biāo)識，保持整個頁面唯一。
?style??同HTML中的style一致，用來動態(tài)設(shè)置組件的內(nèi)聯(lián)樣式。
?hidden??組件是否顯示，默認所有均顯示可通過設(shè)置為false隱藏組件。
?class??組件的樣式類，可以在WXSS中通過類選擇器來選擇標(biāo)簽設(shè)置樣式。
?bind../catch..??用于綁定邏輯層事件的屬性，bind為冒泡，catch為非冒泡。
?data-??自定義屬性，事件觸發(fā)時會發(fā)送給事件處理函數(shù)，函數(shù)中可通過datasl來獲取對應(yīng)的值。
2.0 view組件
view組件是視圖容器組件的一種，屬于塊級組件(標(biāo)簽)。
view組件類似于HTML中的div標(biāo)簽，在小程序開發(fā)中布局展示，是小程序界面布局中最常用的UI組件，任何一種復(fù)雜的布局都可以通過嵌套view組件設(shè)置組件的樣式來實現(xiàn)。
下面列出view組件的主要屬性
hover是否啟動點擊態(tài)，默認為false。
hover-start-time標(biāo)簽按下后多久出現(xiàn)點擊態(tài)，默認為50毫秒。
hover-stay-time 手指松開后點擊態(tài)的保留時間，默認為400毫秒。
hover-class 標(biāo)簽被按下去的樣式，默認值為none表示沒有點擊效果。
view組件的使用示例
//.wxml中的代碼
<view hover-class='view-hover-class' hover-start-time='1000'>我是第1個View組件</view>
<view hidden='{{true}}'>我是第2個View組件</view>
<view>我是第3個View組件</view>
<view>我是第4個View組件</view>
//.wxss中的代碼
view{
padding: 30rpx;
text-align: center;
background: #195;
margin: 20rpx;
color: #fff;
}
.view-hover-class
{
background: #9e2
}
給標(biāo)簽設(shè)置樣式
? 內(nèi)聯(lián)樣式設(shè)置。
? 頁面樣式設(shè)置。
? 外部樣式設(shè)置。
? 全局樣式設(shè)置。
給view標(biāo)簽設(shè)置樣式的四種方式代碼示例
//.wxml文件
<!-- 1.0 內(nèi)聯(lián)樣式 -->
<view style = "width:300px;font-size:40rpx;background:#195;">我是第1個View組件</view>
<!-- 2.0 頁面樣式文件設(shè)置 -->
<view class='pageStyleView'>我是第2個View組件</view>
<!-- 3.0 引入外部樣式文件設(shè)置 -->
<view class='outPageViewClass'>我是第3個View組件</view>
<!-- 4.0 使用全局樣式文件設(shè)置 -->
<view class='globalViewClass'>我是第4個View組件</view>
<view>我是第5個View組件</view>
//.wxss文件
@import "../../style/demo.wxss";
.pageStyleView
{
background: #830;
color: #fff;
}
view
{
margin: 30rpx;
}
//demo.wxss文件
.outPageViewClass
{
background: yellow;
color: red;
border: 1px solid #000;
width: 60%
}
//app.wxss文件
.globalViewClass{
background: #503;
color: #fff;
font-family: "KaiTi";
font-size: 50rpx;
width: 90%
}
3.0 image組件
小程序提供了image組件來處理圖片，同HTML中的img標(biāo)簽類型。
下面列出image組件的主要屬性
binderror 加載圖片失敗時，發(fā)布到 AppService 的事件名。
bindload 加載圖片完畢時，發(fā)布到 AppService 的事件名。
src 圖片資源地址，可以是本地圖片的相對路徑也可以是URL地址。
mode 圖片的縮放和剪裁模式，image組件中供提供了4中縮放和9種剪裁模式。
lazy-load 圖片懶加載，布爾類型默認false，只對page與scroll-view下的image有效。
這里列出image組件中mode屬性的取值范圍
裁剪 top 不縮放圖片，只顯示圖片的頂部區(qū)域
裁剪 bottom 不縮放圖片，只顯示圖片的底部區(qū)域
裁剪 center 不縮放圖片，只顯示圖片的中間區(qū)域
裁剪 left 不縮放圖片，只顯示圖片的左邊區(qū)域
裁剪 right 不縮放圖片，只顯示圖片的右邊區(qū)域
裁剪 top left 不縮放圖片，只顯示圖片的左上邊區(qū)域
裁剪 top right 不縮放圖片，只顯示圖片的右上邊區(qū)域
裁剪 bottom left 不縮放圖片，只顯示圖片的左下邊區(qū)域
裁剪 bottom right 不縮放圖片，只顯示圖片的右下邊區(qū)域
縮放 widthFix 寬度不變，高度自動變化，保持原圖寬高比不變
縮放 scaleToFill 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放 aspectFit 保持縱橫比縮放圖片，使圖片的長邊能完全顯示。也就是說，可以完整地將圖片顯示出來。
縮放 aspectFill 保持縱橫比縮放圖片，只保證圖片短邊能完全顯示。圖片通常只在水平或垂直方向是完整的。
注意：image組件默認寬度300px、高度225px ，二維碼/小程序碼圖片不支持長按識別。
4.0 text組件
text組件用于文本內(nèi)容的展示。
下面列出text組件的主要屬性
decode 是否解碼。
selectable 文本是否可選。
space 顯示連續(xù)空格的方式，可選值有ensp、emsp和nbsp[0.5 | 1 | 自適應(yīng)]
text組件注意點說明
[01] text組件屬于內(nèi)聯(lián)元素。
[02] text組件的內(nèi)部只能嵌套text標(biāo)簽。
[03] 小程序中只有text組件支持長按選中。
這里給出text組件使用示例
<text>我是text標(biāo)簽01\n</text>
<text selectable='true'>我是text標(biāo)簽02\n</text>
<text decode='true'>我是text標(biāo)簽03 嘻嘻\n</text>
<text decode='false'>解碼 嘻嘻 (空格) <(小于) >(大于)
&(&) '(')  (半角空格)  (全角空格)\n</text>
<text decode='{{false}}'>解碼 嘻嘻 (空格) <(小于) >(大于)
&(&) '(')  (半角空格)  (全角空格)\n</text>
設(shè)置讓標(biāo)簽隱藏的N中方式
?
wx:if設(shè)置為true則顯示(懶加載的)
?display設(shè)置為none，不占位也不顯示
?visibility設(shè)置為hidden，占位但是不顯示
?hidden默認不設(shè)置該屬性那么就是顯示的 不占位也不顯示
<text hidden='true'>我是text標(biāo)簽05\n</text>
<text style='display:none;'>我是text標(biāo)簽06\n</text>
<text wx:if='{{true}}'>我是text標(biāo)簽07\n</text>
<text style='visibility:hidden'>我是text標(biāo)簽08\n</text>
5.0 綜合案例
這里給出綜合案例的目標(biāo)效果和實現(xiàn)代碼
//wxml結(jié)構(gòu)文件的內(nèi)容
<view class='info-view'>
<view class='content info-view-left'>
<text class='info-name'>楊勇嘻哈</text>
<image class='info-edit' src='../../images/編輯.png' bindtap='editClick'></image>
<text class='info-description'>梧州學(xué)院，定制您的成功人生。</text>
</view>
<view class='content info-view-right'>
<image src='https://wx.qlogo.cn/mmopen/vi_324a6p....Yd2FZVJSw/132'></image>
</view>
</view>
//wxss樣式文件的內(nèi)容
.info-view
{
width: 100%;
height: 210rpx;
line-height: 220rpx;
background: #000;
}
.content{
top: 30rpx;
height: 150rpx;
line-height: 150rpx;
position: absolute;
color: #fff;
}
.info-view-left
{
left: 40rpx;
width: 400rpx;
}
.info-view-right
{
right: 40rpx;
width: 150rpx;
}
.info-name
{
display: block;
width: 200rpx;
height: 100rpx;
line-height: 100rpx;
font-size: 45rpx;
}
.info-edit
{
display: block;
width: 50rpx;
height: 50rpx;
position: absolute;
left: 220rpx;
top: 25rpx;
}
.info-description
{
display: block;
height: 50rpx;
line-height: 50rpx;
font-size: 30rpx;
}
.info-view-right image
{
width: 120rpx;
height: 120rpx;
border-radius: 20rpx;
margin-top: 15rpx;
margin-left: 15rpx;
}
6.0 第三方UI組件庫介紹
wx-charts [stars 2500+]
微信小程序圖表charts組件
iview-weapp [stars 2400+]
高質(zhì)量的微信小程序 UI 組件庫
官網(wǎng)和文檔地址(https://weapp.iviewui.com/)
vant-weapp [stars 6500+]
輕量、可靠的小程序 UI 組件庫。
官網(wǎng)和文檔地址(https://youzan.github.io/vant-weapp/#/intro)
wux-weapp[stars 2000+]
微信小程序自定義 UI 組件
官網(wǎng)和文檔地址(https://wux-weapp.github.io/wux-weapp-docs/#/list)
weui-wxss [stars 7000+]
WeUI 是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫，由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計，包含button、cell、dialog、 progress、 toast、article、icon等各式元素。
官網(wǎng)和文檔地址(https://weui.io/)
