1?絕對路徑和相對路徑
????????在日常開發中,經常會遇到使用絕對路徑還是相對路徑的問題,下面我們介紹下這兩種路徑。
1.1?絕對路徑
????????絕對路徑:是指從項目根目錄開始的完整路徑。它用于指定文件或目錄的確切位置。絕對路徑通常以斜杠(/)開頭,表示從根目錄開始。
<template><!-- 圖片組件引用絕對路徑 --><image src="/static/logo.png" /><!-- 視頻組件引用絕對路徑 --><video src="/static/demo.mp4" /><!-- 其他需要引用資源的媒體組件均可以使用絕對路徑 -->
</template>
<script setup>
// 使用一個圖片資源時,可以使用絕對路徑
uni.getImageInfo({src: "/static/logo.png",
});
// 跳轉頁面時,可以使用絕對路徑
uni.navigateTo({url: "/pages/login/login",
});
</script>
????????這里的/static/logo.png
就是一個絕對路徑,表示圖片文件位于項目根目錄下的 static 文件夾中。絕對路徑的優點是可以直接定位到文件的確切位置,不受當前目錄的影響,通常需要動態傳遞的路徑,我們建議使用絕對路徑。
????????當使用import
語句導入代碼文件或靜態資源時,@/
表示項目根目錄的絕對路徑。
import { add } from "@/common/utils"
1.2?相對路徑
????????相對路徑:在編譯時是指一個文件或目錄相對于另一個文件或目錄的位置,在運行時是指一個文件相對于當前頁面路由的位置(不建議使用運行時的相對路徑,應該優先使用絕對路徑)。
<template><!-- 綁定動態路徑 --><image :src="src" />
</template>
<script setup>
// 編譯時:使用 import 語句相對路徑導入圖片
import logo from "../../static/logo.png";
console.log(logo); // import 語句會在編譯階段根據當前文件位置轉換為絕對路徑// 運行時
// 錯誤的相對路徑用法,image組件會在運行時根據當前頁面路由來轉換該相對路徑,當不同的頁面使用custom組件時,轉換的路徑是不同的
// 應該使用絕對路徑:/static/logo.png,這樣可以確保在任意頁面都訪問到正確的圖片地址
const src = "../../static/logo.png";uni.navigateTo({// 運行時// 錯誤的相對路徑用法,路由會在運行時根據當前頁面路由來轉換該相對路徑// 應該使用絕對路徑:/pages/index/indexurl: "../../pages/index/index",
});
</script>
????????在 uni-app x 項目中,dialogPage 不影響頁面棧和路由地址,所以也不會影響運行時的相對路徑轉換。
2 引用組件
????????傳統vue項目開發,引用組件需要導入 - 注冊 - 使用
三個步驟,如下:
<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>
????????Vue 3.x增加了script setup
特性,將三步優化為兩步,無需注冊步驟,更為簡潔:
<template><view><!-- 2.使用組件 --><uni-rate text="1"></uni-rate></view>
</template>
<script setup>// 1. 導入組件import uniRate from '@/components/uni-rate/uni-rate.vue';
</script>
? ?uni-app
的easycom
機制,將組件引用進一步優化,開發者只管使用,無需考慮導入和注冊,更為高效:
<template><view><!-- 1.使用組件 --><uni-rate text="1"></uni-rate></view>
</template>
<script>
</script>
????????在 uni-app 項目中,頁面引用組件和組件引用組件的方式都是一樣的(可以理解為:頁面是一種特殊的組件),均支持通過?easycom
?方式直接引用。
3 引用js
3.1?js 文件引入
? ?js
文件或script
標簽內(包括 renderjs 等)引入js
文件時,可以使用相對路徑和絕對路徑,形式如下
// 絕對路徑,@指向項目根目錄,在cli項目中@指向src目錄
import add from '@/common/add.js';
// 相對路徑
import add from '../../common/add.js';
- js 文件不支持使用
/
開頭的方式引入
3.2?NPM支持
????????uni-app支持使用npm安裝第三方包。此文檔要求開發者們對npm有一定的了解,因此不會再去介紹npm的基本功能。若項目之前未使用npm管理依賴(項目根目錄下無package.json文件),先在項目根目錄執行命令初始化npm工程:
npm init -y
????????在項目根目錄執行命令安裝npm包:
npm install packageName --save
????????安裝完即可使用npm包,js中引入npm包:
import package from 'packageName'
const package = require('packageName')
- 為多端兼容考慮,建議優先從?uni-app 插件市場獲取插件。直接從 npm 下載庫很容易只兼容H5端。
- 非 H5 端不支持使用含有 dom、window 等操作的 vue 組件和 js 模塊,安裝的模塊及其依賴的模塊使用的 API 必須是 uni-app 已有的?API(兼容小程序 API),比如:支持高德地圖微信小程序 SDK。類似jQuery等庫只能用于H5端。
- node_modules 目錄必須在項目根目錄下。
4 應用css
????????使用@import
語句可以導入外聯樣式表,@import
后跟需要導入的外聯樣式表的相對路徑,用;
表示語句結束。
<style>@import "../../common/uni.css";.uni-card {box-shadow: none;}
</style>
5 引用json
? ?uni-app vue3
?和?uni-app x (HBuilderX 4.25+)
?項目支持引入?json
?文件。js | ts | uts
?文件或?script
?標簽內引入?json
?文件時,可以使用相對路徑或絕對路徑,例如:
// 絕對路徑,@指向項目根目錄,在cli項目中@指向src目錄
import pagesJson from '@/pages.json';
// 相對路徑
import pagesJson from '../../common/pages.json';
????????導入?json
?文件時支持解構,此時會根據導入內容進行搖樹,減小包體積,例如:
import { pages } from '@/pages.json';
????????導入的?json
?文件內部支持條件編譯, 導入的結果是根據條件編譯規則進行處理后的結果,以如下?json
?文件為例:
{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "index"}},// #ifdef APP{"path": "pages/index/app","style": {"navigationBarTitleText": "app"}},// #endif // #ifdef H5 {"path": "pages/index/web","style": {"navigationBarTitleText": "web"}}// #endif ],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}
- 在?
App
?平臺導入的結果中,pages
?下只包含?path
?為?pages/index/index
?和?pages/index/app
?的對象。 - 在?
Web
?平臺導入的結果中,pages
?下只包含?path
?為?pages/index/index
?和?pages/index/web
?的對象。
6 引用靜態資源
6.1?模板內引入靜態資源
? ?template
內引入靜態資源,如image
、video
等標簽的src
屬性時,可以使用相對路徑或者絕對路徑,形式如下
<!-- 絕對路徑,/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 標簽不可使用相對路徑
6.2?css 引入靜態資源
? ?css
文件或style標簽
內引入css
文件時(scss、less 文件同理),可以使用相對路徑或絕對路徑(HBuilderX 2.6.6
)
/* 絕對路徑 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相對路徑 */
@import url('../../common/uni.css');
????????自HBuilderX 2.6.6
起支持絕對路徑引入靜態資源,舊版本不支持此方式。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)
- web 平臺,小于 4kb 會轉 base64,超出 4kb 時不轉。
- 其余平臺不會轉 base64
6.3?js/uts 引入靜態資源
????????js/uts中引入靜態資源,多用于靜態資源存放在非?static
?目錄中的情況,可以使用 import 引入相對路徑或絕對路徑。例:有如下目錄結構 ,在static 和頁面文件夾下分別有靜態資源
├── pages
│ └── index
│ │── index.uvue
│ └── icon.png
└── static └── logo.png
????????正常情況下,如 image 的 src 中直接引入 static 中 logo.png ,可以使用相對路徑或絕對路徑
<!-- /pages/index/index.vue -->
<template><view class="content"><image src="../../static/logo.png" /><image src="/static/logo.png" /><image src="@static/logo.png" /></view>
</template>
????????而引入 index 下的 icon.png 不管是相對還是絕對路徑,都無法顯示,所以這時候需要在 js/uts 中 使用 import 來引入
<!-- /pages/index/index.vue -->
<template><view class="content"><image :src="src" /></view>
</template><script>
// 使用 import 引入靜態資源,并在 data 中賦值引用
import icon_src from './icon.png'
export default { data() {return { src: icon_src}},
}
</script>
6.4?靜態資源引入注意事項
????????通常項目中規定根目錄下的 static 為靜態資源文件夾(目前暫不支持修改),資源存放此處后,可在任意文件直接使用相對或者絕對路徑引用,具體參考上述模板?css/js/uts
?中引入靜態資源的說明。而非?static
?目錄的靜態資源,不支持直接引用,需要在?js/uts
?中使用?import
?來引入,確保路徑正確。綜上所述,我們總結一下靜態資源引用的注意事項:
- 在模板或者?
css
?文件使用?static
?目錄中的靜態資源,無需特殊處理,可直接通過相對路徑或者絕對路徑直接引入。 - 在?
js/uts
?文件使用靜態資源,需要使用?import
?來引入。 - 不管在任何文件引入非?
static
?目中的靜態資源,均需在?js/uts
?文件使用?import
?來引入。
6.5?靜態資源編譯規則
????????項目?static
?目錄下的靜態資源,會被直接拷貝到編譯后目錄的?static
?目錄下。非static
目錄下的靜態資源在vue3
下,被引用的資源會編譯到?assets
?目錄下,并重新命名為?原始名稱+內容hash
,如:logo.png
?會編譯為類似?logo.cfd8fa94.png
?的名稱。如果該靜態資源未被引用,則不會被編譯器處理。非static
目錄下的靜態資源在vue2
不同平臺下,編譯規則有些不同(自?HBuilderX 4.0
?起已和?vue3
?保持一致):
- web: 靜態資源將會編譯到?
static -> img
?下, 如小于 4k 則轉為base64 - 小程序:靜態資源將會編譯到資源同名文件下,如小于 40kb 則轉base64
- app: 靜態資源將會編譯到資源同名文件下
7 引用原生插件
????????uni-app在App側的原生擴展插件,支持使用java、object-c等原生語言編寫。從HBuilderX 3.6起,新增支持了使用uts來開發原生插件。為了和uts插件區別,之前的App原生插件
,改名為App原生語言插件
。
7.1?uni.requireNativePlugin(PluginName)
????????引入 App 原生語言插件。平臺差異說明:App。自 HBuilderX 1.4 版本起,uni-app 支持引入原生插件,使用方式如下:
const PluginName = uni.requireNativePlugin(PluginName); // PluginName 為原生插件名稱
????????不管是vue文件還是nvue文件,都是這個API。
7.2?內置原生插件
????????內置原生插件,uni-app已默認集成,支持直接在內置基座運行。僅在nvue頁面,支持引入BindingX,animation, DOM.addRule等。在vue頁面,支持引入clipboard,storage,stream,deviceInfo等。使用方式:可通過uni.requireNativePlugin
直接使用。
<template><view><text class="my-iconfont"></text></view></template><script>export default{beforeCreate() {const domModule = uni.requireNativePlugin('dom')domModule.addRule('fontFace', {'fontFamily': "myIconfont",'src': "url('http://at.alicdn.com/t/font_2234252_v3hj1klw6k9.ttf')"});}}</script><style>.my-iconfont {font-family:myIconfont;font-size:60rpx;color: #00AAFF;}</style>
7.3?本地插件(非內置原生插件)
????????本地插件,是uni-app項目nativeplugins目錄(目錄不存在則創建)下的原生插件。獲取本地原生插件:
- 方式一:插件市場下載免費uni-app原生插件。DCloud 插件市場
- 方式二:開發者自己開發uni-app原生插件
????????在免費的插件詳情頁中點擊“下載for離線打包”下載原生插件(zip格式),解壓到HBuilderX的uni-app項目下的“nativeplugins”目錄(如不存在則創建),以下是“DCloud-RichAlert”插件舉例,下載解壓后目錄結構如下: