uni-app(3):互相引用

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-appeasycom機制,將組件引用進一步優化,開發者只管使用,無需考慮導入和注冊,更為高效:

<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內引入靜態資源,如imagevideo等標簽的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.6template內支持@開頭路徑引入靜態資源,舊版本不支持此方式
  • App 平臺自HBuilderX 2.6.9template節點中引用靜態資源文件時(如:圖片),調整查找策略為【基于當前文件的路徑搜索】,與其他平臺保持一致
  • 支付寶小程序組件內 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">&#xe85c;</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”插件舉例,下載解壓后目錄結構如下:

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/906683.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/906683.shtml
英文地址,請注明出處:http://en.pswp.cn/news/906683.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

python與flask框架

一、理論 Flask是一個輕量級的web框架&#xff0c;靈活易用。提供構建web應用所需的核心工具。 Flask依賴python的兩個庫 Werkzeug&#xff1a;flask的底層庫&#xff0c;提供了WSGI接口、HTTP請求和響應處理、路由等核心功能。 Jinja2&#xff1a;模板引擎&#xff0…

esp32-idf框架學習筆記/教程

esp32型號: 環境搭建 安裝:就按這個來,別的試了好多次都不行,這個一次成功!!!! vscode下ESP32開發環境配置&#xff08;100%成功&#xff09;_嗶哩嗶哩_bilibili esp芯片的兩種模式: ESP32 固件燒錄教程_嗶哩嗶哩_bilibili 1.運行模式 2.下載模式 esp32s3程序下載 1.數據…

VKontakte(VK)注冊教程

VKontakte&#xff08;簡稱VK&#xff09;是俄羅斯最大的社交網絡平臺&#xff0c;類似于Facebook&#xff0c;用戶可以通過它進行社交、分享圖片、視頻、音樂等內容&#xff0c;并參與各類社群討論&#xff0c;是與俄羅斯及其他東歐地區的朋友建立聯系的便捷平臺。對于做俄羅斯…

STM32+ESP8266+ONENET+微信小程序上傳數據下發指令避坑指南

之前只做過類似的但是以為這種爛大街的功能應該不難結果還是踩了不少坑&#xff0c;記錄幾個需要注意的點 首先貼一個非常有用的視頻&#xff0c;里面講的很詳細&#xff0c;給的資料也很全【【新版OneNet云平臺】STM32ESP8266上傳數據&#xff0c;簡單易上手&#xff01;】 h…

【知識點】關于vue3中markRow、shallowRef、shallowReactive的了解

首先我們先了解一下這三個函數的定義以及區別 markRow 定義&#xff1a; 一個用于標記對象為非響應式的工具函數 shallowRef 定義&#xff1a; 一個用于創建淺層響應式引用的函數&#xff0c;只對 .value 本身進行響應式處理&#xff0c;不會遞歸地將 .value 指向的對象或…

后端開發實習生-抖音生活服務

職位描述 ByteIntern&#xff1a;面向2026屆畢業生&#xff08;2025年9月-2026年8月期間畢業&#xff09;&#xff0c;為符合崗位要求的同學提供轉正機會。 團隊介紹&#xff1a;生活服務業務依托于抖音、抖音極速版等平臺&#xff0c;致力于促進用戶與本地服務的連接。過去一…

OceanBase 共享存儲:云原生數據庫的存儲

目錄 探會——第三屆 OceanBase 開發者大會 重磅發布&#xff1a;OceanBase 4.3 開發者生態全面升級 實戰演講&#xff1a;用戶案例與行業落地 OceanBase 共享存儲架構解析 什么是共享存儲架構&#xff1f; 云原生數據庫的架構 性能、彈性與多云的統一 為何OceanBase能…

C++ 結構體封裝模式與 Promise 鏈式調用:設計思想的異曲同工

C 結構體封裝模式與 Promise 鏈式調用&#xff1a;設計思想的異曲同工 在軟件開發中&#xff0c;我們常常追求代碼的可維護性、可擴展性和可讀性。不同的編程語言和場景下&#xff0c;雖然實現方式各異&#xff0c;但背后的設計思想往往存在著奇妙的相似性。本文將探討 C 中結…

【Go】1、Go語言基礎

前言 本系列文章參考自稀土掘金上的 【字節內部課】公開課&#xff0c;做自我學習總結整理。 Go語言的特點 Go語言由Google團隊設計&#xff0c;以簡潔、高效、并發友好為核心目標。 具有以下優點&#xff1a; 語法簡單、學習曲線平緩&#xff1a;語法關鍵字很少&#xff0c;且…

AI時代的新營銷范式:生成式引擎優化(GEO)的崛起——品牌如何被大模型收錄

