Heim >Web-Frontend >uni-app >So lösen Sie das Problem, dass das Uni-Symbol in der App nicht angezeigt wird
So lösen Sie das Problem, dass das Uni-Symbol in der App nicht angezeigt wird
- 藏色散人Original
- 2021-09-15 13:59:2113487Durchsuche
Lösungen dafür, dass das Uni-Symbol nicht in der App angezeigt wird: 1. Verwenden Sie keine Vue-Syntax, die von Nicht-H5-Terminals nicht unterstützt wird. 2. Schreiben Sie Stile innerhalb der Komponente. 3. Ändern Sie den Pfad „url(https:/). /alicdn.net)“ ; 4. Verwenden Sie die IP, auf die das Mobiltelefon zugreifen kann, um Netzwerktests durchzuführen.
Die Betriebsumgebung dieses Artikels: Windows 7-System, Uni-App-Version 2.5.1, DELL G3-Computer
Das Uni-Symbol wird in der App nicht angezeigt?
uniapp führt Iconfont-Symbole ein und löst das Problem, dass Iconfont auf echten Geräten nicht angezeigt wird
1. So führen Sie Iconfont-Symbole in uniapp ein
1. Laden Sie zunächst die Projektdatei von der Iconfont-Website herunter. Wie im Bild gezeigt:
2. Entpacken Sie die heruntergeladene Iconfont-Datei, nehmen Sie iconfont.css und legen Sie sie in Ihrem Projektverzeichnis ab
3. Kehren Sie zur Iconfont-Website zurück , klicken Sie, um den Code zu kopieren. Sie benötigen lediglich die Adresse im ttf-Format
4. Öffnen Sie die Datei iconfont.css im Projekt und schreiben Sie den kopierten Code im ttf-Format in @font-face Folgendes:
@font-face {
font-family: "iconfont";
src: url('https://at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype');
} 5. Fügen Sie abschließend iconfont.css in das Style-Tag von App.vue ein.
6.
2. Lösen Sie das Problem, dass der Iconfont nicht auf dem realen Gerät angezeigt wird.
Problem: Nach dem obigen Vorgang wird das Iconfont-Symbol in H5 normal angezeigt, aber beim Debuggen in der App des realen Geräts wird es gefunden dass die Symbolanzeige nicht erfolgreich war.
Lösung: Offizieller Link: https://uniapp.dcloud.io/matter
1 Es wird die Vue-Syntax verwendet, die von der Nicht-H5-Seite nicht unterstützt wird, und die Schreibmethode ist durch den Mini eingeschränkt Benutzerdefinierte Komponenten des Programms finden Sie unter
2. Schreiben Sie style="xx" nicht direkt in das Komponentenattribut, auf das verwiesen wird
3. /alicdn.net) zur URL (https://alicdn.net), da // auf der App-Seite ein Dateiprotokoll ist
4 Viele Leute verwenden beim Herstellen einer Verbindung die lokale Testdienstadresse (localhost oder 127.0.0.1). Auf der H5-Seite kann auf eine solche Netzwerkadresse nicht zugegriffen werden. Bitte verwenden Sie eine von Ihrem Telefon aus erreichbare IP-Adresse, um eine Verbindung zum Internet herzustellen
Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass das Uni-Symbol in der App nicht angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!