iOS で uniapp フィルタリング属性が有効にならない場合はどうすればよいですか?-uni-app-php.cn

iOS で uniapp フィルタリング属性が有効にならない場合はどうすればよいですか?

PHPz

リリース： 2023-04-23 17:30:14

オリジナル

954 人が閲覧しました

モバイルアプリケーションの人気に伴い、クロスプラットフォーム開発ツールである 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>

ログイン後にコピー

Android側で実行すると正常に「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.component() メソッドを使用して、フィルタープロパティを含むオブジェクトを渡すことです。この方法はuniappでも適用できますが、iOS側の表示効果は上記の方法とは異なり、正常に出力できます。

解決策

問題が uniapp フィルタリング属性の実装にあることが判明したので、解決策を発表する準備が整いました。この問題には、次の 2 つの解決策があります。

(1) Vue.component() メソッドを使用してフィルタを定義します。

<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.component ( ) メソッドを使用してフィルターを定義します。テストしたところ、この方法はios側で正常に出力できました。

(2) 正規表現を使って問題を解決する

ユニアプリ開発では、iOS 側でフィルタが効かないという問題を正規表現を使って解決することもできます。フィルターで replace() メソッドを使用すると、数値以外の文字を 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 を使用して数値以外の文字を照合し、 replace() メソッドを使用して照合します。それをヌル文字に置き換えます。最後に、substring() メソッドを使用して、指定された形式で文字列出力を取得します。同様にテスト後、この方法でもios側では正常に出力できました。

つまり、ユニアプリ開発では、このような問題に遭遇してもパニックになる必要はなく、問題の性質を深く分析し、正しく効果的な解決策を採用するだけで問題は解決します。