网站开发工具最好用,中小型企业网站建设与管理,百度一下官方网址,网络营销的概念是什么一. 前言
老生常谈#xff0c;了解 uni-app 的开发都知道#xff0c;uni-app 可以同时支持编译到多个平台#xff0c;如小程序、H5、移动端 App 等。它的多端编译能力是 uni-app 的一大特点#xff0c;让开发者可以使用同一套代码基于 Vue.js 的语法编写程序#xff0c;然…
一. 前言
老生常谈了解 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 :srcurl/image甚至可能有更复杂的函数计算此时编译器无法分析。
那么有了 static 目录编译器就会把这个目录整体复制到最终编译包内。这样只要运行时确实能获取到这个图片就可以显示。非 static 目录下的文件vue 组件、js、css 等只有被引用时才会被打包编译。 注意 如果 static 里有一些没有使用的废文件也会被打包到编译包里造成体积变大。 css、less/scss 等资源不要放在 static 目录下建议这些公用的资源放在 src 自建的目录下比如assets 目录。 另外注意static 目录支持特殊的平台子目录比如 web、app、mp-weixin 等这些目录存放专有平台的文件这些平台的文件在打包其他平台时不会被包含这些在后面会详细说明。
4. static 目录和 App 原生资源目录
uni-app 支持 App 原生资源目录 nativeResources其中包括 assets、res 等目录但和 static 目录没有关系。 static 目录下的文件在 app 第一次启动时解压到了 app 的外部存储目录external-path。因此在这里需要注意控制 static 目录的大小太大的 static 目录和太多文件会造成 App 安装后第一次启动变慢。
三. static 目录的条件编译方法
在 uni-app 中static 目录的条件编译方法通常有以下几种根据不同的条件在编译时选择性地处理部分代码或资源以达到更灵活的应用场景需求。 1. 创建多平台 static 目录
在 static 目录下新建不同平台的专有目录专有目录下的静态资源只有在特定平台才会编译进去。目录名称均为小写如下所示常用的名称定义 appApp 端 webH5 端和 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 目录的条件编译https://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 工程目录简介https://uniapp.dcloud.net.cn/tutorial/project.html
uni-app static 目录的条件编译https://uniapp.dcloud.net.cn/tutorial/platform.html#static 关于uni-app条件编译的其他文章
uni-app 初识条件编译了解多端部署https://blog.csdn.net/qq_24956515/article/details/143951074
uni-app 玩转条件编译自定义平台的条件编译实战详解https://blog.csdn.net/qq_24956515/article/details/143951206
