UniApp カスタム メソッドの実装について話しましょう

UniApp は、フロントエンド フレームワークとして Vue.js を使用するクロスプラットフォーム アプリケーション開発フレームワークで、一連のコードに基づいて iOS、Android、H5、およびその他のアプリケーションを迅速に生成できます。ただし、特別なニーズがある場合は、ビジネス ロジックに合わせていくつかのメソッドをカスタマイズする必要がある場合があります。この記事では、UniApp カスタム メソッドの実装について紹介します。

1. グローバル メソッドとローカル メソッド

UniApp では、グローバルまたはローカルの方法で独自のメソッドを定義できます。グローバル メソッドはどのページでも使用できますが、ローカル メソッドは現在のページまたはコンポーネントでのみ使用できます。

1.1 グローバル メソッド

main.js ファイルで、グローバルに呼び出せるように Vue プロトタイプ メソッドを定義できます。たとえば、$toast という名前のメソッドを定義して、プロンプト情報を表示できます。

// main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

Vue.prototype.$toast = function(message) {
  uni.showToast({
    title: message,
    icon: 'none'
  })
}

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

上記のコードでは、Vue の prototype オブジェクトを使用して、$toast という名前のメソッドを定義します。このメソッドは、プロンプト情報を表示するために使用される文字列型パラメータ message を受け入れます。

ページでは、this.$toast(message) を通じていつでもこのメソッドを呼び出すことができます。例:

<template>
  <view>
    <button @click="showToast">显示提示信息</button>
  </view>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$toast('这是一条提示信息')
    }
  }
}
</script>

1.2 ローカル メソッド

ローカル メソッドは、単一のページまたはコンポーネントで定義されているメソッドであり、現在のページまたはコンポーネントでのみ使用できます。たとえば、my-component という名前のコンポーネントで、submitForm という名前のメソッドを定義します。

<template>
  <view>
    <button @click="submitForm">提交表单</button>
  </view>
</template>

<script>
export default {
  methods: {
    submitForm() {
      // 提交表单逻辑
    }
  }
}
</script>

このコンポーネントでは、次のことができます。このメソッドは、たとえば次のように呼び出されます。 、送信ボタンをクリックしたとき。このメソッドには、他のページまたはコンポーネントからアクセスできません。

2. Mixinmixing

mixin はコードを再利用するために Vue.js が提供するメソッドで、共通のロジックを複数のコンポーネントに混ぜて再利用できます。 UniApp では、mixin を使用してカスタム メソッドを定義することもできます。

たとえば、myMixin という名前の混合オブジェクトを作成します。これには、ポップアップ プロンプトを表示する $alert というメソッドが含まれています:

// mixins/myMixin.js

export default {
  methods: {
    $alert(message) {
      uni.showModal({
        title: '提示',
        content: message,
        showCancel: false
      })
    }
  }
}

このミックスイン オブジェクトをコンポーネントで使用するには、それをコンポーネントの mixins 属性に追加するだけです。たとえば、my-component という名前のコンポーネントで myMixin 混合オブジェクトを使用する場合、$alert メソッドを直接呼び出してポップアップを表示できます。プロンプト:

<template>
  <view>
    <button @click="showAlert">显示弹窗提示</button>
  </view>
</template>

<script>
import myMixin from '@/mixins/myMixin'

export default {
  mixins: [myMixin],
  methods: {
    showAlert() {
      this.$alert('这是一条弹窗提示信息')
    }
  }
}
</script>

3. 概要

UniApp のカスタム メソッドは、グローバル メソッド、ローカル メソッド、mixin混合オブジェクトなど、さまざまな方法で実装できます。ビジネス ニーズを満たすために、さまざまなシナリオに応じてさまざまな実装方法を選択できます。実際の開発では、UniAppのカ​​スタムメソッドを業務状況に応じて柔軟に活用することができ、開発効率やコードの再利用性を向上させることができます。

以上がUniApp カスタム メソッドの実装について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。