Uniapp が他のページを呼び出す方法について話しましょう

モバイル アプリケーションの急速な開発に伴い、クロスプラットフォーム アプリケーションの開発に H5 を使用することが増えています。フロントエンドのクロスプラットフォーム開発用の人気フレームワークとして、Uniapp はその強力な機能と使いやすい機能により、ますます多くの開発者に支持されています。 Uniapp 開発では、いくつかの機能を実装するために他のページのメソッドを呼び出す必要があることがよくあります。この記事では、Uniapp が他のページを呼び出す方法を紹介します。

1. vuex を介した呼び出し

vuex は Uniapp でデータを管理するためのツールで、データをグローバルな状態で保存し、任意のコンポーネントで呼び出すことができます。 vuex を通じて他のページでメソッド呼び出しを行うことができます。以下は簡単な例です:

// store.js
const store = new Vuex.Store({
  state: {
    someData: 'Hello World'
  },
  mutations: {
    changeData(state, newData) {
      state.someData = newData
    }
  }
})

このメソッドを呼び出す必要があるコンポーネントでは、this.$store.commit() メソッドを使用して呼び出します:

// otherComponent.vue
export default {
  methods: {
    changeData(newData) {
      this.$store.commit('changeData', newData)
    }
  }
}

2. uni.$emit を介した呼び出し

実際、Vue にはイベント配信という優れたコンポーネント通信メソッドもあり、Uniapp もこのメソッドをサポートしています。 uni.$emit() メソッドを使用して 1 つのコンポーネントでカスタム イベントをトリガーし、$on() を使用してイベントをリッスンし、別のコンポーネントで対応する操作を実行できます。

ソース コンポーネント内:

// sourceComponent.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

ターゲット コンポーネント内:

// targetComponent.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

このようにして、1 つのコンポーネント内で別のコンポーネントのメソッドを呼び出して、クロスコンポーネントを実現できます。機能的な相互作用。

3. uni.navigateTo

を介した呼び出し 実際の開発プロセスでは、あるページから別のページにジャンプして、別のページで特定の操作を実行する必要がよくあります。 uni.navigateTo メソッドを使用してページにジャンプし、ターゲット ページで対応する操作を実行できます。

ソース ページ内:

// sourcePage.vue
export default {
  methods: {
    navigateToTarget() {
      uni.navigateTo({
        url: '/pages/targetPage/targetPage',
        success() {
          console.log('跳转成功')
        }
      })
    }
  }
}

ターゲット ページでは、onLoad() 関数を使用して、ページのロード時に対応する操作を実行できます:

// targetPage.vue
export default {
  onLoad(options) {
    console.log(options)
  }
}

4 . uni- アプリのイベント バスは、

Uni アプリを通じて、さまざまなページ間の通信を実現するために使用できるイベント バス機能を提供します。使用方法は非常に簡単で、任意のページに uni をインポートし、パブリッシュ/サブスクライブ機能を使用することができます。

ソース ページでは、$emit を使用してカスタム イベントをトリガーします:

// sourcePage.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

ターゲット ページでは、$on を使用してイベントをリッスンし、対応する操作を実行できます:

// targetPage.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

概要

Uniapp を開発するとき、いくつかの機能を実装するために他のページのメソッドを呼び出す必要があることがよくあります。 Vuex、イベント配信、ページ ジャンプ、Uni-app イベント バスを通じて、クロスページ呼び出しメソッドを実装して、開発を促進し、アプリケーションのスケーラビリティを向上させることができます。

以上がUniapp が他のページを呼び出す方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。