一. 自定义平台如何进行 static 目录的条件编译
关于如何自定平台,参考之前文章:
uni-app 玩转条件编译:自定义平台的条件编译实战详解https://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 工程目录简介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
玩转 uni-app 静态资源的条件编译https://blog.csdn.net/qq_24956515/article/details/144074328