애플릿은 어떻게 전역적으로 다시 불러옵니까

배경:

업무가 증가함에 따라 우리 서버는 대량의 사용자 데이터를 계산해야 하기 때문에 사용자와 고객지원 반응 페이지가 정상적으로 표시되지 않는다.개발에 피드백한 후에 우리가 보니 서버의 이상한 오류였다.So, 제품은 우리가 도대체 얼마나 많은 사용자 페이지를 정상적으로 보여줄 수 있는지 보고 싶습니까?

시나리오:

백엔드가 아리운 백엔드에서 어떤 인터페이스 이상을 직접 조사

프런트엔드에 서버 오류 페이지를 작성하여 이 페이지의 PV, UV

를 작은 프로그램 백엔드에서 볼 수 있도록 합니다.

기술 방안

업무가 방대하기 때문에 우리는 모든 페이지에 다시 불러오는 논리를 구분할 수 없다.그래서 전면적으로 다시 불러오는 것을 초보적으로 고려했다.

해결해야 할 문제는 어떤 것들이 있습니까?

우선 우리는 네트워크 요청이 실패한 전역 제어권을 가져야 한다(그렇지 않으면 페이지마다 처리가 실패한 경우)

네트워크가 실패한 후에 어떻게 다시 불러오는 페이지로 이동하는지 정의해야 한다(R) (wx.redirectTo, wx.reLaunch 또는 기타로)

오류 페이지의 "다시 불러오기"를 누르면 오류 페이지로 돌아가거나 이동하는 방법 (E) (wx.redirectTo, wx.reLaunch 또는 기타)

오류 페이지로 이동한 후 데이터를 다시 로드하는 방법 (Page.onShow () 에 모든 요청을 넣을까요?)

오류 페이지의 이전 인터페이스 (P) 에서 오류 페이지 (E) options로 전송되면 다시 불러오는 페이지 (R) 는 어떻게 처리합니까?

다시 불러오기와 되돌아오기를 누르면 효과가 같기를 바랍니다. 어떻게 조작해야 합니까?

실천 방식은 다음과 같다.

첫 번째 문제: 비교적 잘 해결됩니다. 우리는 wx를 바탕으로 합니다.request는fetch로 봉인되었습니다. (만약 wx.request 프로젝트를 사용하고 있다면 봉인을 고려할 수 있습니다. 좋은 점이 많습니다.)fetch를 기반으로 우리는 res.status 코드로 서버의 오류 여부를 판단할 수 있습니다.
두 번째 문제: 일단 구체적인 점프 방식이 어떤지는 말하지 않고 점프의 URL에 대한 정의도 우리가 토론해야 한다.왜 이렇게 말합니까? 왜냐하면 우리의 구조는 하도급과 관련이 있기 때문입니다.패키지 불러오는 것은 우리의 코드가 페이지 아래에 있을 뿐만 아니라 패키지 아래에 놓여 있다는 것을 의미한다.
이를 바탕으로 우리가 점프할 때 URL은'.../server Error/server Error'?메인 패키지 아래에서 정상적으로 점프할 수 있지만, 패키지 아래에서 경로는'package/serverError/serverError'입니다. 이렇게 점프하면 안 됩니다.URL은 루트 디렉터리 아래의 경로이어야 하기 때문에'/페이지/서버 오류/서버 오류'입니다.
경로를 확인한 후에 우리는 뛰어넘을 수 있다.wx라면redirectTo(현재 페이지를 닫고 응용 프로그램의 어떤 페이지로 이동), 상상 아래 E를 닫고 R로 이동합니다. 다시 불러오기를 누르면 R을 E로 이동합니다. 이렇게 이동 경로가 복잡하고 사용자 체험이 좋지 않으며options의 매개 변수는 단계별로 전달되어야 합니다.wx.reLaunch와 유사합니다.우리는 사용하기 때문에 우리는 wx를 선택한다.navigateTo.
세 번째 문제: 문제 2의 해석을 종합하여 E로 돌아가서 우리는 wx를 사용한다.navigateBack.
네 번째 질문: R에서 wx를 사용한다면.navigateBack이 E로 돌아가면 E.onShow() 메서드가 트리거됩니다.근데 어떤 요청은 페이지 말고onShow()에는 Page에 쓰인 것도 있습니다.onLoad()에 있는 것이므로 E.onLoad()를 조정할 방법을 강구해야 합니다.
여러분은 getCurrentPages () 이 방법이 낯설지 않을 것입니다. 공식 정의는 현재 페이지 창고를 가져오는 것입니다. 우리는 일반적으로 그것을 사용하여 현재 페이지 경로를 가져옵니다.사실 이 과정에서 우리는 현재 페이지의 실례를 얻을 수 있고 실례 안에 루트(페이지 경로)options(페이지 전달 매개 변수)data(페이지 초기 매개 변수)와 각종function() 등이 있다.
previous Page Class () 를 이용하면 E의 실례를 얻을 수 있고 E.options도 얻을 수 있습니다. 물론 E.onLoad () 를 조정할 수도 있습니다.

util.js

//  
function currentPagePath() {
  let pageData = getCurrentPages()
  if (pageData.length >= 1) {
    let len = pageData.length - 1
    let data = pageData[len]
    return data.route
  } else {
    return ''
  }
}

//  
function previousPageClass() {
  let pageData = getCurrentPages()
  if (pageData.length >= 2) {
    let len = pageData.length - 2
    let preClass = pageData[len]
    return preClass
  } else {
    return ''
  }
}

module.exports = {
  currentPagePath,
  previousPageClass
}

다섯 번째 문제: 문제의 네 가지 방안을 바탕으로 우리는 E.onLoad (E.options) 를 조정하여 우리의 매개 변수를 돌려보낼 수 있다.
여섯 번째 질문: 되돌아오기를 누르면 페이지 마운트 해제, 즉 R.onUnload () 를 실행하는 것과 같습니다. 이때 우리는 E.onLoad (E.options) 를 실행하고 options를 전달하며 E.onLoad () 를 호출하면 됩니다.
하지만 다시 불러오기를 누르면 우리는 wx를 조정합니다.navigateBack(), 이 방법도 R.onUnload()를 사용합니다.고민할 때가 된 것 같은데, 되돌아오는 버튼을 숨기자고?정부에서 이 방법을 제공하지 않은 것을 발견했다.R.onUnload () 를 비활성화해도 안 될 것 같습니다.R.onUnload()는 다시 불러오기를 클릭한 후에 실행되기 때문에, 사용자가 다시 불러오기를 클릭했는지 여부를 기록할 수 있습니다.그리고 우리는 사용자가 다시 불러오기를 눌러서 R.onUnload () 를 터치해도 E.onLoad (E.options) 를 실행하지 않으면 OK합니다.

// pages/serverError/serverError.js

import { previousPageClass } from '../../utils/util.js'

let isClickReload = false

Page({

  onLoad: function (options) {
    isClickReload = false
  },
  onUnload: function () {
    if(!isClickReload) {
      this.callbackParams()
    }    
  },
  /**
   *  
   */
  clickReload: function (e) {
    isClickReload = true
    wx.navigateBack()
    this.callbackParams()
  },
  //  ， 
  callbackParams: function () {
    let preOptions = previousPageClass().options
    previousPageClass().onLoad(preOptions)
  }
})

이로써 모든 문제는 기본적으로 이미 해결되었다.Demo 코드가 첨부되었으니 참고하시기 바랍니다.