做网站新闻移动动态,wordpress柒比貳,网站建设完成后怎么上传服务器,正安网站建设文章目录 一、前言#x1f343;二、绝对路径和相对路径2.1 绝对路径2.2 相对路径 三、引用组件四、引用js4.1 js 文件引入4.2 NPM支持 五、引用css六、引用json6.1 json文件引入 七、引用静态资源7.1 模板内引入静态资源7.2 css 引入静态资源7.3 js/uts 引入静态资源7.4 静态资… 文章目录 一、前言二、绝对路径和相对路径2.1 绝对路径2.2 相对路径 三、引用组件四、引用js4.1 js 文件引入4.2 NPM支持 五、引用css六、引用json6.1 json文件引入 七、引用静态资源7.1 模板内引入静态资源7.2 css 引入静态资源7.3 js/uts 引入静态资源7.4 静态资源引入注意事项7.5 静态资源编译规则 八、总结uni-app 跨端开发系列 一、前言
uni-app 是一个使用 Vue.js 开发所有前端应用的框架开发者编写一套代码可发布到 iOS、Android、Web响应式、以及各种小程序微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝、快应用等多个平台。
uni-app 在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。 从下面 uni-app 功能框架图可看出 uni-app 在跨平台的过程中不牺牲平台特色可优雅的调用平台专有能力真正做到海纳百川、各取所长。 今日探讨主题uni-app 资源引用绝对路径和相对路径 的问题。
二、绝对路径和相对路径
在日常开发中经常会遇到使用绝对路径还是相对路径的问题下面我们介绍下这两种路径。
2.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 2.2 相对路径
相对路径在编译时是指一个文件或目录相对于另一个文件或目录的位置在运行时是指一个文件相对于当前页面路由的位置不建议使用运行时的相对路径应该优先使用绝对路径。
例如 组件 components/custom/custom.vue
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 不影响页面栈和路由地址所以也不会影响运行时的相对路径转换。 三、引用组件
传统 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. 注册组件}
/scriptVue 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;
/scriptuni-app 的 easycom 机制将组件引用进一步优化开发者只管使用无需考虑导入和注册更为高效
templateview!-- 1.使用组件 --uni-rate text1/uni-rate/view
/template
script
/script在 uni-app 项目中页面引用组件和组件引用组件的方式都是一样的可以理解为页面是一种特殊的组件均支持通过 easycom 方式直接引用。
四、引用js
4.1 js 文件引入
js 文件或 script 标签内包括 renderjs 等引入 js 文件时可以使用相对路径和绝对路径形式如下
// 绝对路径指向项目根目录在cli项目中指向src目录
import add from /common/add.js;
// 相对路径
import add from ../../common/add.js;注意js 文件 不支持 使用 / 开头的方式引入。 4.2 NPM支持
uni-app支持使用 npm 安装第三方包。
此文档要求开发者们对 npm 有一定的了解因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm请翻阅 NPM 官方文档进行学习。
初始化npm工程 若项目之前未使用 npm 管理依赖项目根目录下无 package.json 文件先在项目根目录执行命令初始化 npm 工程
npm init -ycli 项目默认已经有 package.json 了。HBuilderX创建的项目默认没有需要通过初始化命令来创建。
安装依赖 在项目根目录执行命令安装 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 目录必须在项目根目录下。不管是 cli 项目还是 HBuilderX 创建的项目。 关于ui库的获取详见多端UI库。
五、引用css
使用 import 语句可以导入外联样式表import 后跟需要导入的外联样式表的相对路径用;表示语句结束。
示例代码
styleimport ../../common/uni.css;.uni-card {box-shadow: none;}
/style
六、引用json
6.1 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 的对象。
七、引用静态资源
7.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 标签不可使用相对路径
7.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);Tips
引入字体图标请参考字体图标。开头的绝对路径以及相对路径会经过 base64 转换规则校验。不支持本地图片的平台小于 40kb一定会转 base64。共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2。web 平台小于 4kb 会转 base64超出 4kb 时不转。其余平台不会转 base64。
7.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}},
}
/script7.4 静态资源引入注意事项
通常项目中规定根目录下的 static 为静态资源文件夹目前暂不支持修改资源存放此处后可在任意文件直接使用相对或者绝对路径引用,具体参考上述模板 css/js/uts 中引入静态资源的说明。
而非 static 目录的静态资源不支持直接引用需要在 js/uts 中使用 import 来引入确保路径正确。
综上所述我们总结一下静态资源引用的注意事项
在模板或者 css 文件使用 static 目录中的静态资源无需特殊处理可直接通过相对路径或者绝对路径直接引入。在 js/uts 文件使用静态资源需要使用 import 来引入。不管在任何文件引入非 static 目中的静态资源均需在 js/uts 文件使用 import 来引入。
7.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: 静态资源将会编译到资源同名文件下。
八、总结
东西还是蛮多的一不小心就入坑。 uni-app 跨端开发系列
一、uni-app 组成和跨端原理 二、uni-app 各端差异注意事项 三、uni-app 离线本地存储方案 四、uni-app UI库、框架、组件选型指南 五、uni-app 蓝牙开发 六、uni-app 导航栏开发指南 七、uni-app 原生控件层级过高无法覆盖的解决方案 八、uni-app 设置缓存过期时间 九、uni-app H5端使用注意事项 十、uni-app之web-view组件 postMessage 通信【跨端开发系列】 十一、uni-app 全面屏、刘海屏适配iphoneX适配及安全区设置【跨端开发系列】 十二、uni-app Android平台上架要求的隐私政策提示配置方法【跨端开发系列】 十三、uni-app 跨端开发精美开源UI框架推荐 十四、uni-app 中使用微信小程序第三方 SDK 及资源汇总 十五、uni-app 资源引用绝对路径和相对路径方法汇总
