uniapp의 여러 페이지에 매개변수 전달

모바일 인터넷의 대중화와 함께 모바일 애플리케이션 개발에 대한 관심이 더욱 높아지고 있습니다. 가장 인기 있는 크로스 플랫폼 개발 프레임워크 중 하나인 Uniapp은 모바일 애플리케이션 개발에 널리 사용됩니다. Uniapp 개발 과정에서 서로 다른 페이지 간에 매개변수를 전송하는 방법은 매우 일반적인 문제입니다. 이 기사에서는 Uniapp의 서로 다른 페이지 간에 매개변수를 전송하는 방법을 여러 측면에서 소개합니다.

1. 쿼리 매개변수 전달

유니앱에서는 페이지의 쿼리 매개변수를 통해 매개변수를 전달할 수 있습니다. 예를 들어 홈페이지의 버튼을 클릭하면 세부정보 페이지로 이동할 수 있으며, 제품 ID를 세부정보 페이지에 전달할 수 있습니다. 코드는 다음과 같이 구현됩니다.

// 홈페이지의 점프 코드
uni.navigateTo ({
url: '/pages/detail/detail?id=' + this.goodsId
});

// 세부정보 페이지에서 코드 가져오기
onLoad(options) {
this.goodsId = options.id;
}

홈페이지에서는 uni.navigateTo 메소드를 통해 세부정보 페이지로 이동하고, 쿼리 매개변수를 통해 제품 ID를 세부정보 페이지로 전달합니다. 세부정보 페이지에서는 onLoad 메서드의 options 매개변수를 통해 전달된 제품 ID를 가져와 세부정보 페이지에 해당하는 상품 ID 변수에 할당합니다.

2. Vuex 매개변수 전송

Uniapp에서는 Vuex를 사용하여 여러 페이지 간에 매개변수를 전송할 수 있습니다. Vuex는 Vue.js 프레임워크용으로 특별히 설계된 상태 관리 라이브러리로, 다양한 구성 요소 간의 상태 공유를 실현할 수 있습니다. Uniapp에서는 Vuex에서 전역 변수를 정의하고 매개변수를 전달해야 하는 페이지에 Vuex를 도입함으로써 페이지 간 매개변수 전송을 실현할 수 있습니다.

예를 들어 Vuex 상태에서 전역 변수인 GoodsId를 정의하고, 홈페이지에서 변수 값을 변경하고, 세부정보 페이지에서 변수 값을 가져올 수 있습니다. 코드는 다음과 같이 구현됩니다.

// Vuex 상태 전역 변수 goodId
state: {
goodId: ''
}

// 홈 페이지에서 이 변수의 값을 변경합니다.
methods: {
jumpToDetail() {

this.$store.state.goodsId = '123456';
uni.navigateTo({
  url: '/pages/detail/detail'
});

}
}

// 세부정보 페이지에서 가져오기 이 변수의 값
계산됨: {
GoodsId() {

return this.$store.state.goodsId;

}
}

홈 페이지에서는 this.$store를 통해 전역 변수 goodId에 값을 할당합니다. state.goodsId를 선택하고 uni.navigateTo 메소드 세부정보 페이지를 통해 해당 항목으로 이동합니다. 세부정보 페이지에서는 전달된 값을 얻기 위해 계산된 속성을 통해 Vuex의 GoodsId 변수를 얻습니다.

3. 이벤트 버스 매개변수 전송

Uniapp에서는 이벤트 버스를 사용하여 여러 페이지 간에 매개변수를 전송할 수도 있습니다. 이벤트 버스는 다양한 구성 요소가 이벤트를 수신하고 이벤트를 트리거하여 매개 변수를 전달하고 전달하도록 허용하는 디자인 패턴입니다. Uniapp에서는 uni.$emit 및 uni.$on 메소드를 사용하여 이벤트를 모니터링하고 트리거할 수 있습니다.

예를 들어 홈페이지에서 uni.$emit 메소드를 통해 이벤트를 트리거하고, 세부정보 페이지에서 uni.$on 메소드를 통해 이벤트를 수신함으로써 매개변수 전송을 구현하는 코드는 다음과 같습니다. 다음:

// 홈페이지에서 사용 uni.$emit은 이벤트를 트리거합니다
메서드: {
jumpToDetail() {

uni.$emit('goodsId', '123456');
uni.navigateTo({
  url: '/pages/detail/detail'
});

}
}

// uni.$on을 사용하여 세부정보 페이지에서 이벤트를 수신합니다
onLoad () {
uni.$on('goodsId' , (goodsId) => {

this.goodsId = goodsId;

});
}

홈페이지에서는 uni.$emit 메소드를 통해 'goodsId'라는 이벤트를 트리거하고 제품 ID '123456'을 매개변수로 전달합니다. 세부정보 페이지에서는 onLoad 메서드의 uni.$on 메서드를 통해 'goodsId'라는 이벤트를 수신하고, 전달된 제품 ID를 세부정보 페이지의 해당 변수인 GoodsId에 할당합니다.

요약하자면 Uniapp의 여러 페이지 간 매개변수 전송은 쿼리 매개변수 전송, Vuex 매개변수 전송 및 이벤트 버스 매개변수 전송을 통해 이루어질 수 있습니다. 개발자는 애플리케이션의 기능적 요구 사항을 더 잘 실현하기 위해 실제 요구 사항에 따라 매개 변수를 전달하는 적절한 방법을 선택할 수 있습니다.

위 내용은 uniapp의 여러 페이지에 매개변수 전달의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!