当前位置: 首页 > news >正文

玩转 uni-app 静态资源 static 目录的条件编译

一. 前言

老生常谈,了解 uni-app 的开发都知道,uni-app 可以同时支持编译到多个平台,如小程序、H5、移动端 App 等。它的多端编译能力是 uni-app 的一大特点,让开发者可以使用同一套代码基于 Vue.js 的语法编写程序,然后通过 uni-app 的编译工具将代码转换成适用于不同平台的代码,极大地提高了开发效率和跨平台开发的便捷性。

之前的文章让我们清晰的认识到 uni-app 的条件编译知识,以及如何进行自定义平台的条件编译。后来好多人发私信说 static 目录如何更有效的进行条件编译,因为对小程序来讲,打包后的体积大小还是至关重要的。

本篇文章,我们就来讲述一下 uni-app 的 static 目录,以及它的条件编译,同时也包括自定义编译平台下对 static 目录的编译。

二. 静态资源的条件编译

1. 静态资源的条件编译需求

在进行对 static 目录的编译策略之前,我们必须先了解一下静态资源的条件编译,由于 uni-app 是跨平台的开发框架,所以静态资源的条件编译十分重要,那么什么场景下需要对静态资源进行条件编译呢?

一张图带大家了解一下在 uni-app 中静态资源的编译需求:

uni-app 静态资源条件编译的需求主要是为了适应不同平台不同功能模块主题定制性能优化等方面的需求,通过灵活地选择加载不同的静态资源,实现在不同场景下的最佳展示效果和性能表现。

2. static 目录在 uni-app 中的作用

在 uni-app 中,static 目录是用来存放静态资源文件的目录,主要包括图片、字体、视频、音频等静态资源文件,并且 static 目录下的文件不会被编译处理,直接输出到打包后的目标目录,可以在页面中直接引用这些静态资源文件。

以下是 static 目录在 uni-app 中的主要作用:

  • 存放静态资源文件static 目录是用来存放项目中各种静态资源文件的地方,如图片、字体、视频、音频等。可以直接将这些静态资源文件放在 static 目录下,供全局使用。

  • 不经过 webpack 处理static 目录下的文件在编译打包过程中不会经过 webpack 处理,而是直接拷贝到输出目录。确保静态资源文件原始的路径结构和内容不受影响。

3. 为什么需要 static 目录

在 uni-app 中,编译器根据 pages.json 扫描需要编译的页面,并根据页面引入的 js、css 合并打包文件。对于本地的图片、字体、视频、文件等资源,如果可以直接识别,那么也会把这些资源文件打包进去,但如果这些资源以变量的方式引用,比如:<image :src="url"></image>,甚至可能有更复杂的函数计算,此时编译器无法分析。

那么有了 static 目录,编译器就会把这个目录整体复制到最终编译包内。这样只要运行时确实能获取到这个图片,就可以显示。非 static 目录下的文件(vue 组件、js、css 等)只有被引用时,才会被打包编译。

注意:

  1. 如果 static 里有一些没有使用的废文件,也会被打包到编译包里,造成体积变大。

  2. css、less/scss 等资源不要放在 static 目录下,建议这些公用的资源放在 src 自建的目录下,比如:assets 目录。

另外注意,static 目录支持特殊的平台子目录,比如 web、app、mp-weixin 等,这些目录存放专有平台的文件,这些平台的文件在打包其他平台时不会被包含,这些在后面会详细说明。

4. static 目录和 App 原生资源目录

uni-app 支持 App 原生资源目录 nativeResources,其中包括 assetsres 等目录,但和 static 目录没有关系。

static 目录下的文件,在 app 第一次启动时,解压到了 app 的外部存储目录(external-path)。因此在这里需要注意控制 static 目录的大小,太大的 static 目录和太多文件,会造成 App 安装后第一次启动变慢。

三. static 目录的条件编译方法

在 uni-app 中,static 目录的条件编译方法通常有以下几种,根据不同的条件,在编译时选择性地处理部分代码或资源,以达到更灵活的应用场景需求。

1. 创建多平台 static 目录

在 static 目录下新建不同平台的专有目录,专有目录下的静态资源只有在特定平台才会编译进去。目录名称均为小写,如下所示常用的名称定义:

  • app:App 端

  • web:H5 端和 web 端

  • mp-weixin:微信小程序端

  • mp-alipay:支付宝小程序端

如以下目录结构,a.png 只有在 APP 平台才会被编译,b.png 在 H5 平台和 Web 平台被编译,c.png 在微信小程序平台被编译,d.png 在阿里云小程序平台被编译,而 e.png 会在所有平台都会被编译。

┌─static
│  ├─app
│  │  └─a.png
│  ├─web
│  │  └─b.png
│  ├─mp-weixin
│  │  └─c.png
│  ├─mp-alipay
│  │  └─d.png
│  └─e.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json

