uni-app资源管理与图标使用全解

uni-app 框架与资源路径

不需要专门去学习小程序的语法,uni-app使用的是vue的语法,不是小程序自定义的语法。
uni-app资源管理与图标使用全解
搜索框:有疑问直接搜索框输入,BUG直接复制错误提示粘贴上去搜索。
介绍:先看这个页面,就知道uniapp大体知识,覆盖了哪些内容,如何进行开发。
框架:pages.json 配置项、生命周期、页面通讯、日志打印、定时器。
API: 为开发APP、小程序、H5等提供的内置函数。uniCloud: 简化服务端开发,不用自己开发服务端代码。

uniapp项目目录及文件介绍

一个uni-app项目,默认包含如下目录及文件:

┌─cloudfunctions> 云函数目录(阿里云为aliyun,腾讯云为tcb,uniCloud详见 )
│─components 符合vue组件规范的uni-app组件目录
│          └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录,详见
├─platforms 存放各平台专用页面的目录,详见
├─pages 业务页面文件存放的目录
│       ├─index
│       │     └─index.vue index页面
│       └─list
│                └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录,详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听、应用生命周期, 详见
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见

注意

  1. 编译到任意平台时, static 目录下的文件均会被打包进去,非static目录下的文件(vue、js、css 等)被引用到才会被包含进去。
  2. static 目录下的 js 文件不会被编译,如果里面有es6的代码,不经过转换直接运行,在手机设备上会报错。
  3. css 、 less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。

总结

static 目录放图片、视频资源。common目录放 jscssless/scss 等资源,components 目录放可复用vue组件。

资源路径说明

vue组件中引入静态资源

template 内引入静态资源,如 image video等标签的 src 属性时,可以使用相对路径或者绝对路径,形式如下:

<!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/titleTouxiang.png"></image>
<image class="logo" src="@/static/titleTouxiang.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/titleTouxiang.png"></image>

uni-app资源管理与图标使用全解

注意

  • @ 开头的绝对路径以及相对路径会经过base64转换规则校验。
  • 引入的静态资源在非h5平台,均不转为base64
  • H5平台,小于4kb的资源会被转换成base64,其余不转。
  • 支付宝小程序组件内 image 标签不可使用相对路径。

总结
因为支付宝小程序使用 image 时不可使用相对路径,所以项目中全部使用绝对路径,推荐以 @ 开头,原因
看下面js文件

js文件引入

js 文件或script标签内(包括renderjs等)引入 js 文件时,可以使用相对路径和绝对路径,形式如下:

// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

注意

js文件不支持使用/开头的方式引入。

总结

模板中的标签属性在引入图片、视频资源时,使用以 @ 开头的绝对路径;

css引入静态资源

css 文件或 style标签 内引入 css 文件时(scss、less文件同理),可以使用相对路径或绝对路径:

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

注意
HBuilderX 2.6.6-alpha 起支持绝对路径引入静态资源,旧版本不支持此方式
说明
css 文件或 style标签 内引用的图片路径可以使用相对路径也可以使用绝对路径,
需要注意的是,有些小程序端css文件不允许引用本地文件(请看注意事项):

/* 绝对路径 */background-image: url(/static/logo.png);background-image: url(@/static/logo.png);
/* 相对路径 */background-image: url(../../static/logo.png);

注意

  • 引入字体图标请参考,字体图标。
  • @ 开头的绝对路径以及相对路径会经过base64转换规则校验。
  • 不支持本地图片的平台,小于40kb,一定会转base64。(共四个平台mp-weixin, mp-qq, mp-toutiao, app v2)。
  • h5平台,小于4kb会转base64,超出4kb时不转。其余平台不会转base64

在项目开发时,引用任意类型资源文件,全部使用以@开头的绝对路径方式引入,引入字体图标文件时,使用~@开头,如:~@/static/icon/iconfont.ttf

iconfont字体图标

下载图标库,进入阿里巴巴矢量图标库
uni-app资源管理与图标使用全解
下载完成点击.html
uni-app框架与资源路径及图标的引入使用详解
uni-app资源管理与图标使用全解

方式一:Unicode 引用步骤

Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。
  • 只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
  • 多色有需求建议使用 symbol 的引用方式。

