ミニ プログラムでコンテンツ リスト コンポーネントを開発する方法の簡単な分析

この記事では、小規模なプログラム開発の実践的な応用例と、コンテンツ リスト コンポーネントの開発方法を紹介します。

ホームページ上に共通の 検索入力ボックス を開発しましたが、そのコードはホームページ ファイルに直接記述されているため、コンポーネント。この記事では、完全な小さなプログラムコンポーネントの書き方を紹介します。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル #]

コンポーネントの構成

#コンポーネントの構造まず、コンポーネントはページに似ており、メンテナンス用に別のフォルダーがあります。まず、コンポーネントを保存するためにミニ プログラム プロジェクトに

components

ディレクトリを作成し、次に 検索ボックス Components として使用する search-bar という名前のディレクトリを作成します。 。

上で述べたように、コンポーネントは実際にはページに非常によく似ており、ディレクトリで構成されているため、表示されるコンテンツも当然

index.wxml で構成されます。

書くこと。そこで、検索ボックスに関する前の部分を直接貼り付けます。

components/search-bar/index.wxml

に貼り付けると、コードの形式が適切ではなくなる可能性があります。ファイル コンテンツの空白スペースを右クリックするか、コードを選択して、[ドキュメントのフォーマット] をクリックすると、自動的にフォーマットされます。 ここで注意する必要があるのは、構造ファイルにリソースの場所への参照がある場合、ファイルの場所を変更した後、変更された場所がリソースを正しく参照しているかどうかを確認する必要があるということです。たとえば、ここでは、

pages/index/index.wxml

にある元のコンテンツを components/search-bar/index.wxml に貼り付けます。ここで、imageタグが assets/images の下のファイルを参照している場合は、新しい場所の画像参照パスがまだ有効であることを確認する必要があります。

コンポーネント スタイル

同様に、以前に作成したコンポーネント スタイルを貼り付けます

コンポーネント宣言

このようにして、コンポーネントの構造とスタイルの定義が完了しましたが、開発者ツールはこれがまだコンポーネントであると認識していないため、次のことが必要です。コンポーネントディレクトリに

index.json

を作成し、このディレクトリが有効なコンポーネントであることを宣言する方法は以下の通りです。 まず、

index.json

で "component": true を使用して、これがコンポーネントであることを宣言する必要があります

2 番目に、グローバル メソッド

Component()

を使用して、コンポーネントを index.js に登録する必要があります。このメソッドのパラメータはオブジェクトであり、その中にはさまざまな同様のページを定義することができます 詳細は 公式ドキュメント

コンポーネントの使用方法

#を参照してください##これでコンポーネントの基本定義が完了し、コンポーネントを使用できるようになります。使用するコンポーネントを必要な箇所に導入するだけです。導入方法は、例えばホームページの設定ファイルで以下のように宣言します。

このうち、"検索-bar"

は、使用するミニ プログラム

input および image の組み込みコンポーネントと同様に、コンポーネントのラベル名を定義します。次のコンテンツは、現在の参照元のコンポーネントのタグ名相対位置、この位置の検索方法は、image タグでの画像位置の検索と同じです。 上記のコンポーネント参照宣言の後、ページ構造ファイルでコンポーネントを使用できるようになります。

