Uniappの小規模プログラム開発経験

1. 新しいUIプロジェクトを作成する

まず、私たちの UI は ColorUI に基づいています。ColorUI にスタイルがない場合、それは Uniapp に付属する UI に基づいています。したがって、これら 2 つの UI フレームワークはプロジェクトの開始時に導入する必要があります。
以下のように、新しい uni-ui プロジェクトを作成します。

別の ColorUI プロジェクトを作成します。

ColorUI の効果を確認して、どのコンポーネントを使用する必要があるかを確認する必要がある場合は、次のように実行できます。

uni-uiにも同じことが当てはまります。このようにして、必要なスタイルはすべてこれら 2 つの UI から取得できます。

2. 独自のプロジェクトを構築する

独自の新しい uniapp プロジェクトを作成し、完成させます。プロジェクトの構成は以下のとおりです。

次に、ColorUI スタイルを導入します。

• ColorUI プロジェクトの colorui ディレクトリを、独自のプロジェクトのルート ディレクトリにコピーします。
• プロジェクトのルートディレクトリのApp.vueファイルに、次のように2つのcssファイルを導入します。

<スタイル>
	/*各ページに共通のCSS */
	@import "colorui/main.css";
	@import "colorui/icon.css";

</スタイル>

• 特定のスタイルが必要な場合は、ColorUI プロジェクト内の要素を確認し、対応するクラスをコピーできます。

必要なスタイルが ColorUI で利用できない場合は、uni-ui のスタイルをインポートする必要があります。

• uni-uiプロジェクトのルートディレクトリにあるcommonを自分のプロジェクトのルートディレクトリにコピーします。
• CSSファイルをApp.vueディレクトリにインポートします。
  

最後に、App.vue は次のようになります。

<スタイル>
	/*各ページに共通のCSS */
	@import "colorui/main.css";
	@import "colorui/icon.css";
	@import url("common/uni.css");
</スタイル>

それ以来、UIプロジェクトのインポートは完了しました

3. 基本的な作業

タブバーを使用する: uniapp の公式 Web サイトにアクセスしてタブバー部分を見つけ、コピーして使用することができます。

ページジャンプ、リクエストの開始: uniapp 公式 Web サイトにアクセスし、uniapp コンポーネントを使用します。

ページが複雑すぎる場合は、複数のコンポーネントに分割することをお勧めします。次の図に示すように、ページ ディレクトリの下に新しいコンポーネント ディレクトリを作成し、そのコンポーネント ディレクトリの下に複数のコンポーネント (vue ファイル) を作成します。

コンポーネントをインポートする: 下の図に示すように、必要な場所にコンポーネントをインポートし、値を渡します。

4. ページレイアウト

ページレイアウトに関する実用的な提案をいくつか紹介します。

• 要素は上から下へ、1行を占め、標準のフローdivを使用してレイアウトできます。
• 要素を一列に並べる必要がある場合は、フロート レイアウトが必要です。ただし、フローティングレイアウトではコンテナ内の指定された位置に要素を正確に配置できないため、位置レイアウトが必要になります。ただし、この方法はドキュメント フローから分離する必要があり、フロートをクリアするためにさまざまなクリア操作が必要になるため、この方法は時代遅れです。フレックスレイアウトの使用をお勧めします
• 要約すると、div は上から下へのレイアウトに使用され、float と position は左から右へのレイアウトに使用されます。またはフレックスを使用する
• flex を使用すると多くの利点があります。justify-content を使用すると、左レイアウトと右レイアウトで要素を指定された位置にレイアウトできます。そのためこのレイアウトは人気があります。

要約する

ユニアプリ開発ミニプログラムに関するこの記事はこれで終わりです。ユニアプリ開発ミニプログラムに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。