WeChat ミニ プログラム (コンポーネント – カスタム コンポーネント)
序文
理由:
アプレットのインターフェースは、一連のコンポーネントで構成されています。Mini Program Basic Library は、開発者の基本的なニーズを満たす一連の基本的なコンポーネントを提供します。しかし、小さなプログラムの開発がますます複雑になるにつれて、基本的なコンポーネントをそのまま使用して開発するのはますます不便になっています。
たとえば、より複雑なアプレットには、「ドロップダウン選択リスト」、「検索ボックス」、「日付ピッカー」などの共通の対話型モジュールが含まれていることがよくあります。これらのインターフェース対話モジュールは複数のページで使用でき、ロジックは比較的独立しています。ただし、このようなモジュールを従来のアプレット開発方法で実装するのは非常に面倒です。
カスタム コンポーネント:
このような状況に直面して、Mini Program Basic Library は、開発者が "カスタム コンポーネント" と呼ばれるインターフェイス コンポーネントを自分で作成できるようにする機能を提供します。この機能により、開発者はこのような対話モジュールをインターフェイス コンポーネントに抽象化して、インターフェイス コードの構成を非常に柔軟にすることができます。
バージョン要件:
アプレット ベース ライブラリのバージョン 1.6.3 以降、アプレットは単純なコンポーネント ベースのプログラミングをサポートします。開発者は、ページ内の機能モジュールをカスタム コンポーネントに抽象化して、さまざまなページで再利用できます。また、複雑なページを複数の結合度の低いモジュールに分割することもできるため、コードのメンテナンスに役立ちます。
注: カスタム コンポーネントを使用する場合、基本コンポーネントと非常によく似ています。
各カスタム コンポーネントは 4 つのコード ファイルで構成されます。
①json ファイルは、いくつかの基本的なコンポーネント構成を配置するために使用されます
②wxml ファイル コンポーネント テンプレート
③wxss ファイル コンポーネント スタイル。コンポーネントの内部ノードでのみ有効です (このファイルはオプションです ④ js ファイル JS コードコンポーネントのメインロジックを運ぶコンポーネントの
これらの 4 つのファイルは、ページの書き込み時に使用される 4 つのファイルと非常に似ていますが、違いがあります。次に、これら 4 つのファイルを使用して簡単なカスタム コンポーネントを作成する方法を紹介します。
(1) フォルダの場所
まず、ファイルの場所を決定する必要があります.公式はカスタムコンポーネントファイルをどこに置くかを指定していませんが、あなた自身またはチームの便宜のために、ルートディレクトリの下にコンポーネントディレクトリを作成することをお勧めします.すべてのカスタム コンポーネントを保存します。
(2) グループファイルを作成する
次に示すように、コンポーネント フォルダーの下に新しい myComponent グループ ファイルを作成して、カスタム コンポーネントを保持します。
(3) コンポーネント構成
ページと同様に、カスタム コンポーネントは、json、wxml、wxss、および js の 4 つのファイルで構成されます。カスタム コンポーネントを作成するには、最初に json ファイルでカスタム コンポーネントを宣言し (コンポーネント フィールドを true に設定して、ファイルのグループをカスタム コンポーネントとして設定します)、json ファイルを構成する必要があります
。
(4) コンポーネントテンプレート
コンポーネントのテンプレートをwxmlファイルに記述し、コンポーネントのスタイルをwxssファイルに追加するという書き方は、ページと同様です。
コンポーネント テンプレートはページ テンプレートと同じ方法で記述され、このテンプレートはチェックボックスとラベルをコンポーネントにレンダリングします。
(5) コンポーネントスタイル
ページと同様に、コンポーネント ノードのスタイルは wxss ファイルで指定できます。その中のスタイルは、コンポーネント内でのみ有効です。スタイルは、クラス セレクター ( .the-class-name など) を介してのみ指定できることに注意してください。
注:
① コンポーネントおよびコンポーネントを参照するページでは、id セレクター (#a)、属性セレクター ([a])、およびタグ名セレクターは使用できません。代わりにクラス セレクターを使用してください。
②コンポーネントやコンポーネントを参照するページで子孫セレクタ(.a.b)を使用すると、極端な場合に想定外の動作をする場合がありますので、使用しないでください。
③継承されたフォントや色などのスタイルは、コンポーネントの外部からコンポーネントの内部に継承されます。
④ スタイルの継承に加えて、app.wxss 内のスタイルと、コンポーネントが配置されているページのスタイルは、カスタム コンポーネントに対して有効ではありません (コンポーネント スタイル分離オプションが変更されない限り)。
(6) コンポーネント定義
コンポーネント定義は、コンポーネントの JS ファイルに含まれている必要があります。以下を定義するときは Component コンストラクターを使用します。
(7) カスタムコンポーネントを呼び出す
事例：個人認証ページにカスタムコンポーネント（pages/myself/check）を導入する
ステップ1 ステップ1：
このコンポーネントを利用するページに対応するjsonファイルにカスタムコンポーネント宣言を追加します。
例えば、個人認証ページでカスタムコンポーネントを呼び出して導入する
Step 2 Step 2:
そのページに対応するwxmlファイルで使うだけ
要約する
このセクションでは、主にカスタム コンポーネントの作成と呼び出しについて紹介します。
①フォルダーを作成し、カスタム グループ ファイルのフォルダーの場所を決定します
②カスタム コンポーネントのグループ ファイルを
作成します ③json コンポーネントの構成、コンポーネントのプロパティを開きます。つまり、コンポーネント フィールドを true に設定します。
④wxmlコンポーネント テンプレート記述
⑤Wxssコンポーネントスタイル記述
⑥コンポーネント定義、コンポーネントコンストラクタ使用(プロパティ属性リスト、データデータ、メソッドメソッド)
⑦カスタムコンポーネント呼び出し(①jsonカスタムコンポーネント宣言追加、②wxmlテンプレートファイル呼び出し)