집 >웹 프론트엔드 >JS 튜토리얼 >WeChat 애플릿을 구현하여 다중 레벨 페이지로 돌아가는 방법

WeChat 애플릿을 구현하여 다중 레벨 페이지로 돌아가는 방법

小云云원래의: 2018-05-15 10:07:251891검색

이 글은 주로 WeChat 애플릿에서 다단계 페이지를 반환하는 구현 방법에 대한 관련 정보를 소개합니다. 이 글이 모든 사람이 이 기능을 깨닫는 데 도움이 되기를 바랍니다. .

다단계 페이지로 돌아가기 위해 WeChat 애플릿을 구현하는 방법

WeChat 애플릿 개발에서 이전 페이지로 돌아가는 것은 매우 일반적인 작업입니다. 가장 일반적인 작업은 전화기에서 Return 키를 클릭하는 것입니다. 두 경우 모두 이전 페이지로 돌아가려면 사용자 정의 버튼을 클릭하세요. 휴대폰에서 반품 버튼을 클릭할 때 어떤 처리도 할 필요가 없습니다. 반품 효과를 얻기 위한 맞춤 버튼인 경우 WeChat에서 제공하는 API를 호출해야 합니다.

wx.navigateBack(OBJECT)

wx를 사용할 수도 있습니다. navigateBack 메소드를 사용하면 델타 값만 설정할 수 있습니다. 예:

//在C页面内 navigateBack，将返回A页面，delta = 1 时与 wx.navigateBack() 效果一致
wx.navigateBack({
 delta: 2
})

하지만 때로는 이전 두 개 이상의 페이지로 돌아가려면 전화기의 돌아가기 버튼을 클릭해야 합니다. 위의 방법을 직접 사용하여 처리할 수는 없습니다. 이를 달성하기 위해 다음 두 가지 방법을 사용했습니다.

방법 1: 페이지 C의 onUnload 메서드에서 wx.navigateBack()을 호출합니다. 이렇게 하면 페이지 A로 돌아갈 수 있습니다. 그러나 페이지 C인 경우 문제가 발생합니다. WeChat 채팅 세션을 공유한 다음 미니 프로그램을 닫고 채팅 세션에서 C 페이지를 엽니다. wx.navigateBack() 메서드도 호출되며 이 예외가 보고됩니다.

WAService.js:9 navigateBack with an unexist webviewId 0

방법 2: 또 다른 방법은 B의 onShow 메소드에서 wx.navigateBack()을 호출하여 페이지를 열어 반환을 구현함으로써 방법 1의 문제를 피하는 것입니다. 구현 아이디어는 다음과 같습니다.

① C 페이지의 onUnload 메서드에서 처음 n 페이지를 반환할 수 있는지 여부를 getCurrentPages() 메서드를 통해 얻을 수 있는지 확인합니다. 페이지 스택의 길이에 따라 결정되며, 모든 페이지의 데이터 설정 매개변수를 제공할 수 있습니다. 다음은 이전 두 페이지로 돌아가는 예입니다.

 //这里是页面C的 onUnload 方法
  onUnload: function() {
    var that = this

    //判断页面栈里面的页面数是否大于2
    if(getCurrentPages().length > 2) {
      //获取页面栈
      let pages = getCurrentPages()
      //给上一个页面设置状态
      let curPage = pages[pages.length - 2];
      let data = curPage.data;
      curPage.setData({&#39;isBack&#39;: true});
    }
  },

② 페이지 B의 onShow 메소드에서 다음을 수행할지 여부를 결정합니다. isBack 값을 기준으로 wx.navigateBack()을 호출합니다.

  //这里是页面B的 onShow 方法
  onShow: function() {
    var that = this
    //如果 isBack 为 true，就返回上一页
    if(that.data.isBack) {
      wx.navigateBack()
    }
  },

방법 1과 방법 2 모두 C 페이지에서 A 페이지로 직접 이동하는 대신 B 페이지를 먼저 거쳐야 하므로 B 페이지가 잠시 깜박입니다. .더 좋은 방법이 있으면 알려주세요.

WeChat 애플릿을 구현하여 다중 레벨 페이지로 돌아가는 방법

관련 기사