一、uniapp項目的目錄結構
需要注意的是:
- static目錄下的js文件不會被編譯,如果里面有es6的代碼,不經過轉換直接運行,在手機上會報錯。
- 建議在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