uniapp uni-icons 组件为例 带着大家使用并熟悉一次文档

原创 已于 2023-02-22 17:14:45 修改 · 8.7k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #前端

于 2023-02-07 16:11:18 首次发布

uni的组件都可以直接进入官网
https://uniapp.dcloud.net.cn/
然后点击右上角的搜索
在这里插入图片描述
直接在输入框中 搜索 uni-icons 下面内容就都出来了
在这里插入图片描述
在最上面先点击下载和按在
在这里插入图片描述
进入界面后 点击箭头指向出 进行下载
在这里插入图片描述
在这里插入图片描述
如果你系统 有HBuilder X 就会自动打开 要你选择安装在哪一个项目里 如果你的HBuilder X有项目在运行 则无法安装
在这里插入图片描述

在这里插入图片描述
安装成功后 我们继续回到刚才的文档

先看下面的 API 看看每个字段都是干什么的
在这里插入图片描述
这里 我们只需要两个 size 控制尺寸大小的 type 控制图标的方案 类型 他让我们参考案例
然后我们看案例
在这里插入图片描述
这里就有非常多的图标给我选

最上面就是基础用法
在这里插入图片描述
那么我们就可以理解为

<uni-icons type="图标方案  在图标案例下面复制" size="组件尺寸大小  要一个数字"></uni-icons>

例如 我这里直接在一个组件里写

<uni-icons type="contact" size="30"></uni-icons>

在这里插入图片描述

