この記事では、小規模なプログラム開発の実践的な応用例と、コンテンツ リスト コンポーネントの開発方法を紹介します。
ホームページ上に共通の 検索入力ボックス を開発しましたが、そのコードはホームページ ファイルに直接記述されているため、コンポーネント。この記事では、完全な小さなプログラムコンポーネントの書き方を紹介します。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル #]
ディレクトリを作成し、次に 検索ボックス Components として使用する search-bar という名前のディレクトリを作成します。 。
書くこと。そこで、検索ボックスに関する前の部分を直接貼り付けます。
に貼り付けると、コードの形式が適切ではなくなる可能性があります。ファイル コンテンツの空白スペースを右クリックするか、コードを選択して、[ドキュメントのフォーマット] をクリックすると、自動的にフォーマットされます。 ここで注意する必要があるのは、構造ファイルにリソースの場所への参照がある場合、ファイルの場所を変更した後、変更された場所がリソースを正しく参照しているかどうかを確認する必要があるということです。たとえば、ここでは、
にある元のコンテンツを components/search-bar/index.wxml に貼り付けます。ここで、imageタグが assets/images の下のファイルを参照している場合は、新しい場所の画像参照パスがまだ有効であることを確認する必要があります。
を作成し、このディレクトリが有効なコンポーネントであることを宣言する方法は以下の通りです。 まず、
で "component": true を使用して、これがコンポーネントであることを宣言する必要があります
を使用して、コンポーネントを index.js に登録する必要があります。このメソッドのパラメータはオブジェクトであり、その中にはさまざまな同様のページを定義することができます 詳細は 公式ドキュメント
このうち、
input および image の組み込みコンポーネントと同様に、コンポーネントのラベル名を定義します。次のコンテンツは、現在の参照元のコンポーネントのタグ名相対位置、この位置の検索方法は、image タグでの画像位置の検索と同じです。 上記のコンポーネント参照宣言の後、ページ構造ファイルでコンポーネントを使用できるようになります。
このプロセス中に、右下隅のコンソールでエラーが発生した場合は、開発者ツールの上部中央にあるコンパイル ボタンをクリックしてプロジェクトを再コンパイルし、さまざまなファイルを書き換えて解析できます。コンパイル後もエラーが発生する場合は、コードに実際にエラーがあるかどうかを確認できる一方で、開発者ツールを再起動して試すことができます (開発者ツール自体にも特定のバグがあるため、
また、開発者ツールの設定で、自動保存やコードのインデントなど、個人的な開発習慣に合わせてカスタマイズした設定をいくつか作成しましたので、参考にしてください。
完全なカスタム コンポーネントを導入した後、引き続き コンテンツ リストの開発を完了します。成分＃＃＃。
index.js と index.json は以前に作成したものと同じです。 。
index.wxml 要素と index.wxss 要素を記述して、list コンポーネント を完成させます。意味。
ループトラバーサル構文を使用しますが、この部分は公式ドキュメントを参照して学習してください。具体的な使い方は以下の通りです。
で次のように定義します。 #このように、index.wxml
wx:for
の properties 属性です。受信した外部受信データのリスト。次に、すぐにこのコンポーネントをホームページに導入し、実際のデータ リストを渡します。使用方法は引き続き、最初に index.json でコンポーネントへの参照を宣言し、次にページ ファイルでの参照中に宣言されたタグ名を使用します。
ここでは、定義した 
items
から取得されます。これには、index.js の data でデータを宣言する必要があります。ホームページです。 データとプロパティ
はページまたはコンポーネント内で独自のデータを定義するために使用されますが、properties は外部から受信するデータを受信するために使用されるため、このプロパティを持つのはコンポーネントのみです。 たとえば、コンテンツ リスト コンポーネントの場合、実際のリスト データを外部から渡す必要があるため、properties では、次のパラメータをカスタマイズするのと同等です。このコンポーネントは、コンポーネントによって宣言されたパラメータを通じてデータをコンポーネントに渡すことができます。
データは次の場所に渡されます したがって、定義する
#ご覧のとおり、リスト内の各項目は、コンポーネントで使用されるデータ構造に正確に準拠している必要があります。つまり、各データ項目には、テキストの内容を表示する text フィールドと、 image
次に、コンポーネント内に戻り、各データ項目を表す
フィールドを使用して、wx:for の構文に従ってリストのデータ項目にアクセスします。プレゼンテーションを行います。組み込みタグ image の
パラメータは、画像表示のサイズ スタイルを宣言するためにも使用されます。 一連のスタイルで書かれています
ページ表示の最終的な効果は次の図に示されています。
最後に、これまでの開発をプレビューします。実機 ミニプログラムの効果とZhihuミニプログラムのホームページとの比較は以下の通りです。
左側がZhihuミニプログラムのホームページ、右側が自分たちで開発したミニプログラムですが、かなり効果がありませんか？
最後に、今日学んだことをまとめましょう。実際、ディレクトリを通して見るとよくわかります。今日は カスタム コンポーネントを導入しました。開発プロセスは次のとおりです。
ページ開発方法を組み合わせることで、ミニプログラム コアスキルを開発します。その後、独自の設計に従ってさまざまな機能を担当する小さなプログラム ページを開発し、各ページの機能と特性に基づいて一連のカスタム コンポーネントを開発して、柔軟な組み合わせの効果を実現します。
プログラミング入門をご覧ください。 ！
以上がミニ プログラムでコンテンツ リスト コンポーネントを開発する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
