uni-app 自定义平台如何进行 static 目录的条件编译

devtools/2024/11/28 19:18:58/

一. 自定义平台如何进行 static 目录的条件编译

关于如何自定平台,参考之前文章:

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

由于官方不支持创建自定义平台下的 static 目录,例如以下方式,mp-weixin-custom 会被认为是一个普通文件夹,将会在所有平台被打包进去。

┌─static
│  ├─mp-weixin
│  │  └─a.png
│  ├─mp-weixin-custom
│  │  └─b.png
│  └─c.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json

因此,在这里提供一种思路,可以支持自定义平台的打包策略,可以利用分包实现。

1. 创建分包目录

uni-app 项目中和 pages 同级创建 pagesCustom 目录,如下所示:

┌─pagesCustom
│  ├─pages
│  │  └─index.vue
│  ├─static
│  └─ └─h5-custom-icon.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json

2. 定义分包页面

pages.json 中定义页面地址,配合使用条件编译实现。

{"pages": [{"path": "pages/index"}],"subPackages": [// #ifdef H5-CUSTOM{"root": "pagesCustom","pages": [{"path": "pages/index"}]}// #endif]
}

因为编译器根据 pages.json 扫描需要编译的页面,所以分包 pagesCustom 当只有在平台 H5-CUSTOM 的环境下才会被打包,其他平台下会被忽略。利用以上这种方式,可以实现自定义平台下的 static 条件编译。

注意:使用分包的这种方式虽然能实现自定义平台下 static 目录的条件编译,但是我非常不建议这样使用,这样纯粹是为了分离 static 目录而分包,如果是项目页面比较的多的情况下,可见会相当繁琐,应当慎用。目前官方不支持直接在 static 目录下创建自定义平台,希望 uni-app 官方后续可以新增这个功能。

3. 拓展

uni-app 默认支持使用 webpack-chain 插件实现预处理器,应该可以在 vue.config.js 中配置以实现对 static 目录进行条件编译的方法,例如:

  • vue.config.js

chainWebpack: (config) => {// 定义全局常量,可用于条件编译config.plugin("define").tap((args) => {args[0]["process.env"]["YOUR_VARIABLE"] = JSON.stringify(process.env.YOUR_VARIABLE);return args;});
};

由于时间精力原因,以上这种方式未经过验证,有实践过的同学可以相互探讨一下。

二. 最佳实践:实例演示

实例演示:如何利用 static 目录进行条件编译实现不同端的定制化需求,包括自定义平台。

假设我们现在要实现一个 uni-app 项目,需要在不同端(比如 H5 端、微信小程序端、支付宝小程序端、自定义 H5 端)展示不同的图标。

1. 在 static 目录下准备不同端的图标文件

static 目录下准备不同端需要展示的图标文件,例如有以下 4 不同端个图标:

  • h5-icon.png (H5 端图标)

  • weixin-icon.png (微信小程序端图标)

  • alipay-icon.png (支付宝小程序端图标)

  • h5-custom-icon.png (自定义 H5 端图标)

uni-app 项目中创建的目录如下所示:

┌─static
│  ├─h5
│  │  └─h5-icon.png
│  ├─mp-weixin
│  │  └─weixin-icon.png
│  ├─mp-alipay
│  └─ └─alipay-icon.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json

2. 在代码中使用条件编译实现定制化需求

在代码中利用条件编译,根据不同端选择性地引用 static 目录下的图标文件。

vue 模版中可以这样写:

<template><view><!--#ifdef H5--><img src="/static/h5/h5-icon.png" alt="H5 Icon" /><!--#endif--><!--#ifdef MP-WEIXIN--><img src="/static/mp-weixin/weixin-icon.png" alt="Weixin Icon" /><!--#endif--><!--#ifdef MP-ALIPAY--><img src="/static/mp-alipay/alipay-icon.png" alt="Alipay Icon" /><!--#endif--></view>
</template>

以上两个步骤,其实就实现了在不同端展示不同的图标,而且在打包时也不会将多余端的static被打包到包里,不会造成体积变大。接下来,我们再实现在自定义 H5 平台也实现这种效果。

3. 使用分包实现定制化 static 目录

在 package.json 中添加 uni-app 节点,添加以下配置,使新定义的平台生效:

{"uni-app": {"scripts": {"h5-custom": {"title": "自定义H5平台","browser": "chrome","env": {"UNI_PLATFORM": "h5"},"define": {"H5-CUSTOM": true}}}}
}

在分包下建立 pages 页面和 static 静态资源目录,如下所示:

┌─pagesCustom
│  ├─pages
│  │  └─index.vue
│  ├─static
│  └─ └─h5-custom-icon.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json

pages.json 中定义页面地址,配合使用条件编译可以实现,如下所示:

{"pages": [{"path": "pages/index"}],"subPackages": [// #ifdef H5-CUSTOM{"root": "pagesCustom","pages": [{"path": "pages/index"}]}// #endif]
}

通过以上步骤,我们可以利用 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 静态资源的条件编译icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/144074328 


http://www.ppmy.cn/devtools/137740.html

相关文章

设计模式简介

设计模式的八个原则&#xff1a; 依赖倒置原则&#xff1a;高层次的代码&#xff08;稳定&#xff09;不应该依赖低层次的代码&#xff08;变化&#xff09;&#xff0c;高层次的代码应该依赖于抽象。抽象的代码不应该依赖实现细节&#xff0c;实现细节应该依赖抽象。开放封闭…

C/C++基础知识复习(30)

1) 什么是 C 中的 Lambda 表达式&#xff1f;它的作用是什么&#xff1f; Lambda 表达式&#xff1a; 在 C 中&#xff0c;Lambda 表达式是一种可以定义匿名函数的机制&#xff0c;可以在代码中快速创建一个内联的函数对象&#xff0c;而不需要显式地定义一个函数。Lambda 表…

Vue2中 vuex 的使用

1.安装 vuex 安装vuex与vue-router类似&#xff0c;vuex是一个独立存在的插件&#xff0c;如果脚手架初始化没有选 vuex&#xff0c;就需要额外安装。 yarn add vuex3 或者 npm i vuex3 233 Vue2 Vue-Router3 Vuex3 344 Vue3 Vue-Router4 Vuex4 2. 新建 store/index.j…

Android 用 platform.pk8 和 platform.x509.pem 生成 keystore 系统签名文件

一&#xff0c;背景介绍 最近需要开发一个拥有系统级权限的应用&#xff0c;就了解了下系统应用的签名方式&#xff0c;这里来简单介绍下。 在进行 Android 应用开发的时候&#xff0c;如果开发的是系统应用&#xff0c;那么就需要有系统签名才能正常运行&#xff0c;而系统应用…

高级 SQL 技巧:提升数据库操作效率与灵活性

SQL(Structured Query Language)是关系型数据库管理系统中用于访问和管理数据库的标准语言。在数据库开发和优化过程中,掌握高级 SQL 技巧是提升开发效率和查询性能的关键。本文将介绍一些高级 SQL 技巧,帮助开发者在复杂查询中提高效率、优化性能,并在实际项目中灵活应对…

【电源专题】怎么理解BUCK变换器电感电流平均值等于输出电流?

在文章【电源专题】BUCK电源SW电压的平均值为什么等于输出电压?中我们讲到去看SW波形的时候,我们可以根据SW波形的平均值去看输出电压。其原因是在稳态时,电感电压平均值为0,所以SW电压的平均值与输出电压相同。 那么对于电感电流平均值等于输出电流,这句话我们怎么去理解…

【GPT】力量训练的底层原理?

详细解读力量训练的每一个底层原理 力量训练之所以有效&#xff0c;是因为它利用了肌肉、神经系统和生物化学反应的基本机制。以下逐一详细解析&#xff0c;并解释相关概念。 1. 应力-恢复-适应理论 概念解析 应力&#xff08;Stress&#xff09;&#xff1a;指训练带来的负…

【Electron学习笔记(二)】基于Electron开发应用程序

基于Electron开发本地应用程序 基于Electron开发本地应用程序前言正文1、创建 pages 目录2、创建 index.html 文件3 、创建 html.css 文件4 、main.js里引入页面5 、运行 start 命令6 、启用开发者模式7 、解决内容安全策略8、完善窗口行为9、配置自动重启&#xff0c;保存后自…