本文介紹小程序框架中為我們提供的組件，還專門對(duì)view、text苔悦、image等組件的基本使用進(jìn)行了說(shuō)明，還補(bǔ)充了為標(biāo)簽設(shè)置樣式的幾種方式并提供綜合案例椎咧。
1.0 組件
組件就是控件或者說(shuō)標(biāo)簽玖详。
小程序官方為我們提供了各種各樣的組件，按照類型來(lái)劃分可以分成：視圖容器組件勤讽、基礎(chǔ)內(nèi)容組件蟋座、表單組件、導(dǎo)航組件脚牍、多媒體組件向臀、地圖組件和畫布組件共七類30種。
小程序中的組件和HTML中的元素差不多诸狭，一個(gè)組件是指從組件開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼券膀，因?yàn)槠脚_(tái)的差異性所以小程序中的組件可能會(huì)被轉(zhuǎn)譯為不同端對(duì)應(yīng)的代碼，所以在進(jìn)行小程序開發(fā)的時(shí)候不能使用除上述組件之外的標(biāo)簽驯遇。
組件的定義
? 組件是視圖層的基本組成單元芹彬。
? 組件會(huì)自帶一些功能和微信風(fēng)格的樣式。
? 組件通常包括開始和結(jié)束標(biāo)簽妹懒、修飾該組件的屬性以及兩個(gè)標(biāo)簽中間的內(nèi)容雀监。
組件的屬性
組件可以擁有屬性双吆，屬性用于對(duì)組件進(jìn)行配置眨唬。
組件的屬性可以分為所有組件都擁有的共同屬性和某些組件才有的特定屬性。
組件的屬性只能用在開始標(biāo)簽或者是單個(gè)自閉合標(biāo)簽身上好乐，不能用于結(jié)束標(biāo)簽匾竿。
組件中可以設(shè)置多個(gè)屬性，屬性具有屬性名稱和屬性值兩部分蔚万，組件的屬性名稱都是小寫岭妖。
所有組件都擁有的共同屬性
?
id??組件的唯一標(biāo)識(shí)，保持整個(gè)頁(yè)面唯一反璃。
?style??同HTML中的style一致昵慌，用來(lái)動(dòng)態(tài)設(shè)置組件的內(nèi)聯(lián)樣式。
?hidden??組件是否顯示淮蜈，默認(rèn)所有均顯示可通過(guò)設(shè)置為false隱藏組件斋攀。
?class??組件的樣式類，可以在WXSS中通過(guò)類選擇器來(lái)選擇標(biāo)簽設(shè)置樣式梧田。
?bind../catch..??用于綁定邏輯層事件的屬性淳蔼，bind為冒泡侧蘸，catch為非冒泡。
?data-??自定義屬性鹉梨，事件觸發(fā)時(shí)會(huì)發(fā)送給事件處理函數(shù)讳癌，函數(shù)中可通過(guò)datasl來(lái)獲取對(duì)應(yīng)的值。
2.0 view組件
view組件是視圖容器組件的一種存皂，屬于塊級(jí)組件(標(biāo)簽)晌坤。
view組件類似于HTML中的div標(biāo)簽，在小程序開發(fā)中布局展示艰垂，是小程序界面布局中最常用的UI組件泡仗，任何一種復(fù)雜的布局都可以通過(guò)嵌套view組件設(shè)置組件的樣式來(lái)實(shí)現(xiàn)。
下面列出view組件的主要屬性
hover是否啟動(dòng)點(diǎn)擊態(tài)猜憎，默認(rèn)為false娩怎。
hover-start-time標(biāo)簽按下后多久出現(xiàn)點(diǎn)擊態(tài)，默認(rèn)為50毫秒胰柑。
hover-stay-time 手指松開后點(diǎn)擊態(tài)的保留時(shí)間截亦，默認(rèn)為400毫秒。
hover-class 標(biāo)簽被按下去的樣式柬讨，默認(rèn)值為none表示沒(méi)有點(diǎn)擊效果崩瓤。
view組件的使用示例
//.wxml中的代碼
<view hover-class='view-hover-class' hover-start-time='1000'>我是第1個(gè)View組件</view>
<view hidden='{{true}}'>我是第2個(gè)View組件</view>
<view>我是第3個(gè)View組件</view>
<view>我是第4個(gè)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è)置。
? 頁(yè)面樣式設(shè)置踩官。
? 外部樣式設(shè)置却桶。
? 全局樣式設(shè)置。
給view標(biāo)簽設(shè)置樣式的四種方式代碼示例
//.wxml文件
<!-- 1.0 內(nèi)聯(lián)樣式 -->
<view style = "width:300px;font-size:40rpx;background:#195;">我是第1個(gè)View組件</view>
<!-- 2.0 頁(yè)面樣式文件設(shè)置 -->
<view class='pageStyleView'>我是第2個(gè)View組件</view>
<!-- 3.0 引入外部樣式文件設(shè)置 -->
<view class='outPageViewClass'>我是第3個(gè)View組件</view>
<!-- 4.0 使用全局樣式文件設(shè)置 -->
<view class='globalViewClass'>我是第4個(gè)View組件</view>
<view>我是第5個(gè)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組件來(lái)處理圖片蔗牡，同HTML中的img標(biāo)簽類型颖系。
下面列出image組件的主要屬性
binderror 加載圖片失敗時(shí)，發(fā)布到 AppService 的事件名辩越。
bindload 加載圖片完畢時(shí)嘁扼，發(fā)布到 AppService 的事件名。
src 圖片資源地址黔攒，可以是本地圖片的相對(duì)路徑也可以是URL地址趁啸。
mode 圖片的縮放和剪裁模式，image組件中供提供了4中縮放和9種剪裁模式督惰。
lazy-load 圖片懶加載不傅，布爾類型默認(rèn)false，只對(duì)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 寬度不變沦偎，高度自動(dòng)變化疫向，保持原圖寬高比不變
縮放 scaleToFill 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放 aspectFit 保持縱橫比縮放圖片豪嚎，使圖片的長(zhǎng)邊能完全顯示搔驼。也就是說(shuō)，可以完整地將圖片顯示出來(lái)侈询。
縮放 aspectFill 保持縱橫比縮放圖片舌涨，只保證圖片短邊能完全顯示。圖片通常只在水平或垂直方向是完整的扔字。
注意：image組件默認(rèn)寬度300px囊嘉、高度225px ，二維碼/小程序碼圖片不支持長(zhǎng)按識(shí)別革为。
4.0 text組件
text組件用于文本內(nèi)容的展示扭粱。
下面列出text組件的主要屬性
decode 是否解碼。
selectable 文本是否可選震檩。
space 顯示連續(xù)空格的方式琢蛤，可選值有ensp、emsp和nbsp[0.5 | 1 | 自適應(yīng)]
text組件注意點(diǎn)說(shuō)明
[01] text組件屬于內(nèi)聯(lián)元素抛虏。
[02] text組件的內(nèi)部只能嵌套text標(biāo)簽博其。
[03] 小程序中只有text組件支持長(zhǎng)按選中。
這里給出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默認(rèn)不設(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)效果和實(shí)現(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組件庫(kù)介紹
wx-charts [stars 2500+]
微信小程序圖表charts組件
iview-weapp [stars 2400+]
高質(zhì)量的微信小程序 UI 組件庫(kù)
官網(wǎng)和文檔地址(https://weapp.iviewui.com/)
vant-weapp [stars 6500+]
輕量、可靠的小程序 UI 組件庫(kù)挂据。
官網(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 是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)以清，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，包含button崎逃、cell掷倔、dialog、 progress个绍、 toast勒葱、article浪汪、icon等各式元素。
官網(wǎng)和文檔地址(https://weui.io/)
