ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法

この記事では、ミニ プログラムの実践的な開発実践と、ミニ プログラムに UI コンポーネント ライブラリをインストールして使用する方法を紹介します。

小規模プログラム開発の基本スキル (ページ開発、コンポーネント開発、# など) は前に紹介しました。 ## クラウド開発 など、これらはすべて機能レベルです。今回はUIコンポーネントライブラリを使った小規模プログラム開発のUIレベルのスキルを別講義で紹介します。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル ]

UI コンポーネント ライブラリを使用する利点は自明です。これにより、小さなプログラムの全体的な UI スタイルを統一できると同時に、開発時間やプログラム時間を大幅に節約します。複雑な機能コンポーネントが多いため、自分で実装するには時間がかかり、さまざまな機能上の欠陥が発生しやすいためです。

実践

次に、

vant UI コンポーネント ライブラリを例として、UI コンポーネント ライブラリを使用して小さなプログラムを改善する方法を紹介します。 . 開発効率。

コンポーネント ライブラリのインストール

コンポーネント ライブラリを使用する最初のステップは、コンポーネント ライブラリを既存のアプレットに統合することです。

まず、開発者ツールで

ターミナル パネルを選択し、新しいターミナルを作成します。ここでのターミナルは、Windows システムのコマンド ラインなど、コンピューターに付属のターミナルを使用します。または MacOS のターミナル。

次に、ターミナルに

npm -v と入力して、npm ツールが現在のコンピューターにインストールされているかどうかを確認します。ツールはダウンロードに使用されますネットワーク ソフトウェア パッケージ ツールは Nodejs に属します。コンピューターに npm がない場合は、まず nodejs をダウンロードしてインストールを完了できます。インストール後、npm は含まれること。

コンピュータに npm がある場合は、それを使用して

vant ソフトウェア パッケージをミニ プログラム プロジェクトにダウンロードできます。具体的な手順については、# を参照してください。 # #vantクイック スタート ドキュメント 実行するだけです。 最初のステップが成功すると、下の図のようなものが表示されるはずです。

2 番目のステップでは、指示に従って

#app.json

の ##style:v2 が削除されます

3 番目のステップでは、指示に従って project.config を変更します.json

は次のとおりです。

ここでの 1 つの問題は、純粋な小さなプログラム プロジェクトの場合、package.json

ファイルは最初に存在するため、この構成で指定されている package.json ファイルは見つかりません。

npm init -y

コマンドを使用して手動で作成できます。結果は次のとおりです。

これは、実際に実行しているためです。 package.json を作成する前に npm パッケージをインストールするため、npm i @vant/weapp -S --production

を再実行して、package.json 内の

dependency 項目を確認する必要があります。ファイルには @vant/weapp があります。 4 番目で最後のステップは、開発者ツールの上部にあるメニュー バーの ツール

-

Build npm を使用して、インストールした npm パッケージをビルドすることです。これは、vant のドキュメントに記載されているように、ミニ プログラム開発の新しいバージョンでは、ミニ プログラムによる npm パッケージの解析ディレクトリが miniprogram_npm になったためです。

したがって、project.config.json## の

packNpmRelationList

の下に miniprogramNpmDistDir を追加する手順に従う必要があります。 # 次の図に示すように、項目は ./ に変更されます。

次に、開発者ツールを再利用して npm をビルドします。完了後、次の図が表示され、

miniprogram_npm## がミニ ファイルに自動的に追加されます。プログラム ディレクトリ #このディレクトリは、すべての npm パッケージの管理専用です。

<blockquote><p>ミニプログラムの開発ルールは更新される可能性があるため、サードパーティツールと連携する場合には、実情に応じて柔軟な設定調整が必要となります。 </p></blockquote> <h3 id="コンポーネント-ライブラリの使用法">コンポーネント ライブラリの使用法</h3> <p>コンポーネント ライブラリをインストールした後、コンポーネント ライブラリ内のすべてのコンポーネントの使用を開始できます。まず、前の検索入力ボックスを変換し、vant が提供する検索コンポーネントを使用してみましょう。 </p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/106/229/625/1636945296509640.png?x-oss-process=image/resize,p_40" class="lazy" title="1636945296509640.png" alt="ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法"></p> <p>UI コンポーネント ライブラリの使用方法は、自社開発コンポーネントの使用方法と同じで、どちらも最初に導入するコンポーネントを json で宣言する必要があります。 file</p> <p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/548/703/527/163694530171822ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法?x-oss-process=image/resize,p_40" class="lazy" title="163694530171822ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法" alt="1ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法"></p> <p>vant のドキュメントには各コンポーネントの参照メソッドも記載されているので、その指示に従うだけです。 </p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/895/154/994/1636945305168070.png?x-oss-process=image/resize,p_40" class="lazy" title="1636945305168070.png" alt="1ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法"></p> <p> json ファイルを変更して有効にした後は、必ず手動で [コンパイル] をクリックしてください。wxml や wxss ファイルの変更とは異なり、変更はホット リロード機能によってリアルタイムで有効になります。 </p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/242/413/743/163694530925318ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法?x-oss-process=image/resize,p_40" class="lazy" title="163694530925318ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法" alt="1ミニプログラムにUIコンポーネントライブラリをインストールして使用する方法"></p> <p>さらに、検索コンポーネントなどのコンポーネントの場合、そのプロパティには変数値のバインド、つまり <code>value が含まれます。検索ボックス 入力コンテンツ。検索ボックスで入力コンテンツを受け取るには、js ファイルで変数を宣言してこの値を保存する必要があります。

このようにして、検索ボックスの変形が完了し、UI コンポーネント ライブラリの使い方を実践することができました。

次に、vant のドキュメントを読み、さまざまなコンポーネント ライブラリの既存のコンポーネントを組み合わせることで、多くの関数の開発を大幅にスピードアップできます。

概要

この記事では、既存の UI コンポーネント ライブラリを使用して小規模プログラム開発の効率を向上させる方法、主に インストール と 使用 ## を紹介します。 #2 つのステップ。次の記事では、vant コンポーネント ライブラリの強力な機能を組み合わせて、完全なホームページの機能実装を完了します。

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

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

以上がミニプログラムにUIコンポーネントライブラリをインストールして使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。