このプロセス中に、右下隅のコンソールでエラーが発生した場合は、開発者ツールの上部中央にあるコンパイル ボタンをクリックしてプロジェクトを再コンパイルし、さまざまなファイルを書き換えて解析できます。コンパイル後もエラーが発生する場合は、コードに実際にエラーがあるかどうかを確認できる一方で、開発者ツールを再起動して試す​​ことができます (開発者ツール自体にも特定のバグがあるため、

また、開発者ツールの設定で、自動保存やコードのインデントなど、個人的な開発習慣に合わせてカスタマイズした設定をいくつか作成しましたので、参考にしてください。

コンテンツ リスト コンポーネント

完全なカスタム コンポーネントを導入した後、引き続き コンテンツ リストの開発を完了します。成分＃＃＃。

コンテンツリストは上記の検索入力ボックスより明らかに複雑ですが、コンポーネントの開発方法は同じなので、このルールに従ってコンポーネントを開発するだけです。

まず、コンポーネントを構成する 4 つのコア ファイルを次のように作成します。このうち

index.js と index.json は以前に作成したものと同じです。 。

次に、

index.wxml 要素と index.wxss 要素を記述して、list コンポーネント を完成させます。意味。

リストなのでミニプログラムの

ループトラバーサル構文を使用しますが、この部分は公式ドキュメントを参照して学習してください。具体的な使い方は以下の通りです。

#次に、コンポーネントが受信する外部受信データを

index.js

で次のように定義します。 #このように、index.wxml

の

wx:for を使用してトラバースするのは、

index.js

の properties 属性です。受信した外部受信データのリスト。次に、すぐにこのコンポーネントをホームページに導入し、実際のデータ リストを渡します。使用方法は引き続き、最初に index.json でコンポーネントへの参照を宣言し、次にページ ファイルでの参照中に宣言されたタグ名を使用します。

ここでは、定義した コンテンツ リスト コンポーネント

の

items 属性を宣言します。データが渡され、そのデータはホームページ上で内部的に定義された

listData

から取得されます。これには、index.js の data でデータを宣言する必要があります。ホームページです。 データとプロパティ

ここでは、

データ

と プロパティについて説明します。違いは?

data

はページまたはコンポーネント内で独自のデータを定義するために使用されますが、properties は外部から受信するデータを受信するために使用されるため、このプロパティを持つのはコンポーネントのみです。 たとえば、コンテンツ リスト コンポーネントの場合、実際のリスト データを外部から渡す必要があるため、properties では、次のパラメータをカスタマイズするのと同等です。このコンポーネントは、コンポーネントによって宣言されたパラメータを通じてデータをコンポーネントに渡すことができます。

データは次の場所に渡されます したがって、定義する

list コンポーネント## など、コンポーネント パラメーターに必要なデータ構造が何であるかを理解する必要があります。ここで # データ リストを渡す必要があり、データ リストの各項目にはテキストと画像が含まれるため、ホームページで次のデータを定義します

listData

#ご覧のとおり、リスト内の各項目は、コンポーネントで使用されるデータ構造に正確に準拠している必要があります。つまり、各データ項目には、テキストの内容を表示する text フィールドと、 image

フィールドは、テキストに付随する画像を表示するために使用されます。

次に、コンポーネント内に戻り、各データ項目を表す

item

フィールドを使用して、wx:for の構文に従ってリストのデータ項目にアクセスします。プレゼンテーションを行います。組み込みタグ image の

mode

パラメータは、画像表示のサイズ スタイルを宣言するためにも使用されます。 一連のスタイルで書かれています

ページ表示の最終的な効果は次の図に示されています。

最後に、これまでの開発をプレビューします。実機 ミニプログラムの効果とZhihuミニプログラムのホームページとの比較は以下の通りです。

左側がZhihuミニプログラムのホームページ、右側が自分たちで開発したミニプログラムですが、かなり効果がありませんか？

まとめ

最後に、今日学んだことをまとめましょう。実際、ディレクトリを通して見るとよくわかります。今日は カスタム コンポーネントを導入しました。開発プロセスは次のとおりです。

• コンポーネントの作成
• コンポーネントの定義と宣言
##コンポーネントリファレンス
• 受信コンポーネントデータ

上記の方法と、前述の

ページ開発方法を組み合わせることで、ミニプログラム コアスキルを開発します。その後、独自の設計に従ってさまざまな機能を担当する小さなプログラム ページを開発し、各ページの機能と特性に基づいて一連のカスタム コンポーネントを開発して、柔軟な組み合わせの効果を実現します。

プログラミング関連の知識について詳しくは、

プログラミング入門をご覧ください。 ！

以上がミニ プログラムでコンテンツ リスト コンポーネントを開発する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。