以上的平台示例只是一部分,其余的平台请参考官方文档:static 目录的条件编译icon-default.png?t=O83Ahttps://uniapp.dcloud.net.cn/tutorial/platform.html#static

2. 使用分包编译

在分包下建立 static 目录,同时在 pages.json 中配合使用条件编译可以实现 static 的条件编译。

因为编译器根据 pages.json 扫描需要编译的页面,编译时将静态资源打包到对应的子包中,减少主包的体积大小,这种方式在小程序分包中尤其常见。

{"pages": [{"path": "pages/index"}],"subPackages": [{"root": "pagesCustom","pages": [{"path": "pages/index"}]}]
}

通过以上条件编译方法,我们可以根据需求对 static 目录中的静态资源进行条件性处理,实现更加灵活和定制化的开发和部署。在实际应用中,根据具体情况选择合适的方法,以达到最佳的效果。

四. 总结

通过这篇文章,相信大家都了解 static 目录的作用以及 static 目录的条件编译方法,在实际应用中,根据具体情况选择合适的方法,相信大家在 uni-app 条件编译的实践中有一个快乐的编码体验。

资源文档

uni-app 工程目录简介icon-default.png?t=O83Ahttps://uniapp.dcloud.net.cn/tutorial/project.html

uni-app static 目录的条件编译icon-default.png?t=O83Ahttps://uniapp.dcloud.net.cn/tutorial/platform.html#static

 关于uni-app条件编译的其他文章

uni-app 初识条件编译,了解多端部署icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/143951074

uni-app 玩转条件编译:自定义平台的条件编译实战详解icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/143951206

相关文章:

玩转 uni-app 静态资源 static 目录的条件编译

一. 前言 老生常谈&#xff0c;了解 uni-app 的开发都知道&#xff0c;uni-app 可以同时支持编译到多个平台&#xff0c;如小程序、H5、移动端 App 等。它的多端编译能力是 uni-app 的一大特点&#xff0c;让开发者可以使用同一套代码基于 Vue.js 的语法编写程序&#xff0c;然…...

Docker 容器隔离关键技术:Seccomp

Docker 容器隔离关键技术&#xff1a;Seccomp 在 Docker 容器中&#xff0c;Seccomp&#xff08;Secure Computing Mode&#xff09; 是一种内核安全机制&#xff0c;用来限制容器内的程序可以调用哪些系统调用&#xff08;Syscalls&#xff09;。通过列清单的方式&#xff0c…...

【大模型】深度解析 NLP 模型5大评估指标及 应用案例:从 BLEU、ROUGE、PPL 到METEOR、BERTScore

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;无论是机器翻译、文本生成&#xff0c;还是问答系统开发&#xff0c;模型性能评估指标始终是开发者绕不开的工具。BLEU、ROUGE、PPL&#xff08;困惑度&#xff09;、METEOR 和 BERTScore 是五个最具代表性的指标&am…...

LinuxC高级

gdb调试工具 gdb调试的作用 gdb用于调试代码中逻辑错误&#xff0c;而非语法错误 gdb调试流程 生成可以使用gdb调试的执行文件 gcc -g xxx.c ---> 生成的文件可以使用gdb调试 进入gdb工具 gdb 可执行文件 ---> 使用gdb工具开始调试可执行文件 r/run&#xff1a;运行代码 …...

实现PDF文档加密,访问需要密码

01. 背景 今天下午老板神秘兮兮的来问我&#xff0c;能不能做个文档加密功能&#xff0c;就是那种用户下载打开需要密码才能打开的那种效果。boss都发话了&#xff0c;那必须可以。 需求&#xff1a;将pdf文档经过加密处理&#xff0c;客户下载pdf文档&#xff0c;打开文档需要…...

LangChain——加载知识库文本文档 PDF文档

文档加载 这涵盖了如何加载目录中的所有文档。 在底层&#xff0c;默认情况下使用 UnstructedLoader。需要安装依赖 pip install unstructuredpython导入方式 from langchain_community.document_loaders import DirectoryLoader我们可以使用 glob 参数来控制加载特定类型文…...

深度学习2:从零开始掌握PyTorch:数据操作不再是难题

文章目录 一、导读二、张量的定义与基本操作三、广播机制四、索引与切片五、内存管理六、与其他Python对象的转换本文是经过严格查阅相关权威文献和资料,形成的专业的可靠的内容。全文数据都有据可依,可回溯。特别申明:数据和资料已获得授权。本文内容,不涉及任何偏颇观点,…...

MyBatis的if标签的基本使用

在MyBatis框架中&#xff0c;if标签用于在构建SQL语句时&#xff0c;根据参数条件判断的结果&#xff0c;动态地选择加入或不加where条件中。 一 常见使用 在使用MyBatis处理查询逻辑的时候&#xff0c;常用的是判断一些参数是否为空&#xff0c;列举常用的几种情况展示 1.1…...

【Azure Cache for Redis】Redis的导出页面无法配置Storage SAS时通过az cli来完成

问题描述 在Azure Redis的导出页面&#xff0c;突然不能配置Storage Account的SAS作为授权方式。 image.png 那么是否可以通过AZ CLI或者是Powershell来实现SAS的配置呢&#xff1f; 问题解答 可以的。使用 az redis export 可以实现 az redis export --container --prefix[--a…...

【微服务】Nacos

一、安装 1、官网地址&#xff1a;https://nacos.io/download/nacos-server/ 2、启动&#xff1a;找到bin目录下的startup.cmd双击启动&#xff0c;或者打开一个命令窗口输入&#xff1a; startup.cmd -m standalone双击启动后如下&#xff1a;可以访问控制台地址 访问后的…...

5、定义与调用函数

大家好,欢迎来到Python函数入门课程! 在编程中,函数就像一个可以重复使用的代码块,它接受输入(参数),执行特定的任务,并可能返回一个结果。想象一下,函数就像一个厨房里的搅拌机,你放入水果(参数),按下按钮(调用函数),它就会帮你制作出美味的果汁(返回值)。…...

Linux 网络编程之TCP套接字

前言 上一期我们对UDP套接字进行了介绍并实现了简单的UDP网络程序&#xff0c;本期我们来介绍TCP套接字&#xff0c;以及实现简单的TCP网络程序&#xff01; &#x1f389;目录 前言 1、TCP 套接字API详解 1.1 socket 1.2 bind 1.3 listen 1.4 accept 1.5 connect 2、…...

前海湾地铁的腾通数码大厦背后的临时免费停车点探寻

临时免费停车点&#xff1a;前海湾地铁的腾通数码大厦背后的桂湾大街&#xff0c;目前看不仅整条桂湾大街停了​车&#xff0c;而且还有工地餐点。可能是这个区域还是半工地状态&#xff0c;故暂时还不会有​罚单的情况出现。 中建三局腾讯数码大厦项目部A栋 广东省深圳市南山…...

OpenCV相机标定与3D重建(7)鱼眼镜头立体校正的函数stereoRectify()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::fisheye::stereoRectify 是 OpenCV 中用于鱼眼镜头立体校正的函数。该函数计算两个相机之间的校正变换&#xff0c;使得从两个相机拍摄的图像…...

前端如何获取unpkg的资源链接

在现代前端开发中&#xff0c;快速获取和使用npm包是一个常见需求。unpkg是一个全球性的CDN服务&#xff0c;它为npm上的每个包提供了快速访问。通过unpkg&#xff0c;你可以轻松地通过URL获取任何npm包的文件。本文将介绍如何获取unpkg的资源链接。 unpkg简介 unpkg是一个快…...

Flink 离线计算

文章目录 一、样例一&#xff1a;读 csv 文件生成 csv 文件二、样例二&#xff1a;读 starrocks 写 starrocks三、样例三&#xff1a;DataSet、Table Sql 处理后写入 StarRocks四、遇到的坑 <dependency><groupId>org.apache.flink</groupId><artifactId&…...

Git | 理解团队合作中Git分支的合并操作

合并操作 团队合作中Git分支的合并操作分支合并过程1.创建feature/A分支的过程2. 创建分支feature/A-COPY3.合并分支查看代码是否改变 团队合作中Git分支的合并操作 需求 假设团队项目中的主分支是main,团队成员A基于主分支main创建了feature/A&#xff0c;而我又在团队成员A创…...

C++多态的实现原理

【欢迎关注编码小哥&#xff0c;学习更多实用的编程方法和技巧】 1、类的继承 子类对象在创建时会首先调用父类的构造函数 父类构造函数执行结束后&#xff0c;执行子类的构造函数 当父类的构造函数有参数时&#xff0c;需要在子类的初始化列表中显式调用 Child(int i) : …...

[极客大挑战 2019]PHP--详细解析

信息搜集 想查看页面源代码&#xff0c;但是右键没有这个选项。 我们可以ctrlu或者在url前面加view-source:查看&#xff1a; 没什么有用信息。根据页面的hint&#xff0c;我们考虑扫一下目录看看能不能扫出一些文件. 扫到了备份文件www.zip&#xff0c;解压一下查看网站源代码…...

map用于leetcode

//第一种map方法 function groupAnagrams(strs) {let map new Map()for (let str of strs) {let key str ? : str.split().sort().join()if (!map.has(key)) {map.set(key, [])}map.get(key).push(str)} //此时map为Map(3) {aet > [ eat, tea, ate ],ant > [ tan,…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

云原生周刊:k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...