首页 前端知识 uni静态资源引入及css图片图标引用规范

uni静态资源引入及css图片图标引用规范

2024-03-31 09:03:06 前端知识 前端哥 486 243 我要收藏

1、页面组件引入

单页面中的组件引入需经过导入——注册——使用三个步骤;

<template>
	<view>
		<!-- 3.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	export default {
		components: { uniRate } // 2. 注册组件
	}
</script>

2、js的引入

相对路径和绝对路径两种方式,建议使用@的绝对路径引入方式;
公共自用封装js

//绝对路径
import add from '@/common/util.js';
//相对路径
import add from '../../common/util.js';

npm引入,以jquery为例

npm install jquery --save
//安装指定版本
npm install jquery@3.0.0 --save

注意:js不支持使用斜杠/开头的方式引入
备注:可在npm官网中查找包名

3、静态资源的引入

图片的引入,推荐使用@的绝对路径引入方式,可适配h5,app,小程序

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

注意事项:

  • @开头的绝对路径以及相对路径会经过 base64 转换规则校验
  • 引入的静态资源在非 web 平台,均不转为 base64。
  • web 平台,小于 4kb 的资源会被转换成 base64,其余不转
  • 自HBuilderX 2.6.6起template内支持@开头路径引入静态资源,旧版本不支持此方式
  • App 平台自HBuilderX 2.6.9起template节点中引用静态资源文件时(如:图片),调整查找策略为【基于当前文件的路径搜索】,与其他平台保持一致
  • 支付宝小程序组件内 image 标签不可使用相对路径

css引入,推荐使用@的绝对路径引入

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

本地图片,推荐使用@开头的绝对路径,或~@开头的绝对路径

/*本地图片*/
.test2 {
	background-image: url('~@/static/logo.png');
}

备注:

  • 自HBuilderX 2.6.6起支持绝对路径引入静态资源,旧版本不支持此方式
  • 微信小程序不支持相对路径

字体图标的引入

推荐使用~@开头的绝对路径

@font-face {
	font-family: test1-icon;
	src: url('~@/static/iconfont.ttf');
}

1111

文章涉及内容官网参考

npm官网
互相引入uni官网参考
背景图片引入uni官网参考

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4295.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!