为什么uni-app扩展组件icons不显示-猿码集

为什么uni-app扩展组件icons不显示

1. 检查icons组件的引入

在使用uni-app扩展组件icons时，首先需要确保已经将组件引入到项目当中。我们可以找到项目的 components 文件夹下，查看是否存在 icons 文件夹，如果不存在，可以通过以下代码将其引入：


import { icons } from "@dcloudio/uni-ui";

如果已经引入了icons组件，我们需要检查该组件是否被正确地注册到了页面当中。在vue文件的 export default 中注册组件：


export default {
  components: {
    icons
  }
}

如果已经正确地注册了icons组件，我们需要检查该组件是否被正确地使用。

2. 检查使用icons组件的代码

在使用icons组件之前，需要调用 uni-icons.init() 方法对icons进行初始化。如果未进行初始化，可能会导致icons组件显示不正确。在mounted()生命周期当中使用以下代码进行初始化：


mounted() {
  uniIcons.init({
    // 可选配置项
  })
}

我们可以通过以下代码来使用icons组件：


<template>
  <icons :type="type" class="icon"></icons>
</template>
<script>
export default {
  data() {
    return {
      type: 'home'
    }
  }
}
</script>

在使用icons组件的时候，需要注意以下几点：

一定要加上 :type 属性，用于指定icons的类型

icons的类型可以在 uni-app官网中找到

3. 检查项目的运行环境

在运行uni-app项目时，需要确保运行环境的兼容性。如果项目运行的是微信小程序，需要检查微信开发者工具的基础库是否支持icons组件的使用。如果基础库不支持，可能会导致icons组件无法正常显示。我们可以在微信开发者工具的右上角查看基础库的版本号。

另外，需要确保项目的uni-app版本是否支持icons组件的使用。如果项目的uni-app版本过低，可能会导致icons组件无法正常显示。我们可以在项目的 manifest.json 文件当中查看uni-app的版本号。

4. 检查icons组件的样式

在使用icons组件时，需要注意icons组件的样式。icons组件的样式可以通过在 App.vue 文件中引入 uni-icons.css 文件来确定。


<style>
  @import "~@dcloudio/uni-ui/lib/uni-icons/style/css/uni-icons.css"
</style>

如果icons组件无法正常显示，需要检查icons组件的样式是否被正确地引入。

5. 检查uni-ui组件的是否更新

如果以上方法都无法解决问题，可以检查uni-ui组件是否更新到了最新版本。uni-ui组件是由DCloud提供的，如果组件版本过旧，可能会存在一些已知的问题。我们可以使用以下代码来更新uni-ui组件：

npm i @dcloudio/uni-ui@1.7.1

总结

当icons组件无法显示时，我们需要检查icons组件的引入、注册和使用代码，以及项目的运行环境和uni-ui组件的版本。因为icons组件的使用非常频繁，而且在各种场合都能看到，所以解决方法也非常重要。

为什么uni-app扩展组件icons不显示