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 ノート

推薦する

Dell R720 サーバーに Windows Server 2008 R2 をインストールする方法

注: この記事のすべての写真はインターネットから収集されたものであるため、DELL R720 サーバ...

HTML スライドフローティングボールメニュー効果の実装

CSS スタイル html,本文{ 幅: 100%; 高さ: 100%; マージン: 0;パディング...

VMware kali仮想マシン環境の設定方法

1|0 カーネルをコンパイルする(1)uname -rコマンドを実行してカーネルバージョンを表示しま...

Linux 上でプロジェクトをリリースするために Tomcat を展開するプロセスにおけるさまざまな問題と解決策

プロジェクトをプロジェクトサイトのテスト環境にデプロイするJDK1.8トムキャット8.5 Maven...

HTML の小さなタグの使用に関するヒント

<em></em> などのフレーズ要素を使用すると、意図した視覚スタイルを維...

HTML フォームを送信するいくつかの方法_PowerNode Java Academy

方法1: 送信ボタンから送信する <!DOCTYPE html> <html>...

シンプルなナビゲーションバー機能を実現するHTML+CSS

さっそく、コードを見てみましょう(初心者:特に言うことはありません) <!DOCTYPE ht...

JavaScript フレームワーク デザイン パターンの詳細な説明

目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...

DockerにTomcat8をインストールする方法

1. dockerでtomcat8をインストールする1. Docker HubでTomcatイメージ...

Linux dirnameコマンドの具体的な使い方

01. コマンドの概要dirname - ファイル名からディレクトリ以外のサフィックスを削除しますd...

MySqlはページクエリ機能を実装します

まず、ページ分割クエリを使用する理由を明確にする必要があります。データが膨大なため、すべてのデータを...

ウェブサイト構築経験概要

<br />注目を集めるウェブサイトを作成するには、どのような原則に従うべきでしょうか?...

Blazor における CSS 分離の問題

1. 環境VS 2019 16.9.0 プレビュー 1.0 .NET SDK 5.0.100 2. ...

QQブラウザ機能を実装するためのCSS

コード知識ポイント1. fullpage.jsを組み合わせてフルスクリーンスクロールを実現する2. ...

Linuxのアラーム機能の例の説明

Linuxアラーム機能の紹介上記のコード: #include <stdio.h> #in...