애플릿의 페이지 이동 전달 대상 파라미터 문제

작은 프로그램을 개발한 후에 반드시 알 수 있듯이 작은 프로그램의 페이지의 직접적인 데이터 전달은 전달 대상의 파라미터를 지원하지 않는다. 그러나 작은 프로그램 개발 과정에서 업무 수요와 인터페이스 디자인의 원인으로 인해 이전 페이지의 대상 데이터를 다음 페이지로 전달해야 하기 때문에 어느 정도 어려움을 초래했다.
이 문제를 해결하는 방법도 몇 가지가 있다.
하나는 대상을 앱에 저장하는 것이다.js 전역 변수, 다음 페이지에서 바로 app.js 값을 가져옵니다.그러나 이것은 매우 어쩔 수 없는 방법이다. 만약에 이 매개 변수가 여러 개 있다면 이런 전체적인 변수는 크게 추측해야 할 뿐만 아니라 우리의 개발 습관에 부합되지 않기 때문이다.
다른 하나는 데이터를 캐시에 저장한 다음 다음 다음 페이지로 들어갈 때 캐시에서 꺼내는 것이다.생각은 첫 번째 것과 차이가 많지 않고 추천하지 않는 방법이기도 하며, 매번 다 쓸 때마다 이 캐시를 제거해야 한다. 그렇지 않으면 데이터가 혼란스러워질 수도 있다.
다음은 또 다른 방법을 소개합니다. 데이터를string으로 바꾸어 URL 뒤에 연결하면 깔끔합니다.그러나 대상의 매개 변수를 하나하나 맞추는 것도 번거롭기 때문에 여기에 url을 봉인했다.js 도구 클래스, 사용이 간단하고 편리합니다.잔말 말고 코드로 바로 올라가세요.

//  url
const buildURL = (url, query = {}, isSequence = true) => {
  if (!query) return url
  const joiner = url.match(/\?/) ? '&' : '?'
  const queryStr = Object.keys(query)
    .map(key => `${key}=${encodeURIComponent(isSequence ? JSON.stringify(query[key]) : query[key])}`)
    .join('&')
  return url + joiner + queryStr
}

//  query 
const decodeQuery = (originQuery = {}, isSequence = true) => {
  const result = {}
  if (!originQuery) return {}
  return Object.keys(originQuery).reduce((prev, curr) => {
    result[curr] = decodeURIComponent(originQuery[curr])
    if (isSequence) {
      result[curr] = JSON.parse(result[curr])
    }
    return result
  }, result)
}

module.exports = {
  buildURL,
  decodeQuery
}

사용 방법은 매우 간단하고 전달할 때 암호화된다.괄호 안에 임의로 매개 변수를 추가할 수 있으며, 복호화 값을 추출할 때, 전송값에 따라 추출할 수 있다.

let url = app.urlHelper.buildURL('/pages/laugh/detail/index', {
      item: this.data.item
    })

wx.navigateTo({
      url,
    })

사용 시 암호를 해독하여 페이지 onLoad 메서드에서 다음을 수행합니다.

onLoad: function(options) {
    let item = app.urlHelper.decodeQuery(options).item
}

이렇게 하면 애플릿 페이지 간의 값 전달 문제를 완벽하게 해결할 수 있다.
더 좋은 방법이 있다면, 함께 교류하는 것을 환영합니다.