ミニ プログラムで検索入力ボックス コンポーネントを開発する方法を段階的に説明します。

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

今回は コンポーネント の開発についてお話しましょう。ミニ プログラムは多くのページで構成されており、異なるページには 類似の 部分が含まれる可能性があるため、 ビルディング ブロック のようにページを異なるコンポーネントに合理的に分割して、完成させる必要があります。さまざまなコンポーネントを組み合わせて各ページを構築するため、コンポーネント開発という概念があります。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル ]

実践演習

それでは、早速、実際の戦闘を直接開始しましょう。ページをコンポーネントに分割する方法は、一連のページの開発で蓄積された経験に基づいています。まず、いくつかのページを作成して感覚をつかみましょう。

たとえば、最初に小さなプログラムのホームページを作成してみましょう。多くの一般的なアプリケーションのホームページのほとんどはコンテンツ リストです。実際には、「フィード フロー」と呼ばれるより専門的な名前が付けられています。

たとえば、上の図では、Weibo、Zhihu、Meituan、Boss Direct Recruitment のミニ プログラムのホームページです。ご覧のとおり、基本的には上部の 検索入力ボックス と、連続的に上にスクロールできるメイン部分のコンテンツ リストで構成されています。

ホームページの開発

次に、このアイデアに従って、独自の小さなプログラムのホームページの開発を開始します。

まず、app.json ファイルを開きます。このファイルでは、pages の最初に構成された項目がミニ プログラムのホームページです。

次に、ホームページ上の index.wxml ファイルを開いてクリアし、独自のホームページ コンテンツの作成を開始します。

クリア前

クリア後

上の画像にある#を変更できます##ホット リロード オンにすると、ページのコンテンツを変更した後、毎回手動でコンパイルをクリックする必要がなく、変更の効果をリアルタイムで確認できます。

さらに、上記の 4 つの主流ミニ プログラムのホームページにはタイトル コンテンツがないことが判明したため、

app.json の navigationBarTitleText フィールドも次のように変更しました。空の文字を串に刺すだけです。

検索ボックス コンポーネント

上で述べたように、ホームページは上部の検索入力ボックスとメイン部分のリストで構成されており、これによりホームページが自然に分離されます。

検索入力ボックス コンテンツ リスト の 2 つのコンポーネントに分かれています。これは、両方の要素が他のページで 再利用される可能性があるためです。

それでは、最初に検索入力ボックスを開発しましょう。上記の主流アプレットの 2 番目と 4 番目など、最も単純な形式を例として考えてみましょう。つまり、

角が丸い 入力ボックスです。入力ボックスの左端には 検索アイコン があり、デフォルトの プロンプト テキスト ## の行があります。 # 入力ボックス内。

組み込みコンポーネント input

入力ボックスは、ミニ プログラムによって提供される内部コンポーネント

input

を使用します。ドキュメントは表示されますinput 次に、ページまたはコンポーネントを開発するときは、各要素レベルで

view

タグをコンテナとして使用して要素をラップすることに注意する必要があります。要素は後からレイアウトで制御できるため、すべてが簡単になります。

たとえば、上記のコードを

pages/index/index.wxml

に記述すると、ページは左側のようになります。 ここでは、ミニ プログラムの組み込みコンポーネント

input

を使用し、placeholder 属性を通じてデフォルトのプロンプト テキストを設定します。 次に、スタイル コードを使用して検索ボックスのスタイルを設定する必要があります。

#要素タグにスタイル属性を追加しました

その後、index.wxss

をクリアしましたオリジナルのコンテンツに独自のスタイル コードを追加しました。

スタイル デバッグ

これは非常に実用的な開発のヒントです。上の図に示すように、開発者ツールによって提供される デバッガー を使用して表示できます。ページ 実際にレンダリングされた構造とスタイル属性。ここでページ要素のスタイルを直接変更し、その効果をリアルタイムで確認できます。色の属性の場合でも、現在の色をクリックして色選択パネルを表示し、上に示したように要素の色を調整できます。

次に、ページ スタイルを最適な効果が得られるように調整するときは、デバッガーでスタイル コードを直接選択してコピーし、それを index に貼り付けます。 wxss。

