移动端开发基础【6】Uniapp项目的目录结构和资源路径说明

一、uniapp项目的目录结构

 

需要注意的是：

1. static目录下的js文件不会被编译，如果里面有es6的代码，不经过转换直接运行，在手机上会报错。
2. 建议在static目录下不要放一些css、less/scss等的资源文件，可以将其放在专门建的公共样式文件目录中。

二、资源路径说明

1.模板内引入静态资源

在template标签内引入static目录下的静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径。

例如：绝对路径

<image class=”logo”src=”/static/logo.png”</image>

<image class=”logo”src=”@/static/logo.png”</image>

相对路径<image class=”logo”src=”../../static/logo.png”</image>

需要注意的是：

(1).@开头的绝对路径以及相对路径会经过base64转换规则校验。但是自HBuilderX 2.6.6-alpha起template内支持@开头路径引入资源，以前的版本不支持。

(2).在非h5平台引入的静态资源，都不会转为base64.

(3).支付宝小程序组件内image标签不可使用相对路径。

2.js文件引入

Js文件或script标签内引入js文件时，可以使用相对路径和绝对路径。

(1)绝对路径，在js文件中，不支持使用 / 开头的方式引入，可以使用@开头的方式，它指向项目根目录，

import add from '@/common/add.js'

(2)相对路径import add from '../../common/add.js'

3.css引入静态资源

css文件或style标签内引入css文件时（scss、less文件同理），只能使用相对路径。但是自HBuilderX 2.6.6-alpha起支持绝对路径引入静态资源，旧版本不支持此方式。

（1）绝对路径：

@import url('/common/uni.css');

@import url('@/common/uni.css');

（2）相对路径

@import url('../../common/uni.css');

      css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端css文件不允许引用本地文件。

（1）绝对路径

background-image: url(/static/logo.png);

background-image: url(@/static/logo.png);

（2）相对路径

background-image: url(../../static/logo.png);

需要注意的是：

（1）@开头的绝对路径以及相对路径会经过base64转换规则校验

（2）不支持本地图片的平台，小于40kb，一定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）

（3）h5平台，小于4kb会转base64，超出4kb时不转。

（4）其余平台不会转base64