Apakah yang perlu saya lakukan jika atribut penapisan uniapp tidak berkuat kuasa pada iOS?

Dengan populariti aplikasi mudah alih, semakin ramai pembangun mengalihkan perhatian mereka kepada uniapp, alat pembangunan merentas platform. Ia berdasarkan rangka kerja Vue.js, yang boleh mencapai kesan penulisan sekali dan berjalan pada berbilang platform. Walau bagaimanapun, apabila menggunakan uniapp untuk membangunkan aplikasi mudah alih, anda juga akan menghadapi beberapa masalah. Hari ini, kita akan membincangkan masalah bahawa atribut penapisan uniapp tidak berkuat kuasa pada iOS.

1. Fenomena masalah

Dalam uniapp, kami boleh menggunakan penapis untuk memformat data kami. Contohnya, menggunakan {{time |. dateFormat}} dalam templat boleh menukar masa kepada format tarikh yang kita mahu. Kodnya adalah seperti berikut:

<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>

Apabila dijalankan pada sisi Android, "2022-01-01" boleh dikeluarkan secara normal. Tetapi di sisi ios, "2022-01-01 12:00:00" yang asal akan dikeluarkan, dan penapis nampaknya tidak berkuat kuasa.

2. Analisis punca

Selepas penyiasatan dan analisis, kami mendapati bahawa masalah ini disebabkan oleh enjin JS pada bahagian ios yang salah mengendalikan ungkapan biasa dalam sintaks ES6 , Mengatakan bahawa masalahnya terletak pada cara atribut penapisan uniapp dilaksanakan.

Dalam Vue.js, penapis dilaksanakan melalui Vue.prototype.$filter. Dalam uniapp, pembolehubah global ini ditakrifkan dalam uni-app/dist/vue.runtime.esm.js. Dalam Vue.js, terdapat satu lagi cara untuk melaksanakan penapis, iaitu menggunakan kaedah Vue.component() untuk menghantar objek yang mengandungi sifat penapis. Kaedah ini juga boleh digunakan dalam uniapp, tetapi kesan paparan pada bahagian iOS berbeza daripada kaedah di atas dan boleh dikeluarkan secara normal.

3. Penyelesaian

Sekarang kami mendapati bahawa masalahnya terletak pada pelaksanaan sifat penapisan uniapp, penyelesaiannya sedia untuk keluar. Untuk masalah ini, kami mempunyai dua penyelesaian berikut:

(1) Gunakan kaedah Vue.component() untuk menentukan penapis

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

Dalam kod di atas, kami menggunakan Vue . kaedah component() untuk mentakrifkan penapis. Selepas ujian, kaedah ini boleh mengeluarkan secara normal pada sisi ios.

(2) Gunakan ungkapan biasa untuk menyelesaikan masalah

Dalam pembangunan uniapp, kami juga boleh menggunakan ungkapan biasa untuk menyelesaikan masalah yang penapis tidak berkuat kuasa pada bahagian ios. Kita boleh menggunakan kaedah replace() dalam penapis untuk menggantikan aksara bukan angka dengan aksara nol dan kemudian mengeluarkan rentetan dalam format yang ditentukan. Kodnya kelihatan seperti ini:

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

Dalam kod ini, kami menggunakan ungkapan biasa /¹/g untuk memadankan aksara bukan angka dan menggantikan () kaedah menggantikannya dengan aksara nol. Akhir sekali, gunakan kaedah substring() untuk mendapatkan output rentetan dalam format yang ditentukan. Begitu juga, selepas ujian, kaedah ini juga boleh mengeluarkan secara normal pada sisi ios.

Ringkasnya, dalam pembangunan uniapp, tidak perlu panik apabila menghadapi masalah sedemikian Anda hanya perlu menganalisis secara mendalam sifat masalah dan menggunakan penyelesaian yang betul dan berkesan, dan masalah itu akan diselesaikan.

---

1. d ↩

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika atribut penapisan uniapp tidak berkuat kuasa pada iOS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!