uniapp 필터링 속성이 iOS에 적용되지 않으면 어떻게 해야 합니까?-uni-app-php.cn

uniapp 필터링 속성이 iOS에 적용되지 않으면 어떻게 해야 합니까?

PHPz

풀어 주다： 2023-04-23 17:30:14

원래의

997명이 탐색했습니다.

모바일 애플리케이션의 인기와 함께 점점 더 많은 개발자들이 크로스 플랫폼 개발 도구인 uniapp에 관심을 돌리고 있습니다. Vue.js 프레임워크를 기반으로 하며, 한 번 작성하면 여러 플랫폼에서 실행되는 효과를 얻을 수 있습니다. 그러나 uniapp을 사용하여 모바일 애플리케이션을 개발할 때에도 몇 가지 문제에 직면하게 됩니다. 오늘은 iOS에서 uniapp 필터링 속성이 적용되지 않는 문제에 대해 논의해보겠습니다.

문제 현상

uniapp에서는 필터를 사용하여 데이터 형식을 지정할 수 있습니다. 예를 들어, 템플릿에서 {{time | dateFormat}}을 사용하면 시간을 원하는 날짜 형식으로 변환할 수 있습니다. 코드는 다음과 같습니다.

<template>
  <view>{{ date | dateFormat }}</view>
</template>

<script>
  export default {
    data() {
      return {
        date: '2022-01-01 12:00:00'
      }
    },
    filters: {
      dateFormat(val) {
        return val.split(' ')[0]
      }
    }
  }
</script>

로그인 후 복사

안드로이드 측에서 실행시 "2022-01-01"이 정상적으로 출력될 수 있습니다. 하지만 ios측에서는 원래 "2022-01-01 12:00:00"이 출력되어 필터가 적용되지 않는 것 같습니다.

원인 분석

이 문제는 iOS 측 JS 엔진이 ES6 구문의 정규식을 잘못 처리하여 발생하는 것으로 나타났습니다. 특히 문제는 uniapp 필터 속성 구현에 있습니다. 우수한.

Vue.js에서는 Vue.prototype.$filter를 통해 필터가 구현됩니다. uniapp에서 이 전역 변수는 uni-app/dist/vue.runtime.esm.js에 정의되어 있습니다. Vue.js에는 필터를 구현하는 또 다른 방법이 있습니다. Vue.comComponent() 메서드를 사용하여 필터 속성이 포함된 객체를 전달하는 것입니다. 이 방법은 uniapp에서도 적용 가능하지만, iOS측에서의 표시 효과가 위의 방법과 달라서 정상적으로 출력이 가능합니다.

Solution

이제 uniapp 필터링 속성 구현에 문제가 있다는 것을 알았으므로 솔루션을 출시할 준비가 되었습니다. 이 문제에 대해 다음 두 가지 해결책이 있습니다.

(1) Vue.comComponent() 메서드를 사용하여 필터를 정의합니다.

<script>
  export default {
    data() {
      return {
        date: '2022-01-01 12:00:00'
      }
    },
    created() {
      Vue.component('dateFormat', {
        filters: {
          dateFormat(val) {
            return val.split(' ')[0]
          }
        }
      })
    }
  }
</script>

로그인 후 복사

위 코드에서는 Vue.comComponent() 메서드를 사용하여 필터를 정의합니다. 테스트 후 이 메서드는 iOS 측에서 정상적으로 출력될 수 있습니다.

(2) 정규식을 사용하여 문제 해결

uniapp 개발 시 iOS 측에서 필터가 적용되지 않는 문제를 정규식을 사용하여 해결할 수도 있습니다. 필터의 replacement() 메서드를 사용하여 숫자가 아닌 문자를 null 문자로 바꾼 다음 지정된 형식으로 문자열을 출력할 수 있습니다. 코드는 다음과 같습니다.

<script>
  export default {
    data() {
      return {
        date: '2022-01-01 12:00:00'
      }
    },
    filters: {
      dateFormat(val) {
        return val.replace(/[^\d]/g, '').substring(0, 8)
      }
    }
  }
</script>

로그인 후 복사

이 코드에서는 /¹/g 정규식을 사용하여 숫자가 아닌 문자를 일치시키고 교체() 메서드를 통해 null 문자로 바꿉니다. 마지막으로 substring() 메서드를 사용하여 지정된 형식의 문자열 출력을 얻습니다. 마찬가지로 테스트 후 이 메서드는 ios 측에서도 정상적으로 출력될 수 있습니다.

즉, 유니앱 개발에서는 이러한 문제가 발생했을 때 당황할 필요가 없습니다. 문제의 본질을 깊이 분석하고 올바르고 효과적인 솔루션을 채택하기만 하면 문제가 해결됩니다.