uniapp项目创建
CSDN博客专家，系统架构师，有合作、疑惑请私信博主。
08-25 1681
uniapp项目创建，uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。
uniapp-011-使用uni-icons实现字体图标
浪漫韫秋
02-15 791
导入插件之后，是在components目录下面的uni-icons。如上图所示，这样的话，我们直接就可以引入这个图标了。组件预览当中有，各种图标的名字，就是type。字体图标一个一个找，很麻烦的。我们直接使用uniapp插件。如上图所示，这就是导入成功了。这就是设置后的效果。
uni-app的图标插件
01-14
导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 import faicon from './components/fa-icon/fa-icon.vue' Vue.component('faicon',faicon) 3.页面中引用 在需要插入的页面引用 <!-- type 为图标名称 color 为图标颜色 默认#000000 (黑色，可不填) size 为图标大小 默认14px/1 (可不填) --> 或者class直接引用 <!-- 注意格式否则无法正常显示 class="fa fa-*" *号为名称 -->
uni-app怎么使用uni-icons
肖肖肖丽珠的博客
09-11 2771
然后再页面中引用这个vue的组件并对照着官网把他的type找到就可以了。把这个插件下载下来。我们找到uni_modules。把里面的uni-icons粘贴到自己的项目中。我是放在了我的components下面了。
uniapp-x使用内置图标和iconfont图标
最新发布
我的小站：https://oby.ink
10-10 692
uniappx使用内置图标和iconfont图标
小程序-uni-app：hbuildx uni-app 安装 uni-icons 及使用
snow的博客
08-15 4599
根目录uni_modules目录下增加uni-icons、uni-scss。
【uiapp】uni-icons的使用
cc蒲公英的博客
11-13 1735
【uiapp】uni-icons的使用
uniapp uni-icons组件自定义图标
weixin_48393490的博客
03-29 1899
2、去阿里图标下载自己需要的svg格式的图标。1、找到自己的uni-icons组件位置。这样就完成了，可以取试用一下了。
UniApp个人中心页面开发与自定义列表组件实践
资源摘要信息:"uniapp个人中心页面开发.docx"是一份详细讲解如何使用UniApp框架开发移动端“个人中心”页面的技术文档，重点聚焦于对UniApp内置组件`uni-list-item`的深度定制、Vue.js中的`provide`与`inject`机制的...
uniapp项目之小兔鲜儿小程序商城(七) 商品详情页(登录后):加入购物车，立即购买（SKU 模块）
GAARA
06-25 573
摘要 本文主要介绍了商品详情页SKU模块的实现方法。SKU（库存管理最小单元）是电商系统的核心功能，文章通过以下步骤实现： 从uni-app插件市场下载vk-data-goods-sku-popup组件 通过easycom机制自动引入组件 创建类型声明文件规范组件属性 使用v-model控制弹窗显示 处理后端数据适配组件格式要求 实现规格选择、加入购物车等交互功能 关键点包括：组件自动扫描机制、数据类型转换、弹窗交互控制等，为电商详情页开发提供了完整解决方案。
uniapp中的页面布局与组件化开发
在移动应用开发领域，uniapp作为一款基于Vue.js的跨平台开发框架，具有写一次代码，多端发布的特点。uniapp支持将一套代码同时编译为H5、小程序、App等多个端的应用，极大地提高了开发效率和代码复用率。 uniapp的...
小程序 | 黑马商城【未更完--实习去了】
不爱吃菜的菜菜的博客
11-07 1786
在项目根目录的components目录上，鼠标右键，选择新建组件，填写组件信息后，最后点击创建按钮：在分类页面的 UI 结构中，直接以标签的形式使用 my-search 自定义组件 < my-search > < my-search >
20191107 关于mui的app打包
do what you like && brave
11-07 3667
HTML5 Plus应用概述 HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。 HTML5 Plus规范 通过HTML5开发移动App时，会发现HTML5很多能力不具备。为弥补HTML5能力的不足，在W3C中国的指导下成立了HTML5中...
uniapp组件-uni-icons 图标
热门推荐
02-28 3万+
例子 <template> <view> <uni-icons type="arrowdown"/> <uni-icons type="arrowleft" color="#007aff" /> <uni-icons type="arrowright" color="#007aff" size="25" /> </view> </template> 效果图 如果想要换图标，只需要将type值改为.
UNI-APP_顶部导航栏右侧添加uni-icons图标，并绑定点击事件，自定义导航栏右侧图标
小歪博客
07-03 3559
UNIAPP_顶部导航栏右侧添加uni-icons图标，并绑定点击事件，自定义导航栏右侧图标
【Uniapp-Vue3】uni-icons的安装和使用
XunLin233的博客
01-23 3009
进入到如下页面中，点击“点击下载&安装”。点击“下载插件并导入HBuilder”，如果没有登录就登陆一下网页中会打开Hbuilder，进入Hbuilder以后，选择需要使用该插件的项目进行安装。点击确定，没有登录就再登录一下。下载完成以后就会在项目目录中出现“uni_modeules”文件。
uniapp 使用自定义icon图标
黎小小的博客
05-29 6858
注意如果时vue3需要 slot用在节点中。
【uni-app】uni-app官方自带图标的使用方法
【敦厚的曹操】的专栏
04-27 5207
【代码】【uni-app】uni-app官方自带图标的使用方法。
uni-icons 图标
weixin_45932157的博客
08-06 1553
测试： <template> <view> <uni-icons type="arrowdown"/> <uni-icons type="checkmarkempty" color="#007aff" /> <uni-icons type="checkmarkempty" color="#007aff" size="25" /> <uni-icons type="arrowup" color="#ff0000" :size=
uniapp中使用uni-icons，编译到支付宝uni-icons组件没有导过去
03-26
### UniApp 中 `uni-icons` 组件在支付宝小程序中的解决方案 当使用 UniApp 的 `uni-icons` 组件并将其编译至支付宝小程序时，可能会遇到组件未正确导入的情况。以下是针对该问题的分析与解决方案： #### 1. **确认依赖版本** 确保项目所使用的 HBuilderX 版本以及 `@dcloudio/uni-ui` 库版本是最新的。如果版本过旧可能导致兼容性问题[^1]。 可以通过以下方式检查和升级： - 打开终端运行命令来安装最新版 `@dcloudio/uni-ui`： ```bash npm install @dcloudio/uni-ui --save ``` #### 2. **配置文件调整** 支付宝小程序对于某些自定义组件的支持可能需要额外声明。需检查项目的 `manifest.json` 文件中是否已启用自定义组件支持，并确保路径设置无误。 具体操作如下： - 进入 `manifest.json -> 小程序-> 自定义组件` 部分； - 确认 `"usingComponents"` 字段已经开启。 示例配置片段： ```json { "mp-weixin": { "usingComponents": true, ... }, "mp-alipay": { "usingComponents": true, ... } } ``` #### 3. **手动引入组件** 有时自动全局注册无法正常工作，在这种情况下可以尝试通过页面局部引入的方式加载 `uni-icons` 组件。 例如在一个 `.vue` 页面里这样写： ```html <template> <view class="content"> <!-- 局部引入 --> <uni-icons type="star-filled" size="24"></uni-icons> </view> </template> <script> import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'; export default { components: { uniIcons } }; </script> ``` #### 4. **清理缓存重新构建** 有时候构建过程中产生的临时文件会干扰最终产物的质量。建议执行一次完整的清理再打包流程。 - 删除 `/dist` 和 `/node_modules` 文件夹； - 使用 HBuilderX 或 CLI 工具重新初始化环境后再次编译。 以上方法能够有效应对大部分因平台差异引起的组件显示异常情况。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值