WeChatアプレットMinUIコンポーネントライブラリシリーズのアバターアバターコンポーネント

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に従って、グループの導入を意味します。

グループQRコード

関連リンク

オープンソースのコンポーネント

レイアウト要素
- フレックスレイアウト
- cc水平および垂直に中央揃え
基本的なコンポーネント
機能部品
キューフィードバック
フォームコンポーネント
- 近日公開 ...

                                                 蘑菇街前端团队，2018.01.17 于杭州

この記事の複製：Ape2048➩https : //www.mk2048.com/blog/blog.php ? id = h0ickb2cbaa

おすすめ