MinUIは、WeChatミニプログラムのカスタムコンポーネントの機能に基づいて開発された、シンプルで使いやすく効率的なコンポーネントライブラリのセットです。これは、ミニプログラムのネイティブフレームワーク、さまざまなミニプログラムコンポーネントのメインストリームフレームワークなど、幅広いシナリオに適用でき、効率的なコマンドラインツール。MinUIコンポーネントライブラリには、アバターアバターコンポーネントが非常に一般的に使用される基本コンポーネントである多くの基本コンポーネントが含まれています。MinUIでのアバターコンポーネントのレンダリングは次のとおりです。
いろいろな種類のアバターがありますが、見た目も便利で早いですか(^ _ ^)。WeChatを開き、次の小さなプログラムのQRコードをスキャンして、最初に確認できます。
次に、アバターコンポーネントの使用方法を説明します。
1.次のコマンドを使用してMin-Cliをインストールします。インストールされている場合は、次の手順に進んでください。Min-Cliドキュメントについては、こちらをつついてください:Min-Cliユーザーマニュアル
npm install -g @mindev/min-cli
2.小さなプログラムプロジェクトを初期化します。
min init my-project
選択して新しいアプレットの小さなプロジェクトを開始するためのオプションを選択します。プロジェクトを作成したら、エディターでプロジェクトを開きます。srcディレクトリはソースディレクトリで、distディレクトリはコンパイル後にWeChat開発者ツールで指定されたディレクトリです。新しいプロジェクトが持っているhome
ページを。詳細なドキュメント:ミニ初期化ミニプログラムプロジェクト
3.アバターコンポーネントをインストールします。
新しく作成したアプレットプロジェクトのディレクトリを入力します。
cd my-project
コンポーネントをインストールします。
min install @minui/wxc-avatar
4.開発を開始します。
min dev
開いた後、ソースコードは変更後に再コンパイルされます。
5.コンポーネントをページに導入します。
エディタで開きsrc/pages
、ディレクトリhome/index.wxp
、ファイル、script
追加config
フィールド構成アプレットカスタムコンポーネントフィールドを、次のように:
export default {
config: {
"usingComponents": {
'wxc-avatar': "@minui/wxc-avatar"
}
}
}
wxc-avatar
これは、アバターコンポーネントのタグ名であり、wxmlで使用できます。
6、wxmlの中wxc-avatar
のラベル。
でhome/index.wxp
ファイルtemplate
を追加wxc-avatar
、次のように、タグ:
<wxc-avatar class="avatar" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
7、マイクロチャネルのオープン開発ツールは、指定したdist
カタログを、プロジェクトをプレビューします。
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>
アイコン:
これまでに、Minツールによって生成されたアプレットプロジェクトのminuiコンポーネントライブラリのアバターアバターコンポーネントのメソッドが導入されました。アプレットプロジェクトの使用など、他のシナリオについては、次のリンクに移動してください。
既存のアプレットプロジェクトでMinUIコンポーネントを使用する
コンポーネントの使用方法を理解した後、アバターコンポーネントのAPIを紹介します。
アバター【小道具】
名前 | 説明文 |
---|---|
src |
アバター画像アドレス |
mold |
アバターの仕様、円(正方形)、正方形(正方形)、デフォルトの円 |
count |
アバターの右上隅に表示されるメッセージの数 |
その他のデモ
1.異なる仕様のアバターを設定します
<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>
ほかの同期コンポーネントのアップデートは、に注意を払うを喜ばMinUI
小さなプログラム例コンポーネントライブラリビューのリアルタイムの同期や更新に移動してくださいマイクロチャネル成分の小さなプログラムアバターアバター文書を使用しています。
コミュニケーションのフィードバック
確認コードを送信するために、友人、アシスタントやグループとの対話を追加するためのアシスタントwUf18018252882友人やスキャンコードグループに追加10088
に従って、グループの導入を意味します。
関連リンク
オープンソースのコンポーネント
-
レイアウト要素
-
基本的なコンポーネント
-
機能部品
-
キューフィードバック
-
フォームコンポーネント
- 近日公開 ...
蘑菇街前端团队,2018.01.17 于杭州
この記事の複製:Ape2048➩https : //www.mk2048.com/blog/blog.php ? id = h0ickb2cbaa