Mr.Raindrop

Vue2 と uni-app のノート#

Vue2#

Vue はコンポーネントを通じて再利用可能なブロックマークアップを作成することを許可します。ほとんどの場合、Vue コンポーネントは特別な HTML テンプレートの構文を使用して記述されます。HTML 構文が許可する以上の制御が必要な場合、JSX または純粋な JavaScript 関数を記述してコンポーネントを定義できます。Vue アプリケーションは、new Vueによって作成されたルート Vue インスタンスと、オプションのネストされた再利用可能なコンポーネントツリーで構成されています。

template は 1 つのノードであり、tag コンポーネントを書くために使用され、script と style は並列の 1 つのノードであり、つまり 3 つの 1 つのノードがあります。

• HTMLは、ウェブページのコンテンツを構造化し、段落、見出し、データテーブルを定義したり、ページに画像や動画を埋め込んだりするためのマークアップ言語です。

• CSSは、HTML コンテンツにスタイルを適用するためのスタイルルール言語であり、背景色やフォントを設定したり、複数の列にコンテンツをレイアウトしたりします。

• JavaScriptは、動的に更新されるコンテンツを作成したり、マルチメディアを制御したり、画像アニメーションを作成したりするために使用できるスクリプト言語です。

DOM#

ドキュメントオブジェクトモデル（Document Object Model、略して DOM）は、HTML および XML ドキュメントに対する API（アプリケーションプログラミングインターフェース）です。ドキュメントオブジェクトモデル（DOM）は、ドキュメントの構造（例えば、ウェブページを表す HTML）をオブジェクトの形式でメモリに保存することによって、ウェブページとスクリプトまたはプログラミング言語を接続します。DOM は論理ツリーの形式でドキュメントを表現します。ツリーの各分岐の末端はノードであり、各ノードはオブジェクトを含みます。DOM メソッドは、プログラム的にツリーにアクセスすることを許可します。これらのメソッドを使用すると、ドキュメントの構造、スタイル、または内容を変更できます。

ディレクティブ#

ディレクティブ（Directives）は、v-プレフィックスを持つ特別な属性です。ディレクティブ属性の値は単一の JavaScript 式であることが期待されます（v-forは例外です）。

<!-- 完全な構文 -->
<a v-on:click="doSomething">...</a>

<!-- 短縮形 -->
<a @click="doSomething">...</a>

<!-- 完全な構文 -->
<a v-bind:href="url">...</a>

<!-- 短縮形 -->
<a :href="url">...</a>

計算プロパティとメソッドプロパティ#

計算プロパティは、それらの反応依存関係に基づいてキャッシュされます。関連する反応依存関係が変更されたときのみ再評価されます。それに対して、再レンダリングがトリガーされるたびにメソッドを呼び出すと、常に関数が再実行されます。したがって、計算プロパティはパフォーマンスの要求が低くなります。

getter と setter の意味#

Getter#

1. 意味:
   • Getter は計算プロパティの主要な構成要素であり、計算プロパティの値を取得するための関数です。
   • 計算プロパティにアクセスすると、実際には getter メソッドが呼び出されます。
2. 用途:
   • Getter メソッドは通常、他のデータプロパティに基づいて新しい値を計算するために使用されます。
   • Getter メソッドはコンポーネントのすべてのデータや他の計算プロパティにアクセスできます。
   • 依存するデータが変更されると、Vue.js は自動的に getter メソッドを呼び出して計算プロパティの値を更新します。

Setter#

1. 意味:
   • Setter はオプションの部分であり、計算プロパティの値を設定するための関数です。
   • 読み取り専用の計算プロパティを変更しようとすると、Vue.js は自動的に setter メソッドを呼び出します。
2. 用途:
   • Setter メソッドは通常、計算プロパティ自体を直接変更するのではなく、他のデータプロパティの値を更新するために使用されます。
   • 計算プロパティに値が割り当てられると、Vue.js は setter メソッドを呼び出します。

アロー関数式 =>#

() => {
  statements
}

param => {
  statements
}
(param1, paramN) => {
  statements
}

アロー関数は async であることができ、方法は式の前に async キーワードを追加することです。

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

非同期操作と Async/Await#

promise#

