uniapp에서 페이지를 닫는 방법

Uniapp은 개발자가 iOS, Android, H5 및 기타 플랫폼용 애플리케이션을 동시에 작성할 수 있도록 하는 크로스 플랫폼 개발 프레임워크로, 개발 효율성을 크게 향상시키고 개발 비용을 절감합니다. 유니앱 개발 과정에서 특정 페이지를 닫는 기능을 구현해야 하는 경우가 종종 있습니다. 이번 글에서는 유니앱에서 특정 페이지를 닫는 방법을 소개하겠습니다.

1. 페이지 스택 관리를 통해 페이지를 닫습니다

유니앱에서는 페이지 스택 관리를 통해 페이지 점프를 구현합니다. 페이지 스택은 페이지 간의 점프 관계를 저장하는 데 사용되는 데이터 구조입니다. 새 페이지로 이동할 때마다 페이지에서 돌아오거나 페이지를 닫을 때 해당 페이지가 페이지 스택의 맨 위에 추가됩니다. 페이지 스택에서 팝됩니다. 따라서 특정 페이지를 닫는 기능은 페이지 스택을 연산함으로써 구현될 수 있다.

Uniapp은 페이지 스택을 관리하기 위한 여러 API를 제공하며, 그 중 가장 일반적으로 사용되는 API는 uni.navigateBack 및 uni.reLaunch입니다. uni.navigateBack은 현재 페이지를 닫고 이전 페이지로 돌아가는 데 사용되고, uni.reLaunch는 모든 페이지를 닫고 애플리케이션의 특정 페이지로 이동하는 데 사용됩니다. 그러나 이 두 API는 지정된 페이지를 직접 닫는 것을 지원하지 않습니다. 따라서 지정된 페이지를 닫는 기능을 구현하려면 페이지 스택 정보를 얻기 위한 API uni.getCurrentPages를 결합해야 합니다.

uni.getCurrentPages는 현재 페이지 스택의 정보를 얻고 모든 페이지 개체가 포함된 배열을 반환하는 데 사용됩니다. 배열의 마지막 요소는 현재 페이지 개체입니다. 이 배열의 페이지 개체를 반복하여 닫아야 하는 페이지 개체의 인덱스를 찾고 uni.navigateBack 또는 uni.reLauch를 사용하여 페이지를 닫습니다.

다음은 샘플 코드입니다.

function closePage(pageName) {
  const pages = getCurrentPages();
  const len = pages.length;
  for (let i = 0; i < len; i++) {
    const page = pages[i];
    if (page.route === pageName) {
      const delta = len - i - 1;
      uni.navigateBack({
        delta: delta,
      });
      break;
    }
  }
}

이 샘플 코드는 닫아야 하는 페이지 이름인 pageName을 매개변수로 받는 closePage 함수를 정의합니다. 먼저 uni.getCurrentPages를 통해 현재 페이지 스택 정보를 얻은 다음 페이지 개체 배열을 탐색하고 경로 속성이 pageName과 동일한 페이지 개체를 찾고 반환해야 하는 페이지 수준 수를 계산한 다음 마지막으로 uni.navigateBack을 사용하여 대상 페이지를 닫습니다.

2. 이벤트 버스를 통해 페이지를 닫습니다

이벤트 버스는 컴포넌트 간의 통신을 위해 프런트 엔드 개발에서 널리 사용되는 패턴입니다. Uniapp에서는 이벤트 버스를 사용하여 지정된 페이지를 닫는 기능을 포함하여 페이지 간 통신을 구현할 수도 있습니다.

이벤트 버스를 구현하려면 vue.js의 반응 메커니즘을 사용해야 합니다. 전역 vue 인스턴스를 이벤트 버스로 생성하면 다른 구성 요소 또는 페이지가 $emit 및 $on 메서드를 통해 각각 이벤트를 트리거하고 수신할 수 있습니다. 인스턴스의. 이벤트를 트리거할 때 매개변수가 전달될 수 있으며, 수신 이벤트는 이벤트가 전달하는 매개변수를 수신하고 그에 따라 처리할 수 있습니다.

다음은 샘플 코드입니다.

// event-bus.js
import Vue from 'vue';
export default new Vue();

// Page1.vue
import eventBus from '@/event-bus';
export default {
  methods: {
    onClosePage() {
      eventBus.$emit('closePage', 'Page2');
    },
  },
}

// Page2.vue
import eventBus from '@/event-bus';
export default {
  created() {
    eventBus.$on('closePage', (pageName) => {
      if (this.$options.name === pageName) {
        uni.navigateBack();
      }
    });
  },
}

이 샘플 코드에서는 먼저 이벤트 버스 역할을 하기 위해 eventBus 인스턴스가 생성됩니다. 그런 다음 Page1 페이지에서 Page2 페이지를 닫아야 할 때 eventBus.$emit를 사용하여 이벤트를 트리거합니다. 이벤트 이름은 'closePage'이고 닫아야 하는 페이지 이름이 전달됩니다. Page2 페이지에서 'closePage' 이벤트를 수신하고 this.$options.name을 통해 현재 페이지 구성 요소의 이름을 가져옵니다. 이름이 이벤트에서 전달된 페이지 이름 pageName과 동일하면 uni.navigateBack을 사용하여 닫습니다. 현재 페이지.

즉, 유니앱은 지정된 페이지 기능을 닫는 다양한 방법을 제공하며, 특정 비즈니스 시나리오에 따라 적절한 방법을 선택할 수 있습니다. 개인적으로 페이지를 닫는 것은 페이지 스택 관리와 uni.getCurrentPages API와의 결합을 통해 비교적 간단하고 직관적인 방법이라고 생각합니다. 이벤트 버스를 통해 페이지 간의 보다 유연한 통신이 가능하지만 이벤트 오염 및 불필요한 성능 문제를 피하기 위해 적당히 사용해야 합니다.

위 내용은 uniapp에서 페이지를 닫는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!