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-icon

4.開発を開始します。

min dev

開いた後、ソースコードは変更後に再コンパイルされます。

5.コンポーネントをページに導入します。

エディタで開きsrc/pages、ディレクトリhome/index.wxp、ファイル、script追加configフィールド構成アプレットカスタムコンポーネントフィールドを、次のように：

export default {
    config: {
        "usingComponents": {
            'wxc-icon': "@minui/wxc-icon"
        }
    }
}

wxc-icon これは、wxmlで使用できる価格コンポーネントのラベル名です。

6、wxmlの中wxc-iconのラベル。

でhome/index.wxpファイルtemplateを追加wxc-icon、次のように、タグ：

<wxc-icon size="50" type="yes"></wxc-icon>

7、マイクロチャネルのオープン開発ツールは、指定したdistカタログを、プロジェクトをプレビューします。

home/index.wxp ファイルのコードは次のとおりです。

<!-- home/index.wxp -->
<template>
  <wxc-icon size="50" type="yes"></wxc-icon>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-icon': '@minui/wxc-icon'
    }
  }
}
</script>

<style></style>

これまでに、Minツールによって生成されたアプレットプロジェクトのminuiコンポーネントライブラリのアイコンコンポーネントのメソッドが導入されました。他のシナリオについては、ネイティブアプレットまたは他のアプレットフレームワークプロジェクトのメソッドを使用して、次のリンクに移動してください。

既存のアプレットプロジェクトでのMinUIコンポーネントの使用の概要

コンポーネントの使用方法を理解した後、価格アイコンコンポーネントのAPIを以下に紹介します。

アイコン【小道具】

の属性	説明文
タイプ	【必須】アイコンタイプ
サイズ	[オプション]アイコンのフォントサイズ、デフォルト値22（単位rpx）
色	[オプション]アイコンの色、デフォルト＃333

タイプのオプション値は次のとおりです。

  'yes', 'check', 'help', 'no', 'warning',
  'add', 'close', 'star', 'star-active', 'more',
  'right', 'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down',
  'minus', 'cart', 'home', 'search', 'search-square',
  'camera', 'scan', 'corcer-l', 'corcer-r', 'alipay',
  'yen', 'mogujie', 'group', 'pintuan', 'share',
  'notice', 'shop', 'delete', 'comment', 'edit',
  'feedback', 'location', 'address', 'after-sales', 'footprint',
  'weixin', 'top', 'purse', 'unreceived', 'truck',
  'rate', 'coupon', 'message'

ほかの同期コンポーネントのアップデートがに注意を払う喜ばMinUI小さなサンプルプログラム部品ライブラリのビューを、リアルタイム同期や更新に移動してくださいマイクロチャネルアプレットアイコンアイコンコンポーネントの使用文書。

コミュニケーションのフィードバック

確認コードを送信するために、友人、アシスタントやグループとの対話を追加するためのアシスタントwUf18018252882友人やスキャンコードグループに追加10088に従って、グループの導入を意味します。

グループQRコード

関連リンク

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

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

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

この記事の複製：Ape 2048→ https : //www.mk2048.com/blog/blog.php ?id=h0ic0kb110j

おすすめ