uniappグローバルメソッドの使い方

uniapp は Vue.js フレームワークをベースに開発されたクロスプラットフォーム開発フレームワークで、一連のコードを記述することで iOS、Android、H5 などの複数のプラットフォームで同時に実行できます。

uniapp では、グローバル メソッドを使用してパブリック メソッドを簡単に呼び出すことができます。この記事では、uniapp グローバル メソッドの定義と使用法を紹介します。

1. グローバル メソッドの定義

uniapp でグローバル メソッドを定義するには、構文 Vue.prototype.$xxxx = function() を使用する必要があります (xxxx はメソッド名です)。

サンプル コードは次のとおりです。

Vue.prototype.$formatDate = function(date) {
    const y = date.getFullYear()
    const m = date.getMonth() + 1
    const d = date.getDate()
    return y + '-' + (m > 9 ? m : '0' + m) + '-' + (d > 9 ? d : '0' + d)
}

上記のコードは、日付を YYYY-MM-DD の形式にフォーマットするために使用される $formatDate メソッドを定義します。

2. グローバル メソッドを使用する

uniapp では、どこでもグローバル メソッドを使用できます。メソッドが呼び出される場所で this.$xxxx() を使用するだけです。xxxx はグローバル メソッドを定義するときに使用されるメソッド名です。

サンプル コードは次のとおりです。

export default {
    data() {
        return {
            currentDate: new Date(),
        }
    },
    methods: {
        handleClick() {
            const formatted = this.$formatDate(this.currentDate)
            uni.showToast({
                title: formatted,
            })
        },
    },
}

上記のコードの handleClick はボタンのクリック イベントです。このイベントでは、$formatDate メソッドを呼び出して日付を YYYY-MM-DD の形式にフォーマットし、uni.showToast メソッドを使用してフォーマットされた日付をトーストに表示します。

3. 概要

uniapp でグローバル メソッドを定義して使用すると、コードの再利用性が大幅に向上し、コードの量と開発時間を削減できるため、非常に便利です。 uniapp を開発する場合、実際のニーズに基づいて uniapp のグローバル メソッドを柔軟に使用できます。

以上がuniappグローバルメソッドの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。