この記事では、ミニ プログラムの実践的な開発実践と、ミニ プログラムに UI コンポーネント ライブラリをインストールして使用する方法を紹介します。
小規模プログラム開発の基本スキル (ページ開発、コンポーネント開発、# など) は前に紹介しました。 ## クラウド開発 など、これらはすべて機能レベルです。今回はUIコンポーネントライブラリを使った小規模プログラム開発のUIレベルのスキルを別講義で紹介します。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル ]
vant UI コンポーネント ライブラリを例として、UI コンポーネント ライブラリを使用して小さなプログラムを改善する方法を紹介します。 . 開発効率。
ターミナル パネルを選択し、新しいターミナルを作成します。ここでのターミナルは、Windows システムのコマンド ラインなど、コンピューターに付属のターミナルを使用します。または MacOS のターミナル。
npm -v と入力して、npm ツールが現在のコンピューターにインストールされているかどうかを確認します。ツールはダウンロードに使用されますネットワーク ソフトウェア パッケージ ツールは Nodejs に属します。コンピューターに npm がない場合は、まず nodejs をダウンロードしてインストールを完了できます。インストール後、npm は含まれること。
vant ソフトウェア パッケージをミニ プログラム プロジェクトにダウンロードできます。具体的な手順については、# を参照してください。 # #vantクイック スタート ドキュメント 実行するだけです。 最初のステップが成功すると、下の図のようなものが表示されるはずです。
の ##style:v2 が削除されます
3 番目のステップでは、指示に従って 
ここでの 1 つの問題は、純粋な小さなプログラム プロジェクトの場合、
package.json
npm init -y
これは、実際に実行しているためです。 package.json を作成する前に npm パッケージをインストールするため、
dependency 項目を確認する必要があります。ファイルには @vant/weapp があります。 4 番目で最後のステップは、開発者ツールの上部にあるメニュー バーの ツール
Build npm を使用して、インストールした npm パッケージをビルドすることです。これは、vant のドキュメントに記載されているように、ミニ プログラム開発の新しいバージョンでは、ミニ プログラムによる npm パッケージの解析ディレクトリが miniprogram_npm になったためです。
したがって、
の下に miniprogramNpmDistDir を追加する手順に従う必要があります。 # 次の図に示すように、項目は ./ に変更されます。
miniprogram_npm## がミニ ファイルに自動的に追加されます。プログラム ディレクトリ #このディレクトリは、すべての npm パッケージの管理専用です。
<blockquote><p>ミニプログラムの開発ルールは更新される可能性があるため、サードパーティツールと連携する場合には、実情に応じて柔軟な設定調整が必要となります。 </p></blockquote>
<h3 data-id="heading-3">コンポーネント ライブラリの使用法</h3>
<p>コンポーネント ライブラリをインストールした後、コンポーネント ライブラリ内のすべてのコンポーネントの使用を開始できます。まず、前の検索入力ボックスを変換し、vant が提供する検索コンポーネントを使用してみましょう。 </p>
<p><img src="https://img.php.cn/upload/image/106/229/625/1636945296509640.png" title="1636945296509640.png" alt="ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法"></p>
<p>UI コンポーネント ライブラリの使用方法は、自社開発コンポーネントの使用方法と同じで、どちらも最初に導入するコンポーネントを json で宣言する必要があります。 file</p>
<p> <img src="https://img.php.cn/upload/image/548/703/527/163694530171822%E3%83%9F%E3%83%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%ABUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" title="163694530171822ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法" alt="1ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法"></p>
<p>vant のドキュメントには各コンポーネントの参照メソッドも記載されているので、その指示に従うだけです。 </p>
<p><img src="https://img.php.cn/upload/image/895/154/994/1636945305168070.png" title="1636945305168070.png" alt="1ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法"></p>
<p> json ファイルを変更して有効にした後は、必ず手動で [コンパイル] をクリックしてください。wxml や wxss ファイルの変更とは異なり、変更はホット リロード機能によってリアルタイムで有効になります。 </p>
<p><img src="https://img.php.cn/upload/image/242/413/743/163694530925318%E3%83%9F%E3%83%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%ABUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" title="163694530925318ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法" alt="1ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法"></p>
<p>さらに、検索コンポーネントなどのコンポーネントの場合、そのプロパティには変数値のバインド、つまり <code>value が含まれます。検索ボックス 入力コンテンツ。検索ボックスで入力コンテンツを受け取るには、js ファイルで変数を宣言してこの値を保存する必要があります。
このようにして、検索ボックスの変形が完了し、UI コンポーネント ライブラリの使い方を実践することができました。
次に、vant のドキュメントを読み、さまざまなコンポーネント ライブラリの既存のコンポーネントを組み合わせることで、多くの関数の開発を大幅にスピードアップできます。
この記事では、既存の UI コンポーネント ライブラリを使用して小規模プログラム開発の効率を向上させる方法、主に インストール と 使用 ## を紹介します。 #2 つのステップ。次の記事では、vant コンポーネント ライブラリの強力な機能を組み合わせて、完全なホームページの機能実装を完了します。
プログラミング入門をご覧ください。 ！
以上がミニプログラムにUIコンポーネントライブラリをインストールして使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