Promise は現代の JavaScript における非同期プログラミングの基礎です。これは、非同期関数によって返されるオブジェクトであり、操作が現在どの状態にあるかを示すことができます。Promise が呼び出し元に返されるとき、操作はまだ完了していないことが多いですが、Promise オブジェクトは操作の最終的な成功または失敗を処理するためのメソッドを提供します。

Promise の優雅さは、then()自体も Promise を返すことにあり、この Promise はthen()内で呼び出された非同期関数の完了状態を示します。これにより、promise をチェーン状に使用できます。

promise には ** 保留中（pending）、満たされた（fulfilled）、拒否された（rejected）** の 3 つの状態があります。

Async と Await#

関数の先頭にasyncを追加すると、それは非同期関数になります。

uni-app では、asyncとawaitの基本的なロジックと原理は他の JavaScript 環境と同じです。

Vue コンポーネントのライフサイクルには、created や mounted のような非同期のフック関数があります。これらのフック関数は、コンポーネントが作成されたり DOM にマウントされた後に非同期操作を実行することを許可します。

this.$api.common.login(this.loginForm).then(async res => {   // async 非同期 アロー関数はfunctionキーワードを省略し、引数リストと関数本体の間に=>を使用
    if (res.code == 200) {
    // tokenとアカウントを保存
    this.saveToken(res.token);
    this.saveAccount();
    // ユーザー情報を取得
    let profile = await this.getProfile();   // 非同期の完了を待つ
    uni.$u.vuex('profile', profile);
    // ホームページにジャンプ
    uni.switchTab({
    url: '/pages/tabBar/home/index'
    });

async関数は特別な関数であり、常に Promise を返します。明示的に Promise を返さなくても、async関数は解決された Promise を返し、その値はundefinedです。

awaitキーワードはasync関数内部でのみ使用できます。これは Promise の結果を待つために使用されます。Promise をawaitすると、JavaScript エンジンはasync関数の実行を一時停止し、Promise が解決または拒否されるまで待機します。

asyncとawaitの基本的な原理は Promise に基づいています。Promise は JavaScript における非同期操作を処理する標準的な方法の 1 つであり、3 つの状態を持ちます：pending（保留中）、fulfilled（満たされた）、rejected（拒否された）。Promise オブジェクトは、最終的に完了または失敗する可能性のある非同期操作を表し、完了または失敗時の値を伴います。

awaitキーワードは Promise の結果を待つために使用されます。async関数内でawaitキーワードを使用すると、JavaScript エンジンはasync関数の実行を一時停止し、Promise が解決または拒否されるまで待機します。Promise が解決されると、await式の値は解決値になります。Promise が拒否されると、await式はエラーをスローし、これはtry...catch文で処理できます。

スロット（slot）#

    <!-- 異なる条件に基づいて画像をレンダリング -->
    <u--image v-if="device.imgUrl" :src="device.imageUrl" radius="10" mode="aspectFill"
    width="70" height="70">
    <!-- スロット（slot）で異なる状態のときに表示される画像 -->
    <view slot="error" style="font-size: 12px;">読み込み失敗</view>
    <template v-slot:loading>
    <u-loading-icon></u-loading-icon>
    </template>

HTML 要素は、Web コンポーネント技術スイートの一部であり、Web コンポーネント内のプレースホルダーであり、独自のマークアップを使用してそのプレースホルダーを埋めることができ、個別の DOM ツリーを作成して一緒にレンダリングします。

$ 記号#

Vue.js では、$ 記号の使用は主に Vue インスタンスまたは Vue コンポーネントインスタンスの特定の属性やメソッドに基づいています。これらの属性やメソッドは通常 $ で始まり、通常のデータ属性、計算プロパティ、メソッドなどと区別されます。これらの $ で始まる属性やメソッドは、Vue フレームワーク自体によって提供され、Vue 関連の操作を実行したり、Vue インスタンスの内部状態にアクセスしたりするために使用されます。

template 中：の使用#

Vue.js 中属性バインディングの詳細解析：コロン `:` と非コロンの違い_vue 属性 コロン - CSDN ブログ

v-bind属性はディレクティブと呼ばれます。ディレクティブはv-プレフィックスを持ち、Vue が提供する特別な属性であることを示します。

パラメータを設定する際に：を追加するかどうかは、HTML 属性（attributes）を設定しているのか、Vue 特有のディレクティブを設定しているのかによって主に決まります。これらはレンダリングされた DOM に特別な反応的動作を適用します。

:が不要な場合#

静的 HTML 属性：要素に直接属性を書いた場合、例えば<div id="app">、ここでのid="app"は静的な HTML 属性であり、その値はコンパイル時にすでに決定され、Vue インスタンス内のデータの変化に伴って変わることはありません。

Vue ディレクティブだが属性バインディングではない：v-model、v-if、v-forなどの特定の Vue ディレクティブは、HTML 属性をバインドするためのものではなく、データバインディング、条件レンダリング、リストレンダリングなどの機能を実現するための Vue 特有のテンプレートディレクティブです。これらのディレクティブは HTML 属性のバインディングではないため、:プレフィックスは必要ありません。

:が必要な場合#

動的 HTML 属性バインディング：Vue インスタンス内のデータに基づいて HTML 要素の属性を動的に設定したい場合、v-bindディレクティブを使用する必要があります。簡略化のために、Vue はv-bindの短縮形として:を使用することを許可しています。例えば、<div :id="dynamicId">の:id="dynamicId"は、id属性の値が Vue インスタンスのdynamicIdデータ属性にバインドされることを示します。dynamicIdの値が変わると、<div>のid属性もそれに応じて更新されます。

<!-- 完全な構文 -->
<a v-on:click="doSomething">...</a>

<!-- 短縮形 -->
<a @click="doSomething">...</a>

動的バインディングと静的バインディングはパフォーマンスに違いがあります。動的バインディングは一定のレンダリングオーバーヘッドを増加させます。なぜなら、Vue.js は式の変化を監視し、反応的な更新を行う必要があるからです。静的バインディングはそのようなパフォーマンスオーバーヘッドはありません。なぜなら、それらは静的な値だからです。

パスワードなしログイン関連#

ローカルキャッシュから token 値を読み取り、Vuex 状態管理器に保存して、必要な場所でこの token 値に簡単にアクセスできるようにします。

getToken () {
    // ローカルキャッシュからtokenを取得
    this.token = uni.getStorageSync('token');
    // vuexにtokenを保存
    uni.$u.vuex('vuex_token', this.token);
}

token、session、cookie の違い#

• セキュリティ：Token は通常 Cookie よりも安全です。なぜなら、暗号化された署名を含み、永続的なストレージとして設計することができます。一方、Cookie はクライアントに保存され、攻撃を受けやすいです。

• スケーラビリティ：Token メカニズムは、サーバーがセッション状態を維持する必要がないため、ステートレスアーキテクチャや分散システムにより適しています。

• クロスドメインの問題：Token はクロスドメインの問題を簡単に解決できますが、従来の Session Cookie は同一オリジンポリシーの制限を受けます。

this.$refs.form#

this.$refs.formは、ref="form"を持つテンプレート内のフォーム要素またはコンポーネントを指す参照です。

Vue コンポーネントのテンプレートでref属性を使用すると、Vue はそのコンポーネントインスタンスの$refsオブジェクト内に対応する属性を作成し、その属性の値は対応する子コンポーネントインスタンスまたは DOM 要素になります。

注意：$refsの値はコンポーネントがレンダリングされる前はundefinedです。したがって、createdフック内で直接$refsにアクセスすることはできず、mountedフックまたはその後のライフサイクル内でアクセスする必要があります。

ページ構造#

ページ | uni-app 公式サイト (dcloud.net.cn)

1 つのページには、3 つのルートノードタグがあります：

• テンプレートコンポーネント区 <template>
• スクリプト区 <script>
• スタイル区 <style>

vue ファイル内では、template、script、styleの 3 つは平行関係にあります。vue2 では、templateの二次ノードは 1 つのノードのみである必要があります。一般的には 1 つのルートviewの下にページコンポーネントを続けて書きます。しかし、vue3 では、template は複数の二次ノードを持つことができ、1 つのレベルを省略できます。

スクリプト区内では、開発者はexport default {}の外側のコードを慎重に記述する必要があります。この部分のコードには 2 つの注意事項があります：

1. アプリケーションのパフォーマンスに影響を与える。この部分のコードはアプリケーションの起動時に実行され、ページの読み込み時ではありません。ここに書かれたコードが複雑すぎると、アプリケーションの起動速度に影響を与え、より多くのメモリを占有します。
2. コンポーネントやページが閉じられるときに回収されません。外側の静的変数はページが閉じられても回収されません。必要に応じて手動で処理する必要があります。例えば、beforeDestroyまたはdestroyedライフサイクルで処理します。

export#

ES6（ECMAScript 6）では、export と export default は変数（定数を含む）、関数、クラス、ファイル、モジュールなどをエクスポートするために使用でき、他のファイルやモジュールで import 変数（定数を含む）| 関数 | クラス | ファイル | モジュール名の方法でインポートして使用できるようにします。export は複数回使用できますが、export default は 1 つだけです。

install#

Vue.js では、const install = (Vue, vm) => { ... }とexport default { install }を使用することは、Vue プラグインを定義してエクスポートする一般的なパターンです。この方法により、Vue アプリケーションで使用できるプラグインを作成できます。

install関数は通常、2 つのパラメータを受け取ります：

• Vue: Vue コンストラクタであり、Vue のプロトタイプを拡張したり、グローバルコンポーネントやディレクティブを登録したりするために使用できます。
• vm: オプションのパラメータであり、通常は Vue インスタンスのコンテキストにアクセスするために使用されますが、Vue 3 では廃止されました。

関数本体内では、Vue を構成したり、カスタム動作を登録したりするためのさまざまな操作を実行できます。他の場所（例えばmain.js）でこのモジュールをインポートすると、Vue.use()メソッドを通じてこのプラグインをインストールできます。

prototype#

JavaScript におけるプロトタイプは、オブジェクト間の継承と属性およびメソッドの共有を実現するための特別なメカニズムです。すべての JavaScript オブジェクトには内部属性[[[Prototype]]]があり、これは別のオブジェクトを指します。このオブジェクトはプロトタイプオブジェクトと呼ばれます。オブジェクトの属性やメソッドにアクセスしようとすると、そのオブジェクト自体にその属性やメソッドがない場合、JavaScript エンジンはプロトタイプチェーンを上に向かって検索し、属性やメソッドが見つかるまで探します。Java はオブジェクト指向プログラミング言語として、JavaScript のプロトタイプメカニズムに類似した概念を持っていますが、クラス継承とインターフェース実装の方法を採用しています。Java には JavaScript のprototypeに直接対応する概念はありませんが、Java のいくつかのメカニズムを探求することができ、それらはある程度同様の機能を実現しています。

prototypeはすべての関数オブジェクトに存在する特別な属性です。関数を作成すると、この関数は自動的にprototype属性を取得します。このprototype属性はオブジェクトであり、新しく作成されたオブジェクトのプロトタイプとして機能します。コンストラクタ関数を使用してオブジェクトを作成すると、新しく作成されたオブジェクトはprototypeオブジェクトの属性やメソッドを継承します。

Vue.js では、JavaScript のプロトタイプメカニズムを利用してVue のプロトタイプを拡張し、すべての Vue インスタンスが特定の属性やメソッドを共有できるようにします。これは通常、属性やメソッドをVue.prototypeに追加することで実現されます。

Vue.prototype.$api = {
    // モジュールをインポート
    common,
    scene,
    group,
    deviceUser,
    deviceLog,
    device,
    deviceJob,
    account,
    energyConsumptionAnalysis
};

上記のコードでは、Vue のプロトタイプに$apiという名前の属性を追加し、カスタムモジュールを追加しました。その後、Vue の任意のインスタンスで$apiを通じてこれらのメソッドにアクセスできます。

 this.$api.common.xxx()   // カスタムメソッドにアクセス

Props#

uni-app 公式サイト (dcloud.net.cn)

コンポーネントの基本 | Vue.js (vuejs.org)

propsは配列またはオブジェクトであり、親コンポーネントからのデータを受け取るために使用されます。Props は子コンポーネントで宣言登録でき、親コンポーネントでその中に宣言されたパラメータの値を定義します。親の prop の更新は子コンポーネントに流れますが、逆流することはできません。propsは単純な配列であるか、オブジェクトを代わりに使用することができ、オブジェクトは型検査、カスタム検証、デフォルト値の設定などの高度なオプションを構成できます。

ref#

uni-app 公式サイト (dcloud.net.cn)

要素または子コンポーネントに参照情報を登録するために使用され、参照情報は親コンポーネントの$refsオブジェクトに登録されます。

<!-- index 親コンポーネントページ -->
<template>
	<view>
		<base-input ref="usernameInput"></base-input>
		<button type="default" @click="getFocus">フォーカスを取得</button> 
	</view>
</template>
<script>
	export default {
		methods:{
			getFocus(){
				// コンポーネントで定義されたrefを使用してfocusメソッドを呼び出す
				this.$refs.usernameInput.focus()
			}
		}
	}
</script>

vuex#

Vuex は、Vue.js アプリケーションのために特別に開発された状態管理パターンです。これは、アプリケーションのすべてのコンポーネントの状態を集中管理し、状態が予測可能な方法で変化することを保証するためのルールを持っています。

Vuex とグローバル変数の違い

すべてのVuexアプリケーションのコアはstore（ストア）です。これは、アプリケーション内のほとんどの状態（state）を含んでいます。

状態管理には 5 つのコアがあります：state、getter、mutation、action、module。

Uni-app#

ページライフサイクル#

各 Vue インスタンスは作成されるときに一連の初期化プロセスを経なければなりません。例えば、データリスニングの設定、テンプレートのコンパイル、インスタンスを DOM にマウントし、データが変化したときに DOM を更新するなどです。同時に、このプロセスではライフサイクルフックと呼ばれる関数も実行されます。

mounted#

コンポーネントの DOM 要素がドキュメント DOM にマウントされた後に呼び出されます。以下のコードでは、token が見つかった場合、直接ページにジャンプします。

	mounted () {    // mountedフックはコンポーネントのDOM要素がマウントされた後に呼び出されます。
		this.getToken();  // ローカルキャッシュからtokenを取得
		if (this.token != '' && this.token != null) {     
			// ホームページにジャンプ
			uni.switchTab({
				url: '/pages/tabBar/home/index'
			});
		} else {
			this.getCode();
			this.getAccount();
		}
	},

onShow、onHide、onUnload#

ページ表示は繰り返しトリガーされるイベントです。

a ページが最初に入ると、a ページの onShow がトリガーされます。

a が b ページにジャンプすると、a は onHide をトリガーし、b は onShow をトリガーします。

しかし、b が閉じられると、b は onUnload をトリガーし、その時 a が再び表示されると、再度 onShow がトリガーされます。

タブバーのページ（pages.json で設定されたタブバー）では、異なるタブページが互いに切り替わると、それぞれの onShow と onHide がトリガーされます。

create#

インスタンスが作成された後に即座に呼び出されます。

onReady#

ページの初回レンダリングが完了し、記述されたコードを実行します。この時点でコンポーネントはマウントされ、DOM ツリーが利用可能です。

uni-app フレームワークは、まず pages.json の設定に基づいてページを作成します。ページ内の template コンポーネントに基づいて DOM を作成します。その後、onload をトリガーします。

Tabbar の設定#

uni-app の底部ナビゲーションバー tabBar の表示と使用手順_uni-app が tabbar インターフェースであるかどうかを判断 - CSDN ブログ

tabBar 内のリストは配列であり、最小 2 つ、最大 5 つのタブを構成でき、タブは配列の順序で並べられます。Tabbar の設定はpage.jsファイル内にあります。Tabbar ページはドキュメント内の pages 配列に追加する必要があります。

上部ナビゲーションバーの削除#

uni-app 開発 - 上部ナビゲーションバー - 掘金 (juejin.cn)

pages.json ページルーティング | uni-app 公式サイト (dcloud.net.cn)

manifest.jsonで次のパラメータを設定することで、アプリと携帯電話の上部ステータスバーや水滴画面などの遮蔽の問題を回避できます。また、上部に視覚的なブロックを追加して上部ステータスバー領域を埋めることもできます。

"app-plus" : {
    "statusbar": {  
        "immersed": false  
    }
}

uni.setStorageSyncと Vuex ストアの保存の違い#

uni.setStorageSyncは、uni-app が提供するローカルストレージ API であり、クライアント側でデータを保存するために使用されます。これは、Web Storage API のlocalStorageやsessionStorageに似ています。Vuex はVue.jsの公式状態管理パターンであり、アプリケーションのすべてのコンポーネントの状態を集中管理するために使用されます。ローカルストレージはクライアント側でデータを保存する方法の 1 つであり、状態管理はアプリケーションの状態を集中管理するためのパターンです。

• 保存位置： uni.setStorageSyncはデータをクライアントのローカルストレージに保存します。Vuex ストアはデータをメモリに保存します。
• 永続性： uni.setStorageSyncのデータは永続的です。Vuex ストアのデータはページをリフレッシュすると失われます。
• 反応性： Vuex ストアのデータは反応的です。uni.setStorageSyncのデータは反応的ではありません。
• 状態管理： Vuex ストアは複雑な状態管理機能を提供します。uni.setStorageSyncは主に単純なデータ保存に使用されます。
• セキュリティ： uni.setStorageSyncのデータは攻撃を受けやすいです。Vuex ストアのデータはメモリ内にあり、クライアントのローカルストレージではないため、より保護されています。

uni.setStorage (OBJECT) @setstorage | uni-app 公式サイト (dcloud.net.cn)

uni-app のグローバルデータ管理の使用#

クライアントストレージ - Web 開発を学ぶ | MDN (mozilla.org)

main.jsまたはApp.vueで初期化します：

グローバル変数またはストアの使用#

store フォルダ内の JS ファイルで、保存されたグローバル変数を確認できます。

キャッシュ#

Uniapp の setStorage、setStorageSync、getStorage、getStorageSync を理解する（デモ付き）_uni.getstorage-CSDN ブログ

他のページで使用するためにデータをキャッシュします。

• uni.setStorage({key, data, success, fail, complete})：データを非同期でローカルキャッシュに保存します。成功、失敗、完了時のコールバック関数を提供できます。
• uni.getStorage({key, success, fail, complete})：ローカルキャッシュからデータを非同期で取得します。成功、失敗、完了時のコールバック関数を提供できます。
• uni.setStorageSync(key, data)：データを同期的にローカルキャッシュに保存します。即時実行され、コールバック関数はありません。
• uni.getStorageSync(key)：ローカルキャッシュからデータを同期的に取得します。即時実行され、コールバック関数はありません。

// 非同期メソッド
uni.setStorage({
  key: 'key',
  data: 'value',
  success: function () {
    console.log('データ保存成功');
  },
  fail: function (error) {
    console.log('データ保存失敗：', error);
  }
});

// データを取得
uni.getStorage({
  key: 'key',
  success: function (res) {
    console.log('データ取得成功：', res.data);
  },
  fail: function (error) {
    console.log('データ取得失敗：', error);
  }
});

// 同期メソッド
uni.setStorageSync('projectId', this.projectId);  // データをキャッシュ
let x = uni.getStorageSync('projectId');  // データを取得

ドロップダウン単選択ボックスコンポーネントの使用#

uniapp コミュニティのselect-lay - DCloud プラグイン市場プラグインを使用します。このプラグインは、カスタムデータインデックスオブジェクトを実現し、複雑なデータ構造の単選択表示に優れた効果を持っています。

<select-lay :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>

カスタムデータ構造の書き方は次の通りです：

<select-lay :zindex="998" :value="choicedID" name='Name' placeholder="トポロジ名を選択してください"
    slabel="t_name" svalue="t_id"
    :options="project" @selectitem="choicet_Name"></select-lay>

value は選択ボックスが最終的に渡す変数の値と同じでなければなりません。そうでないと、選択後に UI に選択結果が表示されません。

コンポーネント階層設定#

UI 内で異なるコンポーネントが表示される過程で、パラメータを設定して異なるレイヤーを作成することで、一部のコンポーネントを他のコンポーネントの上に表示できます。

uniapp の一部のコンポーネントは、z-indexパラメータを使用してコンポーネントの階層を設定できます。z-index 属性は、要素がレンダリングされるときの z 軸の順序を設定します。同じスタッキングコンテキスト内で z-index が大きい要素は、z-index が小さい要素の上に重なります。簡単に言えば、このパラメータの設定値が大きいほど、より上層に表示されます。

アプリ端の z-index のデフォルト値は 0、web 端のデフォルト値は auto です。

z-index | uni-app-x (dcloud.net.cn)

props パラメータの使用#

propsは配列またはオブジェクトであり、親コンポーネントからのデータを受け取るために使用されます。propsは単純な配列であるか、オブジェクトを代わりに使用することができ、オブジェクトは型検査、カスタム検証、デフォルト値の設定などの高度なオプションを構成できます。

フォームチェックと検証#

.some メソッド

.some()メソッドは、JavaScript の配列のメソッドであり、配列内の要素が提供されたテスト関数を満たすかどうかをテストします。配列内の少なくとも 1 つの要素がテスト関数をtrueで返す場合、.some()メソッドはtrueを返します。そうでない場合はfalseを返します。

// 10より大きい数字があるかどうか
const numbers = [1, 5, 10, 15, 20];
const hasNumberGreaterThanTen = numbers.some(number => number > 10);
console.log(hasNumberGreaterThanTen); // 出力: true

対応する 2 つの変数間が同じかどうかをチェックします。

// どの属性が変更されたかをチェック
const changedProperties = ['email', 'nickname', 'phone'].some(prop => {
    return this.accountForm[prop] !== this.profile[prop];
});

ポップアップの実装#

Popup ポップアップ層 | uView 2.0 - nvue に完全対応した uni-app エコシステムフレームワーク - uni-app UI フレームワーク (uviewui.com)

uview の u-popup コンポーネントを使用して実現します。

<u-popup :show="popShow" mode="center">
        <view >
            <text>キャンセルを確認しますか？</text>
            <u-button  type="primary" style="margin-top: 5rpx;" text="戻る" @click="popShow = false"></u-button>
            <u-button type="error" style="margin-top: 5rpx;" text="確認" @click="cancelAppoint(cancelId)"></u-button>
        </view>
</u-popup>

ポップアップメッセージ後の遅延ジャンプ#

uni.showToast({
    title: '予約成功！',
    duration: 1000
});
setTimeout(function() {
    uni.reLaunch({
        url: '/pages/tabBar/home/index'
    });
}, 1000);

post で query 形式のデータを送信#

問題#

post で query データを持ってリクエストを送信します。

背景#

uview を使用してリクエストを送信する場合、デフォルトでリクエストを事前に設定できます。以下は uview 公式サイトが提供する設定です。定義してエクスポートすることで、すべてのリクエストのグローバル設定を実現できます。headers に datatype を設定しない場合、uview はデフォルトで post を body のリクエストとして送信します。post リクエストでデータを送信する場合は、headers の Content-Type の値を変更する必要があります。

const install = (Vue, vm) => {
    baseURL: '',
    header: {},
    method: 'GET',
    dataType: 'json',
    // #ifndef MP-ALIPAY
    responseType: 'text',
    // #endif
    // 注：もし局所的なcustomとグローバルなcustomに同名の属性がある場合、後の属性が前の属性を上書きします。Object.assign(グローバル、局所)に相当します。
    custom: {}, // グローバルカスタムパラメータのデフォルト値
    // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
    timeout: 60000,
    // #endif
    // #ifdef APP-PLUS
    sslVerify: true,
    // #endif
    // #ifdef H5
    // クロスドメインリクエスト時にクレデンシャル（cookies）を持ち運ぶかどうか、H5のみサポート（HBuilderX 2.6.15+）
    withCredentials: false,
    // #endif
    // #ifdef APP-PLUS
    firstIpv4: false, // DNS解析時にipv4を優先して使用、App-Androidのみサポート (HBuilderX 2.8.0+)
    // #endif
    // 局所的な優先度はグローバルより高く、現在のリクエストのtask,optionsを返します。optionsをここで変更しないでください。必須ではありません。
    // getTask: (task, options) => {
    // リクエストのタイムアウト時間を500msに設定したことになります。
    //   setTimeout(() => {
    //     task.abort()
    //   }, 500)
    // },
    // グローバルカスタムバリデーター。パラメータはstatusCodeで必ず存在し、空の状況を判断する必要はありません。
    validateStatus: (statusCode) => { // statusCodeは必ず存在します。ここでの例はグローバルデフォルト設定です。
        return statusCode >= 200 && statusCode < 300
    }
}

解決方法#

post で query リクエストを送信する際、headers の Content-Type の値をapplication/x-www-form-urlencodedに設定し、body リクエストを送信する際はapplication/jsonに設定します。上記はグローバル設定ですが、プロジェクト内で post で query 形式のデータを送信することは少ないため、query リクエストを送信する際に headers の Content-Type の値を個別に設定できます。

// query形式のhttpパラメータ
export function http_a_post_query(path,params){	
	let formBody = Object.keys(params).map(key => key + '=' + params[key]).join('&');
	console.log('http_a_post=', projectConfig.baseUrl_a + path);
	return http.post(projectConfig.baseUrl + path, params,{header:{'content-type': 'application/x-www-form-urlencoded'}});
}

画像アップロード#

• uni.chooseImage を使用してファイルから画像を選択し、uni.uploadFile を使用して画像をアップロードします。画像の選択が終了した後。

  ファイルパスを取得し、content-type=multipart/form-dataの形式で post プロトコルを使用してサーバーにアップロードします。同時に、サーバーから返された画像アドレスを受け取ります。

		uploadPic() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				success: res => {
					console.log(projectConfig.baseUrl + '/v1/dms/upload/picture/local');
					uni.uploadFile({
						url: projectConfig.baseUrl + '/v1/dms/upload/picture/local',
						filePath: res.tempFilePaths[0],
						name: 'files',
						header: {
							'Authorization': 'Bearer ' + uni.getStorageSync('token'),
						},
						complete: (res) => {
							console.log('res:', JSON.parse(res.data)[0]);
							this.form.device_image = JSON.parse(res.data)[0];
							this.$u.toast('画像のアップロードが完了しました！');
							this.upPicMsg = '再アップロード'
						}
					})
				}
			})
		},

