Bagaimana untuk menyelesaikan masalah bahawa ikon uni tidak dipaparkan pada aplikasi

Penyelesaian kepada ikon uni tidak dipaparkan pada apl: 1. Jangan gunakan sintaks vue yang tidak disokong oleh terminal bukan H5 2. Tulis gaya di dalam komponen 3. Ubah suai laluan "url (https://alicdn .net)"; 4. Gunakan alamat IP yang boleh diakses oleh telefon bimbit untuk menjalankan ujian rangkaian.

Persekitaran pengendalian artikel ini: Sistem Windows 7, uni-app versi 2.5.1, komputer DELL G3

The ikon uni tidak muncul pada rancangan apl?

uniapp memperkenalkan ikon font ikon dan menyelesaikan masalah font ikon tidak dipaparkan pada peranti sebenar

1 🎜>

1. Mula-mula muat turun fail projek dari laman web iconfont. Seperti yang ditunjukkan dalam gambar:

2. Nyahzip fail iconfont yang dimuat turun, ambil iconfont.css dan masukkan ke dalam direktori projek

3 Kembali ke tapak web iconfont dan klik untuk menyalin kod tersebut format ttf

4 Buka fail iconfont.css dalam projek dan tulis kod format ttf yang disalin ke dalam @font -muka, seperti berikut:

@font-face {
　　font-family: "iconfont";
　　src: url('https://at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype');
}

5 Akhir sekali, perkenalkan iconfont.css ke dalam teg gaya App.vue

6.

2 Selesaikan masalah iconfont tidak dipaparkan pada peranti sebenar

Masalah: Selepas operasi di atas, ikon iconfont dipaparkan seperti biasa. dalam H5 , tetapi apabila menyahpepijat pada apl peranti sebenar, didapati paparan ikon tidak berjaya.

Penyelesaian: Pautan rasmi: https://uniapp.dcloud.io/matter

1 Gunakan sintaks vue yang tidak disokong oleh bukan- H5 end , kaedah penulisan yang dihadkan oleh komponen tersuai program mini, lihat

untuk butiran 2. Jangan terus tulis style="xx" pada atribut komponen di mana komponen dirujuk komponen

3 Tukar laluan seperti url(//alicdn.net) kepada url(https://alicdn.net) kerana // di sebelah App ialah protokol fail

4. . Ramai orang menyambung ke Internet di bahagian H5 Gunakan alamat perkhidmatan ujian tempatan (localhost atau 127.0.0.1 alamat rangkaian sedemikian tidak boleh diakses oleh aplikasi mudah alih Sila gunakan IP yang boleh diakses oleh telefon bimbit untuk rangkaian

Pembelajaran yang disyorkan: "

@font-face {
　　font-family: "iconfont";
　　src: url('//at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype');
}// 改为这样即可：@font-face {
　　font-family: "iconfont";
　　src: url('https://at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype');
}

tutorial uni-apl

"

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah bahawa ikon uni tidak dipaparkan pada aplikasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!