移動端開發基礎【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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM