WeChat 미니 프로그램에서 자식에서 부모로 매개변수 전달을 구현하는 방법(페이지 통신)

이 글은 WeChat 애플릿의 하위 페이지가 상위 페이지에 매개변수를 전달하는 방법을 이해하는 데 도움이 될 것입니다.

WeChat 미니 프로그램 하위 페이지는 어떻게 매개변수를 상위 페이지에 전달하나요?

때때로 WeChat 미니 프로그램 프로젝트 작업을 할 때 다음과 같은 상황에 직면하게 됩니다. 목록 페이지가 있고 페이지에 필터 조건을 클릭합니다. 그런 다음 해당 페이지로 이동하여 조건을 선택합니다. 선택 후 목록 페이지로 돌아가서 필터링된 조건에 따라 데이터를 쿼리합니다. 일반적으로 우리가 보는 것은 필터링 조건이 팝업 상자를 통해 처리되는 것입니다. 따라서 페이지로 이동하는 대화형 방법을 원하는 경우 하위 페이지에서 상위 페이지로 매개변수를 어떻게 전달합니까?

【관련 학습 추천: 미니 프로그램 개발 튜토리얼】

Problem

• wx.navigateBack은 매개변수를 전달할 수 없으며, 하위 페이지는 매개변수를 상위 페이지로 전달할 수 없습니다.

하위 페이지는 상위 페이지의 데이터를 운영합니다

여기서 주목하세요. 우리는 상위 페이지의 데이터를 운영하는 하위 페이지에 대해 이야기하고 있습니다.

공식 문서에는 getCurrentPages용 API가 있습니다(공식 웹사이트 설명은 다음과 같습니다). getCurrentPages的API(官网描述如下):

PageObject[] getCurrentPages()获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。

• 不要尝试修改页面栈，会导致路由以及页面状态错误。
• 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

通过getCurrentPages这个API，我们可以获取到页面栈的数据，所以就可以获取到指定的页面，在子页面通过修改父页面数据的方式，我们就可以实现子页面向父页面传参的功能。

const pages = getCurrentPages();
const gotoPage = pages[pages.length - 1];

所以pages[pages.length - 1]就为当前页面，父页面就为pages[pages.length - 2]，依次类推，我们可以获取到其他的祖先页面。

然后再使用 setData 方法 gotoPage.setData({xxx: ''})来修改设置父页面的数据，从而达到子页面向父页面传递参数的目的。之后再通过 wx.navigateBack

PageObject[] getCurrentPages()는 현재 페이지 스택을 가져옵니다. 배열의 첫 번째 요소는 홈페이지이고 마지막 요소는 현재 페이지입니다.

페이지 스택을 수정하려고 하지 마세요. 라우팅 및 페이지 상태 오류가 발생할 수 있습니다.

페이지가 아직 생성되지 않은 경우 App.onLaunch 중에 getCurrentPages()를 호출하지 마세요.
• getCurrentPages API를 통해 페이지 스택의 데이터를 얻을 수 있어 지정된 페이지를 얻을 수 있고, 서브 페이지에서 상위 페이지 데이터를 수정하여 서브 페이지를 구현할 수 있는 함수 매개변수를 상위 페이지에 전달하는 것입니다.
rrreee

그래서 pages[pages.length - 1]는 현재 페이지이고 상위 페이지는 pages[pages.length - 2]입니다. 다른 상위 페이지로 이동할 수 있습니다.

그런 다음 setData 메소드 gotoPage.setData({xxx: ''})를 사용하여 상위 페이지의 데이터를 수정하고 설정하면 하위 페이지가 통과할 수 있습니다. 상위 페이지에 대한 매개변수 목적. 그런 다음 wx.navigateBack을 사용하여 페이지로 돌아갑니다.

기타 솔루션🎜🎜🎜🎜🎜Component 🎜🎜팝업 상자🎜🎜🎜글 시작 부분에서 언급했듯이 하위 페이지에서 상위 페이지로 매개변수를 전달해야 하는 경우 다음을 표시할 수 있습니다. 해당 데이터를 선택한 후 현재 팝업 상자나 구성 요소를 숨깁니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 WeChat 미니 프로그램에서 자식에서 부모로 매개변수 전달을 구현하는 방법(페이지 통신)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!