宁波网站建设策划公司排名,电子商务网站 整站 psd,建站系统下载 discuz,天津房地产网站建设1 绝对路径和相对路径 在日常开发中#xff0c;经常会遇到使用绝对路径还是相对路径的问题#xff0c;下面我们介绍下这两种路径。
1.1 绝对路径 绝对路径#xff1a;是指从项目根目录开始的完整路径。它用于指定文件或目录的确切位置。绝对路径通常以斜杠#xff08;/经常会遇到使用绝对路径还是相对路径的问题下面我们介绍下这两种路径。
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 :srcsrc /
/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项目开发引用组件需要导入 - 注册 - 使用三个步骤如下
templateview!-- 3.使用组件 --uni-rate text1/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特性将三步优化为两步无需注册步骤更为简洁
templateview!-- 2.使用组件 --uni-rate text1/uni-rate/view
/template
script setup// 1. 导入组件import uniRate from /components/uni-rate/uni-rate.vue;
/script uni-app的easycom机制将组件引用进一步优化开发者只管使用无需考虑导入和注册更为高效
templateview!-- 1.使用组件 --uni-rate text1/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后跟需要导入的外联样式表的相对路径用;表示语句结束。
styleimport ../../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 classlogo src/static/logo.png/image
image classlogo src/static/logo.png/image
!-- 相对路径 --
image classlogo 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 v2web 平台小于 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 --
templateview classcontentimage src../../static/logo.png /image src/static/logo.png /image srcstatic/logo.png //view
/template 而引入 index 下的 icon.png 不管是相对还是绝对路径都无法显示所以这时候需要在 js/uts 中 使用 import 来引入
!-- /pages/index/index.vue --
templateview classcontentimage :srcsrc //view
/templatescript
// 使用 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 则转base64app: 静态资源将会编译到资源同名文件下
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页面支持引入BindingXanimation DOM.addRule等。在vue页面支持引入clipboardstoragestreamdeviceInfo等。使用方式可通过uni.requireNativePlugin直接使用。
templateviewtext classmy-iconfont#xe85c;/text/view/templatescriptexport default{beforeCreate() {const domModule uni.requireNativePlugin(dom)domModule.addRule(fontFace, {fontFamily: myIconfont,src: url(http://at.alicdn.com/t/font_2234252_v3hj1klw6k9.ttf)});}}/scriptstyle.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”插件举例下载解压后目录结构如下
