>웹 프론트엔드 >uni-app >uniapp은 수신된 데이터를 어떻게 변경하나요?

uniapp은 수신된 데이터를 어떻게 변경하나요?

PHPz
PHPz원래의
2023-04-20 09:10:54967검색

모바일 애플리케이션 개발이 지속적으로 발전함에 따라 많은 개발자도 끊임없이 새로운 기술 솔루션을 모색하고 있으며, 그 중 uniapp은 의심할 여지 없이 현재 가장 인기 있는 솔루션입니다. uniapp은 많은 편의성을 제공하지만 개발자는 특정 요구 사항에 따라 추가 기술이 필요할 수 있습니다. 이번 글에서는 유니앱에서 수신된 데이터를 변경하는 방법을 소개하겠습니다.

1. 배경

uniapp에서는 wxs 필터, 계산된 속성 등을 통해 어느 정도 데이터를 처리할 수 있지만, 인터페이스에서 반환된 원본 데이터에 대해 좀 더 자세한 처리를 수행해야 한다면 이번에는 데이터를 모니터링하고 응답하려면 $watch를 사용해야 합니다.

2. 특정 작업

1. vue 인스턴스에서 데이터 객체를 선언하고 인터페이스에서 반환된 원본 데이터와 같이 응답해야 하는 데이터 구조를 정의합니다.

<script>
export default {
  data () {
    return {
      rawData: {}
    }
  },
}
</script>
  1. 생성 주기 함수에서 (), uni.request 전달 대상 데이터를 얻기 위한 요청 시작:
<script>
export default {
  data () {
    return {
      rawData: {}
    }
  },
  created() {
    uni.request({
       url: 'https://foobar.com/getData',
        success: (res) => {
          this.rawData = res.data
        }
     })
  }
}
</script>
  1. rawData 객체를 수신하고 인터페이스에서 반환된 타임스탬프를 더 읽기 쉬운 시간 형식으로 변환하는 등 데이터를 처리합니다.
<script>
export default {
  data () {
    return {
      rawData: {}
    }
  },
  created() {
    uni.request({
       url: 'https://foobar.com/getData',
        success: (res) => {
          this.rawData = res.data
        }
     })
  },
  watch: {
    rawData: {
      handler: function(val, oldVal) {
        // 时间戳转换成可读性更好的时间格式
        val.timestamp = new Date(val.timestamp).toLocaleDateString();
      },
      deep: true
    }
  }
}
</script>

3. 요약

위를 통해 이 단계에서는 인터페이스에서 반환된 데이터에 대한 맞춤형 처리를 쉽게 구현하고, 처리된 데이터를 페이지 렌더링을 통해 사용자에게 표시할 수 있습니다. $watch는 실제로 "듣기" 프로세스라는 점에 유의해야 합니다. 따라서 $watch 듣기 함수를 작성할 때 예기치 않은 오류를 방지하려면 변수 이름 및 들여쓰기와 같은 표준 형식 문제에 주의해야 합니다.

uniapp을 사용하는 개발 과정에서 문제가 발생하면 공식 문서를 사용하여 도움을 찾는 방법을 배워야 합니다. 동시에 우리는 가장 짧은 시간과 최소한의 코드로 최대의 이점을 달성하기 위해 새로운 기술을 부지런히 탐색하고 시도해야 합니다.

위 내용은 uniapp은 수신된 데이터를 어떻게 변경하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.