MinUI 是基于微信小程序自定義組件特性開(kāi)發(fā)而成的一套簡(jiǎn)潔吧秕、易用、高效的組件庫(kù)邦泄，適用場(chǎng)景廣删窒，覆蓋小程序原生框架、各種小程序組件主流框架等顺囊，并且提供了高效的命令行工具易稠。MinUI 組件庫(kù)包含了很多基礎(chǔ)的組件，其中 avatar 頭像組件是一個(gè)很常用的基礎(chǔ)元件包蓝， MinUI 中 avatar 組件的效果圖如下：
各式各樣的頭像都有驶社，是不是看起來(lái)很方便很快捷的樣子(_)〔馕可以打開(kāi)微信掃一掃下面的小程序二維碼先一睹為快：
下面介紹 avatar 組件的使用方式亡电。
1、使用下列命令安裝 Min-Cli硅瞧，如已安裝份乒，請(qǐng)進(jìn)入到下一步。Min-Cli 的文檔請(qǐng)猛戳這里：Min-Cli使用手冊(cè)
npm install -g @mindev/min-cli
2、初始化一個(gè)小程序項(xiàng)目或辖。
min init my-project
選擇 新建小程序 選項(xiàng)瘾英，即可初始化一個(gè)小程序項(xiàng)目。創(chuàng)建項(xiàng)目后颂暇，在編輯器中打開(kāi)項(xiàng)目缺谴，src 目錄為源碼目錄，dist 目錄為編譯后用于在微信開(kāi)發(fā)者工具中指定的目錄耳鸯。新建的項(xiàng)目中已有一個(gè) home 頁(yè)面湿蛔。詳細(xì)文檔：Min 初始化小程序項(xiàng)目
3、安裝 avatar 組件县爬。
進(jìn)入剛才新建的小程序項(xiàng)目的目錄中：
cd my-project
安裝組件：
min install @minui/wxc-avatar
4阳啥、開(kāi)啟dev。
min dev
開(kāi)啟之后财喳，修改源碼后都會(huì)重新編譯察迟。
5、在頁(yè)面中引入組件耳高。
在編輯器中打開(kāi) src/pages 目錄下的 home/index.wxp 文件卷拘，在 script 中添加 config 字段，配置小程序自定義組件字段祝高，代碼如下：
export default {
config: {
"usingComponents": {
'wxc-avatar': "@minui/wxc-avatar"
}
}
}
wxc-avatar 即為頭像組件的標(biāo)簽名栗弟，可以在 wxml 中使用。
6工闺、在 wxml 中使用 wxc-avatar標(biāo)簽乍赫。
在 home/index.wxp 文件的 template 中添加 wxc-avatar 標(biāo)簽，代碼如下：
<wxc-avatar class="avatar" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
7陆蟆、打開(kāi)微信開(kāi)發(fā)者工具雷厂，指定 dist 目錄，預(yù)覽項(xiàng)目叠殷。
home/index.wxp 文件的代碼如下所示：
<!-- home/index.wxp -->
<template>
<wxc-avatar class="avatar" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
</template>
<script>
export default {
config: {
usingComponents: {
'wxc-avatar': '@minui/wxc-avatar'
}
}
}
</script>
<style>
.avatar {
display: block;
width: 120rpx;
height: 120rpx;
}
</style>
圖示：
至此改鲫，minui 組件庫(kù)的 avatar 頭像組件在 Min 工具生成的小程序項(xiàng)目中的方法已介紹完畢，其他場(chǎng)景林束，如已有小程序項(xiàng)目中的使用方式請(qǐng)移步至如下鏈接：
了解組件的使用方式后像棘，下面開(kāi)始介紹 avatar 組件的 API 。
Avatar 【Props】
| 名稱 | 描述 |
|---|---|
src |
頭像圖片地址 |
mold |
頭像規(guī)格壶冒，circle(正圓)缕题、square(正方)，默認(rèn) circle |
count |
消息數(shù)胖腾，顯示在頭像右上角 |
更多demo
1烟零、設(shè)置不同規(guī)格的頭像
<template>
<wxc-avatar class="avatar avatar__1" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
<wxc-avatar class="avatar avatar__2" src="https://s10.mogucdn.com/mlcdn/c45406/171116_3a30h33df8cj7f651al68hdh7bki7_528x528.png"></wxc-avatar>
<wxc-avatar class="avatar avatar__3" src="https://s10.mogucdn.com/mlcdn/c45406/171116_62f571l0ki0ffcg94h6kg6452h497_356x356.png"></wxc-avatar>
</template>
<script>
export default {
config: {
usingComponents: {
'wxc-avatar': '@minui/wxc-avatar'
}
}
}
</script>
<style>
.avatar {
display: inline-block;
margin-right: 20rpx;
}
.avatar__1 {
width: 120rpx;
height: 120rpx;
}
.avatar__2 {
width: 160rpx;
height: 160rpx;
}
.avatar__3 {
width: 200rpx;
height: 200rpx;
}
</style>
圖示：
2瘪松、方形頭像
<template>
<wxc-avatar class="avatar" mold="square" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
</template>
<script>
export default {
config: {
usingComponents: {
'wxc-avatar': '@minui/wxc-avatar'
}
}
}
</script>
<style>
.avatar {
display: block;
width: 120rpx;
height: 120rpx;
}
</style>
圖示：
3、消息提示
<template>
<wxc-avatar class="avatar" count="7" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
</template>
<script>
export default {
config: {
usingComponents: {
'wxc-avatar': '@minui/wxc-avatar'
}
},
data: {}
}
</script>
<style>
.avatar {
display: block;
width: 120rpx;
height: 120rpx;
}
</style>
圖示：
4锨阿、自定義文字
<template>
<wxc-avatar class="avatar">U</wxc-avatar>
</template>
<script>
export default {
config: {
usingComponents: {
'wxc-avatar': '@minui/wxc-avatar'
}
},
data: {}
}
</script>
<style>
.avatar {
display: block;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: #31b0d5;
color: #FFF;
}
</style>
更多組件更新同步請(qǐng)關(guān)注 MinUI 小程序組件庫(kù)示例查看宵睦，或請(qǐng)移步到實(shí)時(shí)同步更新的 微信小程序 avatar 頭像組件使用文檔。
溝通反饋
請(qǐng)?zhí)砑尤褐?wUf18018252882 好友或者掃碼加好友墅诡，并與群助手對(duì)話發(fā)送驗(yàn)證碼 10088 按照指引進(jìn)群壳嚎。
相關(guān)鏈接
開(kāi)源組件
-
布局元素
-
基礎(chǔ)元件
-
功能組件
-
提示反饋
-
表單組件
- Coming soon ...
蘑菇街前端團(tuán)隊(duì)，2018.01.17 于杭州
