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

uni-app 框架与资源路径

不需要专门去学习小程序的语法，uni-app使用的是vue的语法，不是小程序自定义的语法。

搜索框：有疑问直接搜索框输入，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目录放 js 、 css 、 less/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>

注意

• @ 开头的绝对路径以及相对路径会经过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字体图标

下载图标库，进入阿里巴巴矢量图标库

下载完成点击.html

方式一：Unicode 引用步骤

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

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

把 iconfont.css 和 iconfont.ttf 文件拷贝到 /static/icon/ 目录下

在 App.vue文件的 <style> 标签下完成 引用.ttf字体文件 和 定义 iconfont 的样式，字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。网络路径必须加协议头 https 。

阿里 Unicode 在线图标链接复制如下（一定不要忘记加 https://）：

挑选相应图标并获取字体编码，应用于页面，注意：类名是 iconfont ，字体编码 &# 开头 ; 结尾。

效果：

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

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

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

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

阿里Font class在线图标链接复制如下（一定不要忘记加 https://）微信小程序不支持网络链接，只支持本地方式：

挑选相应图标并获取类名，应用于 .vue 页面,注意：iconfont和 icon-haoping 是iconfont.css文件声明的， icon-haoping 是具体的图标类名。进行iconfont.css文件进行修改，删除下图中两行，

修改上图中的base64位后面的format(‘woff2’),改为format(‘woff2’);以分好结尾，并且前面加上src:

最后几行url不需要也要删除

效果：

方式三：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>

效果图：

方式四：彩色图标 iconfont

步骤一、进入阿里巴巴矢量图标库，添加图标到项目，然后下载至本地

解压后的本地文件如下，其中eot文件很重要

如果没有eot文件则进入icon的项目设置，勾选eot选项后重新下载

就会出现eot文件

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

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

	npm install -g iconfont-tools

第四步、在控制台中输入指令：iconfont-tools，按回车执行指令，根据提示输入对应的值， 如下图所示：

第五步、 执行完后，就会多出来一个 iconfont-app 的文件夹

步骤六、进入 iconfont-app 文件夹，将其中的iconfont-app-icon.css复制到项目的/static/icon/目录下

步骤七、然后在 App.vue 引入该文件

步骤七、使用方法，其中 wy-icon 开头是必须的，wy-icon就是你上面的设置

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

效果：

注意：彩色图标当前对 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>

2. nvue 文件使用Unicode字符编码方式，在每个要使用图标的.nvue文件中分别引入iconfont.ttf图标文件，引入方式具体参见上面 nvue 文件引用字体图标。模板中使用：

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