在數字化浪潮席卷全球的今天&#xff0c;我們正站在一個前所未有的歷史拐點。如果說過去二十年&#xff0c;搜索引擎優化&#xff08;SEO&#xff09;重塑了企業與消費者的連接方式&#xff0c;那么未來二十年&#xff0c;生成式引擎優化&#xff08;GEO&#xff09;將徹底顛覆…

實用藍牙耳機哪款好?先做好使用場景分析!

市面上的藍牙耳機款式繁多&#xff0c;618到來之際&#xff0c;消費者如何選擇適合自己的藍牙耳機&#xff1f;實用藍牙耳機哪款好&#xff1f;關鍵在于做好使用場景分析&#xff01;今天&#xff0c;就帶大家結合不同的使用場景&#xff0c;分享三款倍思音頻的精品藍牙耳機。 …

PTA刷題筆記3(微難,有詳解)

7-15 計算圓周率 代碼如下&#xff1a; #include <stdio.h>int main() {double threshold;scanf("%lf", &threshold);double pi_over_2 1.0; // π/2的初始值&#xff08;第一項1&#xff09;double term 1.0; // 當前項的值int n 1; …

基于SpringBoot+Vue的社區醫院信息平臺設計與實現

項目背景與概述 隨著醫療健康信息化的發展&#xff0c;社區醫院的管理逐漸由傳統的手工模式轉向信息化管理。為了提高醫院的管理效率、減少人工操作、提升服務質量&#xff0c;開發一個高效且實用的社區醫院信息平臺顯得尤為重要。本系統基于Spring Boot框架與MySQL數據庫設計…

舊物回收小程序:讓閑置煥發光彩,為生活增添價值

你是否常常為家中堆積如山的閑置物品而煩惱&#xff1f;那些曾經心愛的物品&#xff0c;如今卻成了占據空間的“雞肋”&#xff0c;丟棄可惜&#xff0c;留著又無處安放。別擔心&#xff0c;一款舊物二手回收小程序將為你解決這一難題&#xff0c;讓閑置物品重新煥發光彩&#…

掩碼與網關是什么?

1. 子網掩碼&#xff08;Subnet Mask&#xff09; 作用&#xff1a;劃分“小區”范圍 想象你住在一個小區&#xff08;子網&#xff09;里&#xff1a; 小區門牌號 IP地址&#xff08;如 192.168.1.10&#xff09; 小區邊界 子網掩碼&#xff08;如 255.255.255.0&#xf…

【Bluedroid】藍牙HID Host disconnect流程源碼解析

本文基于 Android 藍牙 HID&#xff08;Human Interface Device&#xff09;Host 模塊的源碼&#xff0c;深入解析 HID 設備斷開連接的完整流程。重點覆蓋從應用層觸發斷開請求&#xff0c;到 BTIF 層&#xff08;接口適配層&#xff09;狀態校驗與異步傳遞、BTA 層&#xff08…

python定時刪除指定索引

腳本 import logging from datetime import datetime, timedelta from elasticsearch import Elasticsearch# 配置日志記錄 logging.basicConfig(filenamedelete_uat_indices.log,levellogging.INFO,format%(asctime)s - %(levelname)s - %(message)s )# Elasticsearch 集群的…

GESP編程等級認證C++三級7-字符、字符數組與字符串2

2.3 用字符串定義字符數組的好處 使用字符串定義字符數組需要額外考慮其末尾的“\0”&#xff0c;為什么還要使用這種看上去“麻煩”的方法呢&#xff1f;從圖5所示的代碼就能看出原因。 圖5 用字符串定義字符數組好處的代碼 從圖5中可以看出&#xff0c;a4是用字符串進行初始…

EasyRTC音視頻實時通話WebP2P技術賦能的全場景實時通信解決方案

一、技術背景 在數字化浪潮席卷全球的當下&#xff0c;實時通信技術憑借其即時性、高效性的優勢&#xff0c;已然成為推動各行業創新發展的核心動能。EasyRTC深度融合WebP2P技術&#xff0c;構建起去中心化的通信架構&#xff0c;實現了低延遲、高可靠的數據傳輸&#xff0c;為…

Claude MCP協議從入門到精通

目錄 一、什么是MCP協議? 二、Function Calling 和 MCP 協議的區別? 三、MCP相關網站 3.1 官方文檔 3.2 綜合型 MCP 資源聚合平臺 3.3 垂直領域 MCP Server 工具 3.4 開發者工具與社區 3.5 企業級服務與數據庫集成 3.6 新手友好型平臺 四、MCP 架構 4.1. MCP Hosts…