搜尋
首頁web前端uni-app如何解決uni圖示在app上不顯示的問題

uni圖示在app上不顯示的解決方法:1、不要使用非H5端不支援的vue語法;2、在元件內部寫樣式;3、修改路徑「url(https://alicdn .net)」;4、用手機可存取的IP進行連網測試。

如何解決uni圖示在app上不顯示的問題

本文操作環境:Windows7系統、uni-app2.5.1版,DELL G3電腦

uni圖示在app上不顯示?

uniapp引入iconfont圖示及解決真機中iconfont不顯示的問題

一、uniapp中如何引入iconfont圖示

1、先從iconfont網站下載專案檔。如圖:

2、下載好的iconfont檔案解壓縮,取iconfont.css放入自己工程目錄

3、回到iconfont網站,點選複製程式碼,只需要ttf格式的位址就行

4、開啟專案中的iconfont.css文件,用複製的ttf格式的程式碼寫入@font-face中,如下:


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

5、最後在App.vue 的style標籤中引入iconfont.css

6、重新編譯,可以看到應的圖示。

二、解決真機中iconfont不顯示的問題

  問題:經過如上操作,iconfont圖示在H5裡是正常顯示了,但是在真機app上調試時卻發現icon顯示不成功。

  解決方案:官方連結:https://uniapp.dcloud.io/matter

1、使用了非H5端不支援的vue語法,受小程式自訂元件限制的寫法,詳見

2、不要在引用元件的地方在元件屬性上直接寫style="xx",要在元件內部寫樣式

3、url(//alicdn.net)等路徑,改為url(https://alicdn.net),因為在App端//是file協定

4、很多人在H5端聯網時使用本地測試服務位址(localhost或127.0.0.1),這樣的連網位址手機App端是無法存取的,請使用手機可存取的IP進行連網

@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');
}

推薦學習:《uni-app教學

 

#

以上是如何解決uni圖示在app上不顯示的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
VSCode中如何开发uni-app?(教程分享)VSCode中如何开发uni-app?(教程分享)May 13, 2022 pm 08:11 PM

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

利用uniapp开发一个简单的地图导航利用uniapp开发一个简单的地图导航Jun 09, 2022 pm 07:46 PM

怎么利用uniapp开发一个简单的地图导航?本篇文章就来为大家提供一个制作简单地图的思路,希望对大家有所帮助!

聊聊如何利用uniapp开发一个贪吃蛇小游戏!聊聊如何利用uniapp开发一个贪吃蛇小游戏!May 20, 2022 pm 07:56 PM

如何利用uniapp开发一个贪吃蛇小游戏?下面本篇文章就手把手带大家在uniapp中实现贪吃蛇小游戏,希望对大家有所帮助!

uni-app vue3接口请求怎么封装uni-app vue3接口请求怎么封装May 11, 2023 pm 07:28 PM

uni-app接口,全局方法封装1.在根目录创建一个api文件,在api文件夹中创建api.js,baseUrl.js和http.js文件2.baseUrl.js文件代码exportdefault"https://XXXX.test03.qcw800.com/api/"3.http.js文件代码exportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method

实例讲解uniapp实现多选框的全选功能实例讲解uniapp实现多选框的全选功能Jun 22, 2022 am 11:57 AM

本篇文章给大家带来了关于uniapp的相关知识,其中主要整理了实现多选框的全选功能的相关问题,无法实现全选的原因是动态修改checkbox的checked字段时,界面上的状态能够实时变化,但是无法触发checkbox-group的change事件,下面一起来看一下,希望对大家有帮助。

手把手带你开发一个uni-app日历插件(并发布)手把手带你开发一个uni-app日历插件(并发布)Jun 30, 2022 pm 08:13 PM

本篇文章手把手带大家开发一个uni-app日历插件,介绍下一款日历插件是如何从开发到发布的,希望对大家有所帮助!

实例详解uniapp如何实现电话录音功能(附代码)实例详解uniapp如何实现电话录音功能(附代码)Jan 05, 2023 pm 04:41 PM

本篇文章给大家带来了关于uniapp的相关知识,其中主要介绍了怎么用uniapp实现拨打电话并且还能同步录音的功能,感兴趣的朋友一起来看一下吧,希望对大家有帮助。

聊聊使用Uniapp怎么实现全局消息提示及其组件聊聊使用Uniapp怎么实现全局消息提示及其组件Jun 22, 2022 pm 06:24 PM

Uniapp中怎么实现全局消息提示及其组件?下面本篇文章给大家介绍一下Uniapp全局消息提示及其组件的实现方法,希望对大家有所帮助!

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器