WeChat 애플릿이 하위 페이지에서 상위 페이지로 돌아올 때 데이터 전송 프로세스에 대한 자세한 설명

WeChat 애플릿에서는 한 페이지에서 다른 페이지로 이동할 때 일반적으로 탐색하거나 리디렉션할 때 URL을 통해 매개변수를 전달한 다음 대상 페이지의 onLoad 함수 매개변수에서 이러한 URL 매개변수를 얻을 수 있다는 것을 알고 있습니다. 예:

// 源页面A相关代码
wx.navigateTo({
  url: "/pages/mypage/mypage?a=1&b=2"
})

// 目标页面B相关代码
Page({
  onLoad: function (options) {
    var a = options.a; // 值：1
    var b = options.b; // 值：2
  }
})

그러나 이 방법은 대상 페이지가 아직 생성되지 않은 경우에만 유효합니다. 페이지의 onLoad 메서드는 페이지 수명 주기 동안 한 번만 실행되기 때문입니다.

다음 시나리오를 고려해 보겠습니다.

1. 在【页面A】中调用wx.navigateTo方法跳转到【页面B】
2. 然后从【页面B】返回【页面A】, 并将【页面B】中的一些数据传回【页面A】

보다 실제적인 예를 들어 아래 그림과 같이 양식 페이지 A에 데이터를 입력합니다.

페이지 A

이 페이지에는 검색 버튼이 있으며, 버튼을 클릭하면 다른 보안 코드 검색 페이지 B로 이동합니다.

B페이지

이 검색 목록에서 보안 코드를 선택하면 이전 양식 페이지로 돌아가서 완료되지 않은 양식 작성을 계속하겠습니다. 및 제출 작업.

이 시나리오는 매우 합리적이고 일반적입니다.

그런데 생각해 보자. B 페이지를 빠져나와 A 페이지로 돌아올 때 B 페이지에서 선택한 보안 코드를 어떻게 A 페이지로 되돌릴 수 있을까? NavigateTo()에서 매개변수를 전달하기 위해 URL을 사용하는 방법은 무엇입니까?

페이지 수명 주기를 기준으로 볼 때 우리의 대답은 다음과 같습니다. 아니요!

그럼 어떻게 할 수 있나요?

방법 1: 전역 데이터 저장소 사용

• App 개체(예: globalData 속성)에 전달할 데이터를 저장합니다.

• 전송할 데이터는 미니프로그램의 로컬 데이터 캐시(스토리지)에 저장됩니다.

예를 들어 페이지 B를 종료하려고 할 때 다음 호출을 수행합니다.

//=== 1. 存储到app对象上的方式 ========
var app = getApp()
app.globalData.mydata = {a:1, b:2};  //存储数据到app对象上
wx.navigateBack();  //返回上一个页面

//=== 2.存储到数据缓存的方式 =========
wx.setStorage({
  key: "mydata",
  data: {a:1, b:2},
  success: function () {
    wx.navigateBack();   //返回上一个页面
  }
})

이런 방식으로 이전 페이지로 돌아갈 때 다음을 수행할 수 있습니다. 필요한 데이터를 얻으려면 이러한 전역 저장 영역을 사용하세요.

그러나 이 방법에도 분명한 단점이 있습니다. 글로벌 데이터 저장소이기 때문에 해당 데이터를 저장할 때 글로벌 데이터를 주의 깊게 관리해야 합니다(파기 시). 그렇지 않으면 주의하지 않으면 부작용이 발생합니다.

방법 2: 페이지 라우팅 스택에서 대상 페이지 객체를 직접 획득 및 조작

이 방법은 미니 프로그램의 API인 getCurrentPages() 정보를 호출하여 현재 페이지 라우팅 스택을 획득합니다. 페이지 개체는 페이지의 라우팅 순서에 따라 이 라우팅 스택에 저장됩니다. 이전 페이지의 전체 페이지 개체를 쉽게 얻을 수 있으므로 페이지 개체의 속성과 메서드를 직접 호출할 수 있습니다.

아래와 같습니다:

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面

//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
  mydata: {a:1, b:2}
})

글로벌 데이터 저장 방식에 비해 이 방식은 논리가 훨씬 명확하고, 데이터 파기에 대한 추가 관리 작업이 없습니다.

요컨대, 현재 이러한 시나리오가 발생하면 방법 2를 사용하여 코드를 설계하는 것이 좋습니다. 또한 미니 프로그램 프레임워크가 이 데이터 반환 문제를 해결하는 더 좋고 더 우아한 방법을 소개할 수 있기를 바랍니다.

위 내용은 WeChat 애플릿이 하위 페이지에서 상위 페이지로 돌아올 때 데이터 전송 프로세스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!