小さなプログラム コンポーネント開発の基本的な使い方
小さなプログラムのコンポーネント化のアイデア
コンポーネント スロット定義の使用
アプレットがリリースされたばかりのとき、コンポーネント化をサポートしていませんでした。これも批判されました。
しかし、v1.6.3 以降、アプレットはカスタム コンポーネントの開発をサポートし始めました。これにより、プログラムでコンポーネント化を使用することがより便利になりました。
コンポーネント化思考の応用:
コンポーネント化の発想で、その後の開発に活かしていきます。
ページを可能な限り小さな再利用可能なコンポーネントに分割します。
これにより、コードの整理と管理が容易になり、スケーラビリティが向上します。
したがって、コンポーネントは現在、小さなプログラムの開発において非常に重要な章であり、慎重に検討する必要があります (ただし、小さなプログラムのコンポーネント化の考え方は、Vue のコンポーネント化の考え方と基本的に同じです)。
コンポーネントをカスタマイズするプロセス
ページと同様に、カスタム コンポーネントは json wxml wxss js の 4 つのファイルで構成されます。
私の個人的な習慣によると、最初にルート ディレクトリにフォルダー コンポーネントを作成し、後でカスタマイズするパブリック コンポーネントをこのファイルに保存します。
共通のカスタム コンポーネントには、対応する 4 つのファイルが含まれます。
コンポーネントをカスタマイズする手順:
1. まず、json ファイルでカスタム コンポーネントを宣言する必要があります (コンポーネント フィールドを true に設定すると、この一連のファイルをカスタム コンポーネントとして設定できます)。
2. 独自のコンポーネントの独自のテンプレートを wxml に記述します。
<!--components/section-info/section-info.wxml-->
<view class="section">
<view class="title">我是标题</view>
<view class="content">我是内容: 哈哈哈哈</view>
</view>
3. コンポーネントに属する関連スタイルを wxss に記述します。
/* components/section-info/section-info.wxss */
.title {
color: skyblue;
font-size: 40rpx;
font-weight: 700;
}
.content {
color: #333;
font-size: 30rpx;
}
4. js ファイルでは、コンポーネント内のデータまたは関連するロジックを定義できます (現在は使用されていません) 。
コンポーネントを定義したら、カスタム コンポーネントを使用できます。
カスタム コンポーネントを使用するページの下で、ページの json ファイルの
usingComponentsプロパティを構成する必要があります。
usingComponentsプロパティはオブジェクトに対応し、キーは使用するコンポーネントの名前を表し、値は使用するコンポーネントのパスを表します
- たとえば、インデックス ページでカスタム コンポーネントを使用する場合、インデックス ページの json ファイルで構成する必要があります。
構成が完了したら、構成ページの wxml ファイルでカスタム コンポーネントを使用できます。
<section-info />
<section-info />
<section-info />
<section-info />
注:
カスタム コンポーネントは、他のカスタム コンポーネントを参照することもできます。
usingComponents参照方法は、ページがカスタム コンポーネントを (フィールドを使用して) 参照する方法と似ています。カスタム コンポーネントとページが配置されているプロジェクトのルート ディレクトリ名に "wx-" をプレフィックスとして付けることはできません。そうしないと、エラーが報告されます。
app.jsonの usingComponents で宣言されたコンポーネントがグローバル コンポーネントである場合、すべてのページとコンポーネントは、このコンポーネントをページに個別に登録しなくても直接使用できます。
コンポーネント スタイルの実装の詳細
トピック 1: コンポーネント内のスタイルはコンポーネント外のスタイルに影響しますか?
結論 1: コンポーネント内のクラス スタイルは、コンポーネント wxml 内のノードにのみ影響し、コンポーネントを参照するページ ページには影響しません。
- 上記のコンポーネントを使用してテストします
結論2：IDセレクター、属性セレクター、タグセレクターはコンポーネントで使えない（ページで使える）、クラスセレクターを使ってみよう
トピック 2: コンポーネント内のスタイルに対する外部スタイルの影響
結論 1: 外部で使用されるクラスのスタイルは、外部の wxml のクラスに対してのみ有効であり、コンポーネント内では有効になりません。
結論 2: 外部で使用される id セレクターと属性セレクターはコンポーネントに影響を与えない
結論 3: タグ セレクターは外部で使用され、コンポーネントに影響します (そのため、タグ セレクターは推奨されません) 。
トピック 3: クラスを相互に影響させる方法
Component オブジェクトでは、options プロパティに styleIsolation プロパティを持つ options プロパティを渡すことができます。
styleIsolation には 3 つの値があります。
isolated は、スタイルの分離を有効にすることを意味します。カスタム コンポーネントの内外で、クラスで指定されたスタイルは互いに影響しません(既定値)。
apply-shared は、ページの wxss スタイルはカスタム コンポーネントに影響しますが、カスタム コンポーネント wxss で指定されたスタイルはページに影響しないことを意味します。
共有とは、ページ wxss スタイルがカスタム コンポーネントに影響し、カスタム コンポーネント wxss で指定されたスタイルがページやその他の設定にも影響することを意味します (両方が互いに影響します) 。
// components/section-info/section-info.js
Component({
options: {
styleIsolation: "shared"
}
})