1. 小さなプログラムコンポーネントの考え方
2. コンポーネントをカスタマイズするプロセス
- まず、json ファイルでカスタム コンポーネントを宣言する必要があります (このファイル グループをカスタム コンポーネントとして設定するには、コンポーネント フィールドを true に設定します)。
- 独自のテンプレートを wxml で記述します
- コンポーネントの関連スタイルを wxss に記述します
- js ファイルでは、コンポーネント内のデータまたは関連ロジックを定義できます。
- カスタム コンポーネントはカスタム コンポーネントを参照することもでき、参照方法はページがカスタム コンポーネントを参照する方法と似ています (usingComponents フィールドを使用)。
- カスタム コンポーネントとページが配置されているプロジェクトのルート ディレクトリ名には、接頭辞 "wx-" を付けることはできません。接頭辞を付けると、エラーが報告されます。
- コンポーネントが app.json の usingComponents で宣言されている場合、すべてのページとコンポーネントはそのコンポーネントを直接使用できます。
3. コンポーネント スタイルの実装の詳細
4. コンポーネントはプロセス通信を使用します
4.1 データプロパティをコンポーネントに渡す
4.2 スタイルの externalClasses をコンポーネントに渡す
4.3 コンポーネントがカスタム イベントを送信する
this.triggerEvent経由("eventName"、ペイロード)
カスタム イベントのパラメータは、event.detailに渡されます。
ケース
4.4 ページはコンポーネント this.selectComponent を直接呼び出します
5. コンポーネントスロット定義の使用法
- 単一スロットの使用 (アプレット スロットは、スタイルの表示と非表示によって実現されるデフォルト値をサポートしていません)
- 複数のスロットの使用 [名前付きスロット]
6. Behaviros コンポーネントの混合
動作(オブジェクト オブジェクト) | WeChat オープンドキュメント
動作 | WeChat オープンドキュメント
7. コンポーネントのライフサイクル コンポーネントのライフサイクル | WeChat オープンドキュメント
created
ライフサイクルは、コンポーネント インスタンスが作成されたばかりのときに トリガーされます。この時点で、コンポーネントデータは コンストラクタで定義されたデータthis.data
です 。 現在電話をかけることができません 。 通常、このライフサイクルは、いくつかのカスタム プロパティ フィールドをコンポーネントに追加する場合にのみ使用してください 。Component
data
setData
this
attached
ライフサイクルは、コンポーネントが完全に初期化され、ページ ノード ツリーに入った後に トリガーされます。この時点で、this.data
はコンポーネントの現在の値に初期化されています。このライフサイクルは非常に便利で、ほとんどの初期化作業をこの時点で実行できます。detached
ライフサイクルは、コンポーネントがページ ノード ツリーを離れた後に トリガーされます。ページを終了するときに、コンポーネントがまだページ ノード ツリー内にある場合は、detached
コンポーネントがトリガーされます。
ライフサイクル メソッドは、他のビヘイビア内の同じ名前のライフサイクルで相互に上書きすることなく、ビヘイビアー内に記述することもできます。ただし、コンポーネントが直接的または間接的に同じ動作を複数回参照する場合、この動作のライフサイクル関数は実行時に 1 回だけ実行されることに注意してください。
コンポーネントが配置されているページのライフサイクル
コンポーネントに強く関連付けられていない特殊なライフサイクルもいくつかありますが、場合によっては、内部で処理できるようにコンポーネントに通知する必要があります。このようなライフサイクルは「コンポーネントが配置されているページのライフサイクル」と呼ばれ、 pageLifetimes
定義セクションで定義されます。利用可能なライフサイクルには次のようなものがあります。
7. コンポーネントコンストラクター