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 でクエリ形式のデータを送信#

問題#

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

背景#

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

// クエリ形式の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>