iconfont.cssiconfont.ttf 文件拷贝到 /static/icon/ 目录下
uni-app框架与资源路径及图标的引入使用详解
App.vue文件的 <style> 标签下完成 引用.ttf字体文件 和 定义 iconfont 的样式,字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。网络路径必须加协议头 https
uni-app框架与资源路径及图标的引入使用详解
阿里 Unicode 在线图标链接复制如下(一定不要忘记加 https://):
uni-app框架与资源路径及图标的引入使用详解
挑选相应图标并获取字体编码,应用于页面,注意:类名是 iconfont ,字体编码 &# 开头 ; 结尾。
uni-app框架与资源路径及图标的引入使用详解
效果:
uni-app框架与资源路径及图标的引入使用详解

方式二:Font-class 类名引用步骤(推荐方式)

font-class Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
Unicode 使用方式相比,具有如下特点:

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个icon是什么。
  • 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

App.vue文件的<style>标签下使用import导入iconfont.css字体文件把上面方式一的代码注释掉,避免相互影响
注意:font-class类名方式,微信小程序开发工具上不支持网络链接,只支持本地方式;打包上线时,只支持在线方式。

uni-app框架与资源路径及图标的引入使用详解
阿里Font class在线图标链接复制如下(一定不要忘记加 https://)微信小程序不支持网络链接,只支持本地方式:
uni-app框架与资源路径及图标的引入使用详解
挑选相应图标并获取类名,应用于 .vue 页面,注意:iconfonticon-haoping iconfont.css文件声明的, icon-haoping 是具体的图标类名。进行iconfont.css文件进行修改,删除下图中两行,
uni-app框架与资源路径及图标的引入使用详解
修改上图中的base64位后面的format(‘woff2’),改为format(‘woff2’);以分好结尾,并且前面加上src:
uni-app框架与资源路径及图标的引入使用详解
最后几行url不需要也要删除
uni-app框架与资源路径及图标的引入使用详解
效果:
uni-app框架与资源路径及图标的引入使用详解
uni-app框架与资源路径及图标的所有方式引入并使用详解

方式三:nvue 文件引用字体图标
  • nvue 要使用 Unicode 引用。
  • nvue 文件中不可直接使用css的方式引入字体文件,需要在每个nvue文件中使用js的方式引入。无法 App.vue全局引入。
  • nvue内不支持本地路径引入字体,请使用网络链接或者 base64 形式。

步骤一、在user.nvue文件要使用字体图标,那在此组件的beforeCreate生命周期钩子加载iconfont.ttf文件。

<template><view>Goods<text class="iconfont">&#xe61a;</text></view>
</template><script>export default {beforeCreate() {// #ifdef APP-NVUE// nvue文件 加载unicode图标文件const dom = weex.requireModule('dom');dom.addRule('fontFace', {fontFamily: 'iconfont', // 在style中声明 .ionfont 样式引用// 使用 https:// 开头的网络链接,且用一定要用单引号''引起来src: "url('https//at.alicdn.com/t/c/font_3863633_6esci1kuw13.ttf')"});// #endif},data() {return {}},methods: {}}
</script>

步骤二、在 style 中声明.iconfont引用上面加载的字体文件,定义图标大小和颜色。
注意:下面 font-family 的值对应上面 js 中的 fontFamily 值。

<style>.iconfont{font-family: iconfont;}
</style>

步骤三、选择相应图标并获取字体编码,应用于 .nvue 页面
注意:类名是iconfont,字体编码 &# 开头 ; 结尾

<template><view>Goods<text class="iconfont">&#xe61a;</text></view>
</template>

效果图:
uni-app框架与资源路径及图标的所有方式引入并使用详解

方式四:彩色图标 iconfont

步骤一、进入阿里巴巴矢量图标库,添加图标到项目,然后下载至本地
uni-app框架与资源路径及图标的所有方式引入并使用详解
解压后的本地文件如下,其中eot文件很重要
uni-app框架与资源路径及图标的所有方式引入并使用详解
如果没有eot文件则进入icon的项目设置,勾选eot选项后重新下载
在这里插入图片描述
就会出现eot文件
uni-app框架与资源路径及图标的所有方式引入并使用详解

步骤二、在本地找到下载的压缩包,并解压,进入解压缩之后的文件,在地址栏中输入cmd打开控制台(如下图):

uni-app框架与资源路径及图标的所有方式引入并使用详解

步骤三、打开电脑命令行,执行以下命令,全局安装iconfont-tools转换工具

	npm install -g iconfont-tools

uni-app框架与资源路径及图标的所有方式引入并使用详解
第四步、在控制台中输入指令:iconfont-tools,按回车执行指令,根据提示输入对应的值, 如下图所示:
uni-app框架与资源路径及图标的所有方式引入并使用详解

第五步、 执行完后,就会多出来一个 iconfont-app 的文件夹
uni-app框架与资源路径及图标的所有方式引入并使用详解
步骤六、进入 iconfont-app 文件夹,将其中的iconfont-app-icon.css复制到项目的/static/icon/目录下
uni-app框架与资源路径及图标的所有方式引入并使用详解
uni-app框架与资源路径及图标的所有方式引入并使用详解

步骤七、然后在 App.vue 引入该文件
uni-app框架与资源路径及图标的所有方式引入并使用详解
步骤七、使用方法,其中 wy-icon 开头是必须的,wy-icon就是你上面的设置

<text class="wy-icon wy-icon-shouye"></text>

效果:
uni-app框架与资源路径及图标的所有方式引入并使用详解
注意:彩色图标当前对 vue文件有效,控制台会关于backgroud的相关警告,可忽略它。

总结:

  1. vue 文件中使用Font-class类名方式,统一在 App.vue 中引入iconfont.css图标文件,特别强调:目前微信小程序开发工具不支持网络链接,只支持本地方式;打包上线时,只支持在线方式。
<style >/* 每个页面公共css *//* font-class引入时,微信小程序开发工具不支持网络链接,只支持本地方式;打包上线时,只支持在线方式 */ @import url("~@/static/icon/iconfont.css");/* 彩色的图标 */@import url("~@/static/icon/iconfont-app-icon.css");
</style>

模板中使用:

	<text class="wy-icon wy-icon-shouye"></text>
  1. nvue 文件使用Unicode字符编码方式,在每个要使用图标的.nvue文件中分别引入iconfont.ttf图标文件,引入方式具体参见上面 nvue 文件引用字体图标。模板中使用:
<template><view>Goods<text class="iconfont">&#xe61a;</text></view>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469124.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据新视界 -- 大数据大厂之 Impala 性能优化:数据加载策略如何决定分析速度(上)(15/30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Java:JVM

1.JVM内存区域的划分 一个Java写的程序跑起来,就得到了一个Java进程 JVM 上面运行的字节码指令; 进程:操作系统资源分配的基本单位; 内存区域的划分: 1.程序计数器 在内存空间里(比较小的空间),保存了下一个要执行的指令的内存地址(元数据区的地址); 这里的"下一条…

阿里公告:停止 EasyExcel 更新与维护

最近&#xff0c;阿里发布公告通知&#xff0c;将停止对知名 Java Excel 工具库 EasyExcel 的更新和维护。EasyExcel 由阿里巴巴开源&#xff0c;作者是玉箫&#xff0c;在 GitHub 上拥有 30k stars、7.5k forks 的高人气。 据悉&#xff0c;EasyExcel 作者玉箫去年已从阿里离…

安卓智能对讲终端|北斗有源终端|三防对讲机|单兵终端|单北斗

在当今快速发展的通信技术时代&#xff0c;智能对讲手持机已成为众多行业领域中不可或缺的通讯工具。QM240T安卓智能对讲手持机&#xff0c;作为一款集先进技术与实用功能于一身的高端设备&#xff0c;凭借其卓越的性能和多样化的应用特性&#xff0c;正逐步引领对讲机市场的革…

5G智能对讲终端|北斗有源终端|北斗手持机|单兵|单北斗

在当今这个快速发展的数字化时代&#xff0c;5G技术的广泛应用正以前所未有的速度推动着各行各业的变革。作为这一技术浪潮中的重要一环&#xff0c;5G智能终端QM630D凭借其卓越的性能和多样化的功能&#xff0c;在林业、渔业、安保、电力、交通等多个领域展现出了巨大的应用潜…

【计网】数据链路层笔记

【计网】数据链路层 数据链路层概述 数据链路层在网络体系结构中所处的地位 链路、数据链路和帧 链路(Link)是指从一个节点到相邻节点的一段物理线路(有线或无线)&#xff0c;而中间没有任何其他的交换节点。 数据链路(Data Link)是基于链路的。当在一条链路上传送数据时&a…

重学SpringBoot3-整合 Elasticsearch 8.x (二)使用Repository

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 整合 Elasticsearch 8.x &#xff08;二&#xff09;使用Repository 1. 环境准备1.1 项目依赖1.2 Elasticsearch 配置 2. 使用Repository的基本步骤2.1 创建实体类2.2 创…

计算机课程管理:Spring Boot与工程认证的协同创新

3系统分析 3.1可行性分析 通过对本基于工程教育认证的计算机课程管理平台实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于工程教育认证的计算机课程管理平…

<项目代码>YOLOv8 苹果腐烂识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

游戏引擎学习第四天

视频参考:https://www.bilibili.com/video/BV1aDmqYnEnc/ BitBlt 是 Windows GDI&#xff08;图形设备接口&#xff09;中的一个函数&#xff0c;用于在设备上下文&#xff08;device context, DC&#xff09;之间复制位图数据。BitBlt 的主要用途是将一个图像区域从一个地方复…

SPIRE: Semantic Prompt-Driven Image Restoration 论文阅读笔记

这是一篇港科大学生在google research 实习期间发在ECCV2024的语义引导生成式修复的文章&#xff0c;港科大陈启峰也挂了名字。从首页图看效果确实很惊艳&#xff0c;尤其是第三行能用文本调控修复结果牌上的字。不过看起来更倾向于生成&#xff0c;对原图内容并不是很复原&…

如何平滑切换Containerd数据目录

如何平滑切换Containerd数据目录 大家好&#xff0c;我是秋意零。 这是工作中遇到的一个问题。搭建的服务平台&#xff0c;在使用的过程中频繁出现镜像本地拉取不到问题&#xff08;在项目群聊中老是被人出来&#x1f605;&#xff09;原因是由于/目录空间不足导致&#xff0…

Sharding运行模式、元数据、持久化详解

运行模式 单机模式 能够将数据源和规则等元数据信息持久化&#xff0c;但无法将元数据同步至多个Sharding实例&#xff0c;无法在集群环境中相互感知。 通过某一实例更新元数据之后&#xff0c;会导致其他实例由于获取不到最新的元数据而产生不一致的错误。 适用于工程师在本…

基于springboot+小程序的鲜花管理系统(鲜花1)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 本网上花店微信小程序分为管理员还有用户两个权限&#xff0c;管理员可以管理用户的基本信息内容&#xff0c;可以管理公告信息以及鲜花信息&#xff0c;能够与用户进行相互交流等操作&am…

金融学期末速成笔记

【拯救者】金融学速成&#xff08;基础习题&#xff09; 重点: 市场经济是发达的商品经济。在市场经济条件下&#xff0c;市场机制作为资源配置方式&#xff0c;发挥基础性作用。 除具有商品经济的一般特征外&#xff0c;与商品经济相比&#xff0c;市场经济还具有一些新的特征…

后悔没早点知道,Coze 插件 + Cursor 原来可以这样赚钱

最近智能体定制化赛道异常火爆。 打开闲鱼搜索"Coze 定制",密密麻麻的服务报价直接刷屏,即使表明看起来几十块的商家,一细聊,都是几百到上千不等的报价。 有趣的是,这些智能体定制化服务背后,最核心的不只是工作流设计,还有一个被很多人忽视的重要角色 —— …

嵌入式采集网关(golang版本)

为了一次编写到处运行&#xff0c;使用纯GO编写&#xff0c;排除CGO&#xff0c;解决在嵌入式中交叉编译难问题 硬件设备&#xff1a;移远EC200A-CN LTE Cat 4 无线通信模块&#xff0c;搭载openwrt操作系统&#xff0c;90M内存

基于Multisim数字电子秒表0-60S电路(含仿真和报告)

【全套资料.zip】数字电子秒表电路Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 1.秒表最大计时值为60秒&#xff1b; 2. 2位数码管显示&#xff0c;分辨率为1秒&#xff1b; 3.具有清零…

昇思大模型平台打卡体验活动:项目2基于MindSpore通过GPT实现情感分类

昇思大模型平台打卡体验活动&#xff1a;项目2基于MindSpore通过GPT实现情感分类 1. 载入与处理数据集 在情感分类任务中&#xff0c;我们使用了IMDB数据集&#xff0c;首先需要对数据进行加载和处理。由于原数据集没有验证集&#xff0c;我们将训练集重新划分为训练集和验证…

Mac如何实现最简单的随时监测实时运行状态的方法

Mac book有着不同于Windows的设计逻辑与交互设计&#xff0c;使得Mac book有着非常棒的使用体验&#xff0c;但是在Mac电脑的使用时间过长时&#xff0c;电脑也会出现响应速度变慢或应用程序崩溃的情况&#xff0c;当发生的时候却不知道什么原因导致的&#xff0c;想要查询电脑…