#アイコンの紹介

最後に、入力ボックス内の一番左側に検索スタイル アイコンを表示する必要もあります。まず、インターネットから検索スタイルの画像を見つける必要があります。この Web サイトのアイコン フィルタリングには

iconfont を使用することをお勧めします

アイコンを選択した後、アイコンの色とサイズを次のように変更できます。を選択し、ダウンロードしてください。

次に、ダウンロードした写真をミニ プログラム プロジェクト フォルダーに入れます。ミニ プログラム プロジェクト フォルダーを開くにはさまざまな方法があります。たとえば、開発者ツールの

エクスプローラー で任意のファイルを右クリックし、エクスプローラーで 表示 を選択するか、右上隅の詳細パネルをクリックして、次に、ローカル ディレクトリ1 つのアイテムをクリックします。

次に、新しい

assets フォルダーを作成し、画像やパブリック スタイルなどのミニ プログラムの静的ファイルを保存します。

ダウンロードした検索画像を

assets の images ディレクトリに置き、画像名を英語に変更します。名前 (プログラム解析エラーを避けるために、通常はファイル名を英語にすることをお勧めします)

その後、開発者ツールに戻ると、先ほどコピーした検索結果が表示されます。アイコンの準備ができました。次に、スタイル コードを使用して入力ボックスに表示します

#まず、上の図に示すメソッドを使用し、左上のアイコンをクリックします。デバッガーのコーナーをクリックして、ページの現在の要素構造を確認してください。方法は、まずデバッガーの左上隅にある表示アイコンをクリックし、次に左側のミニプログラム プレビュー内の任意の位置にマウスを移動することです。右側のパネルで、選択した要素が図に従って強調表示されることがわかります。左側の選択された位置 対応するコード領域。

この方法により、ページの現在のコード構造を直観的に理解できるため、新しく追加したアイコン要素をどのコンテナー層に配置するかを決定できます。

位置レイアウト

上記の操作の後、最終的に

search-bar レイヤー コンテナー内の最初の行に到達します。 inputと同じ別の組み込みコンポーネント image が同じレベルに追加され、表示される画像の場所が src 属性によって指定されます。ここで、image タグに src 属性を設定すると、開発者ツールは選択できるパスを自動的に尋ねます。画像の場所は現在のファイルが置かれているディレクトリの外にあるため、先頭に .. と入力するだけで上位のディレクトリに移動できます。その後、開発者ツールが次のメッセージを表示します。上位レベルのディレクトリが利用可能です。

最後に、CSS 構文を使用して

index.wxss に適切なスタイルを記述し、検索アイコンが左側の垂直中央位置に表示されました。入力ボックスの側面。特定の構文については、関連ドキュメントを参照して学習してください

実機プレビュー

したがって、上記の開発の後、私たちのホームページは完成し始めました。形。ここでは、開発者ツールが提供するもう一つの強力な機能、実機プレビュー機能を紹介します。

図に示すように、パネルの上部にある Preview ボタンをクリックします。開発者ツールは現在のミニ プログラム プロジェクトをプレビュー可能な状態にコンパイルします。開発者の WeChat で QR コードをスキャンすると、現在のミニ プログラムの実際のデバイス上の効果を確認できます

まとめ

# さて、最後に今日話した内容をまとめましょう。今日は、最初にコンポーネント開発の概念とコンポーネント分割が必要な理由を紹介し、

組み込みコンポーネントの使用
• などのコンポーネント開発プロセスで使用されるいくつかの開発テクニックを例を通じて紹介しました。
スタイルデバッグ方法
• 画像リソース紹介
• 実機プレビュー

もちろん、この記事では実際に

コンポーネント開発 引き続き要素をページ ファイル内で直接開発するため、次の記事では、検索入力ボックス コンポーネント コンテンツ リスト コンポーネントに従ってホームページを分割します。小さなプログラムコンポーネントの開発方法。

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

プログラミング ビデオをご覧ください。 ！

以上がミニ プログラムで検索入力ボックス コンポーネントを開発する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。