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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • uniapp 要素ノードスタイルの動的変更の詳細な説明
  • uniappの無痛トークンリフレッシュ方法の詳細な説明
  • uniapp プロジェクトで MQTT を使用する方法
  • uniapp アプレットでウォーターフォール フロー レイアウトを実装するためのアイデアとコード
  • Uniapp WeChatアプレット: キー障害の解決策
  • uniappは録音アップロード機能を実現

<<:  Dockerfile を使用して Node.js サービスをデプロイする方法

>>:  Mysql 5.6.37 winx64 インストール デュアル バージョン mysql ノート

推薦する

ウェブデザイナーは適した人材

<br />この世に道はない。より多くの人が歩くようになると、それは道になります。最初は...

Nginx でバージョン番号を隠したり偽造したりする方法

1. デフォルトでアクセスするには、curl コマンドを使用します。 # curl -I http:...

vue3 コンポーネントでの v-model の使用と詳細な説明

目次v-model 入力で双方向バインディングデータを使用するコンポーネント内の v-model他の...

Dockerがsudo操作を使用する必要がある問題を解決する

手順は以下のとおりです1. dockerグループを作成する: sudo groupadd docke...

MySQL インデックスの長さ制限の原理の分析

この記事は主に、MySQL インデックスの長さ制限の原理の分析を紹介します。サンプル コードを通じて...

HTML ヘッド構造

以下では、よく使われるヘッド構造と、各タグや要素の意味や使用シーンを紹介します(この記事は、Yisi...

Linux で pip 操作中にタイムアウトが発生する問題を解決する方法

Linuxインスタンスでpipを使用する際のタイムアウト問題を解決する方法pip は最も人気のある ...

Nginx ロードバランシングとは何か、そしてそれをどのように設定するか

負荷分散とは負荷分散は主に、専用のハードウェア デバイスまたはソフトウェア アルゴリズムによって実現...

CSSの2つの特別な値は、カスケードの継承と初期メソッドを制御するために使用されます。

カスケードを制御するために CSS の任意のプロパティに割り当てることができる特別な値が 2 つあり...

MySQLで全角文字と半角文字を保存する場合の違い

残念ながら、社内の IM のテスト中に MYSQL_DATA_TRUNCATED エラーが再び発生し...

JavaScript で円形のプログレスバー効果を実装する

この記事では、円形のプログレスバー効果を実現するためのJavaScriptの具体的なコードを参考まで...

antd+reactプロジェクトをviteに移行するためのソリューションの詳細な説明

Antd+react+webpackは、多くの場合、Reactテクノロジースタックに基づくフロントエ...

表 td 画像水平および垂直中央揃えコード

HTMLコード:コードをコピーコードは次のとおりです。 <td align="cen...

Element UI をインストールして vue3.0 でベクター グラフィックスを使用する方法

ここでは、v3 のインストールと使用にのみ焦点を当てます。v2 について学びたい場合は、公式 Web...

Linux で ping は成功するがポートが利用できない問題を解決する方法

ping は成功したがポートにアクセスできない場合のポート可用性検出の説明ポート可用性検出ツールの紹...