統計図の実装#

ガイド - uCharts クロスプラットフォームチャートライブラリ

** 考え方：** バックエンドから返されたデータをコンポーネントが受け入れるデータ形式にフォーマットし、チャートコンポーネントを通じて実現します。

HTML 部分#

<qiun-data-charts :ontouch="true" type="line" :opts="line_opts2" :localdata="trendData" />

• :ontouch="true"は、コンポーネントがタッチイベントに応答すべきかどうかを示します。
• type="line"は、チャートのタイプを折れ線グラフとして指定します。
• :opts="line_opts2"は、チャートの設定を含むオブジェクトであり、ローカルの js 内で設定します。例えば、軸のラベル、グリッド線など。
• :localdata="trendData"は、表示するデータセットを含むオブジェクトです。

データ形式#

最初の形式

    let res = {
        categories: ["2016","2017","2018","2019","2020","2021"],   // 横軸のラベル
        series: [
          {
            name: "目標値",
            data: [35,36,31,33,13,34]    // 最初のデータ
          },
          {
            name: "完了量",
            data: [18,27,21,24,6,28]     // 2番目のデータ
          }
        ]
      };

2 番目の形式

localdata:[
  {value:35, text:"2016", group:"目標値"},
  {value:18, text:"2016", group:"完了量"},
  {value:36, text:"2017", group:"目標値"},
  {value:27, text:"2017", group:"完了量"},
  {value:31, text:"2018", group:"目標値"},
  {value:21, text:"2018", group:"完了量"},
  {value:33, text:"2019", group:"目標値"},
  {value:24, text:"2019", group:"完了量"},
  {value:13, text:"2020", group:"目標値"},   // groupクラスに基づいて2つまたは複数のデータを決定します
  {value:6, text:"2020", group:"完了量"},
  {value:34, text:"2021", group:"目標値"},
  {value:28, text:"2021", group:"完了量"}
]

表の実装#

問題#

uniapp が提供する表は、セルの結合などの操作を完了できず、直接rowspanやcolspanを使用すると、異なる端末で互換性の問題が発生します。

uniapp uni-table 表コンポーネント セルの結合_uni-table のセルの結合 - CSDN ブログ

方法#

HTML のtable、tr、tdタグを直接使用して実現します。注意すべきは、v-for は以下のタグ内で使用できないことです：

thead
tbody
tfoot
th
td

実際の使用では、バックエンドから返された異なる長さのデータを表示するためにループを使用したい場合、外側にもう 1 つのレベルをネストする必要があります。

<template v-for="(type, typeIndex) in deviceParam">
    <tr :key="typeIndex">
        <!-- タイプタイトル行、rowspan属性を使用してセルを結合 -->
        <th :rowspan="type.deviceParamInfoVos.length + 1">
            {{ type.device_param_type_name }}
        </th>
        <!-- v-forを使用して各パラメータをループ -->
    <tr v-for="param in type.deviceParamInfoVos" :key="param.device_param">
        <td>{{ param.device_param_name }}</td>
        <td>{{ param.device_param_value + param.device_param_unit }}</td>
    </tr>
    </tr>
</template>