uni-app 玩转条件编译:自定义平台的条件编译实战详解

ops/2024/11/25 6:00:05/

一. 条件编译支持的场景

uni-app 的条件编译能支持以下几种场景,具体如图所示:

1. API 的条件编译

简言之,同一功能实现,可能有不同的逻辑处理,比如:在 js 文件中,或者在 Vue 文件中的 script 代码中有不同的逻辑处理方式,使用方式如下:

// #ifdef  %PLATFORM%
该平台特有的API实现;
// #endif

2. 组件的条件编译

在 template 模版中,可能会在不同的平台展示不同的组件,或者是展示效果不同,或者是在某一平台不需要展示,使用方式如下:

<!--  #ifdef  %PLATFORM% -->
该平台特有的组件
<!--  #endif -->

3. 样式的条件编译

在不同的平台下有差异性的样式处理,使用方式如下:

/*  #ifdef  %PLATFORM%  */
该平台特有的样式
/*  #endif  */

4. pages.json 的条件编译

不同平台下的特有功能,以及小程序平台的分包,都可以通过 pages.json 的条件编译来更好地实现。这样,就不会在其它平台产生多余的资源,进而减小包体积。

例如:在 pages.json 中配置 pages 页面路由,在 H5 平台下编译 “测试 1” 页面,在微信小程序页面下编译 “测试 2” 页面

"pages": [// #ifdef H5{"path": "pages/test1","style": {"navigationBarTitleText": "测试1"}},// #endif// #ifdef MP-WEIXIN{"path": "pages/test2","style": {"navigationBarTitleText": "测试2"}},// #endif
]

特别注意:json 的条件编译,一定要注意最后","分隔符的所属问题,不能有多余的逗号,可能会出现异常情况,导致编译失败!

5. static 目录的条件编译

在不同平台,引用的静态资源可能也存在差异,通过 static 的条件编译可以解决此问题,static 目录下新建不同平台的专有目录,目录名称均为小写,专有目录下的静态资源只有在特定平台才会编译进去。

如以下目录结构,a.png 只有在微信小程序平台才会编译进去,b.png 在所有平台都会被编译,合理的利用 static 目录的条件编译能够大大的减小包体积,在微信小程序的分包实践中尤为重要!

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

二. 注意事项

关于条件编译,有以下几个注意事项需要在编程的过程中重点关注一下:

  1. 条件编译 APP-PLUS 包含 APP-NVUE 和 APP-VUE ;

  2. 对于未定义平台名称,可能是名称写错了,也可能是低版本 HBuilderX 没有这个平台,此时的条件编译,#ifdef 中的代码不会生效,而 #ifndef 中的代码会生效;

  3. 使用条件编译请保证编译前和编译后文件的语法正确性,即要保障无论条件编译是否生效都能通过语法校验。比如:json 文件中不能有多余的逗号,js 中不能重复导入;

  4. Android 和 iOS 平台不支持通过条件编译来区分,如果需要区分 Android、iOS 平台,请通过调用 uni.getSystemInfo 来获取平台信息。支持 ifiosifAndroid 代码块,可方便编写判断。

三. 自定义条件编译平台

1. 背景(我为什么要进行自定义平台)

在开发 Web 时,可能有时候需要将同一套代码编译发布到不同的站点,比如多个不同的微信 h5 站,这些站点可能有不同的差异性处理。在开发小程序时,也经常有扩展小程序平台,比如同一套代码,我需要发布到多个小程序,可能这些小程序之间少许有些差异。因此,uni-app 通过在 package.json 文件中增加 uni-app 扩展节点,可实现自定义条件编译平台。

在我之前开发的实际项目中,同一套代码需要部署多个平台,大概有 10 个平台,而且这几个平台可能有 90% 以上的代码是相同的,因此我就没有必要重新开发一套代码了。这多个平台的含义是:在微信小程序有多个平台,在 H5 网站有多个平台,可能在 APP 中也有多个平台,在这些平台之间,可能有或多或少的差异,比如:

  • 功能的差异性,页面展示不同,tabbar 数量等

  • 请求 API 的差异性,对应的后端服务 API 不同

  • 全局变量的差异性,主题配色变量,默认语言等

因此,以上这些差异就会要求在代码中处理不同平台之间的差异性,以下是我的实际项目中的自定义平台:

除此之外,还有两个 APP 平台,但是目前 uni-app 不支持自定义 APP 的基准平台!

如何增加 uni-app 扩展节点,总结一下有以下几个步骤可以快速完成一个全新平台的编译:

  • 声明配置,添加新平台

  • 在代码中使用新平台条件编译

  • 编译到新平台

2. 第一步: 声明配置,添加新平台

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

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

参数说明:

正确的结构就是如上所示,下面说一下这几个参数的具体含义

  • title:自定义扩展名称, 在 HBuilderX 中会显示在 运行/发行 菜单中

  • browser:运行到的目标浏览器,仅当 UNI_PLATFORM 为 h5 时有效

  • env:环境变量
    • UNI_PLATFORM:基准平台

    • MY_TEST:其他自定义环境变量

  • define:自定义条件编译
    • CUSTOM-H5:自定义条件编译常量,建议为大写

注意事项:

  • 只能扩展 web 和小程序平台,不能扩展 app 平台。并且扩展小程序平台时只能基于指定的基准平台扩展子平台,不能扩展基准平台。也就是说 UNI_PLATFORM 仅支持填写 uni-app 默认支持的基准平台,目前仅限如下枚举值:h5mp-weixinmp-alipaymp-baidump-toutiaomp-qq

  • browser 仅在 UNI_PLATFORM 为 h5 时有效,目前仅限如下枚举值:chrome、firefox、ie、edge、safari、hbuilderx。

  • package.json 文件中不允许出现注释,否则扩展配置无效。

3. 第二步:在代码中使用条件编译

接下来,可以在代码里使用自定义的条件编译,为这个新平台编写专用代码:

// 新的自定义微信小程序平台
// #ifdef CUSTOM-MP
/*** 微信小程序 代码*/
// #endif// 新的自定义H5平台
// #ifdef CUSTOM-H5
/*** H5 代码*/
// #endif

4. 第三步:编译到新平台

运行时可以执行面向新平台的编译运行,发行时可以执行面向新平台的编译发行。如下图所示,我们点击运行和发行,已经都有了我们刚才已经自定义好的平台名称。

四. 总结

关于你是否需要自定义平台,关键在于项目里复用的代码多还是个性的代码多,如果都是复用的代码多,并且对应的服务端是一致的,所以仍然可以自定义平台多端部署,而个性的代码放到不同平台的目录下,进行差异化维护。

五. 资源文档

  • uni-app 组件使用手册

  • uni-app API 使用手册

  • uni-app 条件编译处理多端差异

  • package.json 扩展 uni-app 属性

  • vue.config.js 说明


http://www.ppmy.cn/ops/136494.html

相关文章

PW系列工控电脑复制机:效率与精度双重提升

工控电脑复制应用&#xff1a;效率与精度的双重提升 随着现代企业对大数据、数据备份、和跨平台兼容性需求的快速增长&#xff0c;工控电脑已成为数据密集型产业的核心设备。针对工控环境中大量数据复制的特殊需求&#xff0c;PW系列NVMe/SATA PCIe SSD复制机&#xff08;如PW…

深入理解 Seata:分布式事务的最佳解决方案

随着微服务架构的广泛应用&#xff0c;分布式事务管理成为系统设计中一项重要且极具挑战的任务。在微服务架构下&#xff0c;服务之间通过网络调用&#xff0c;单个业务操作往往需要多个服务的协作来完成&#xff0c;这样分布式事务的问题就不可避免。Seata 是目前较为流行的一…

python 正则表达式re 模块的基本使用方法

目录 一、正则化表达式语法1、如下表格&#xff1a;2、元字符 二、re模块常用方法1、compile2、findall3、search4、match5、split6、sub7、finditer 一、正则化表达式语法 1、如下表格&#xff1a; 语法意义.匹配除换行外的任意字符(如果DOTALL则连换行也匹配)^匹配字符串开…

修改一下达梦disql 提示符

经常用disql的有时某些信息希望提示一下&#xff0c;默认的只显示SQL> 为了方便使用&#xff0c;可以在 glogin.sql 中增加些内容。 vi $DM_HOME/bin/disql_conf/glogin.sql增加以下几行 set time on set lineshow offcol global_name new_value global_name SELECT ins…

抓包 127.0.0.1 (loopback) 使用 tcpdump+wireshark

直接使用 wireshark无法抓取 127.0.0.1环回的数据包&#xff0c;一种解决方法是先传到路由器再返回&#xff0c;但这样可能造成拥塞。 Linux 先使用tcpdump抓包并输出为二进制文件&#xff0c;然后wireshark打开。 比如 sudo tcpdump -i lo src host localhost and dst host…

(四)3D视觉机器人的手眼标定(眼在手外)

内容 1.背景介绍1.1 思路T_target_to_cam求解公式求解 2.操作流程 1.背景介绍 3D视觉机器人指的是机器人通过3D相机提供的3D点云视觉信息&#xff0c;完成某些实际的功能。   目标是将场景信息从相机坐标系变换至机械臂坐标系中&#xff0c;最终是获得相机到机械臂基座的空间…

MATLAB的addpath和rmpath函数增加或删除路径

在进行MBD建模开发时&#xff0c;模型生成代码时常需要加载一些其他的文件&#xff0c;例如代码生成模版文件cgt文件、模型所涉及的头文件&#xff0c;这个时候可以在模型的回调函数中使用addpath和rmpath函数加载和删除路径&#xff0c;例如设置模型的加载之前的回调函数在模型…

代码风格与规范

2. 代码风格与规范 代码风格与规范是编写高质量软件的基础。良好的代码风格不仅提升代码的可读性和可维护性&#xff0c;还促进团队协作&#xff0c;减少潜在的错误。以下内容将详细介绍在Python开发中需要注意的关键点。 2.1 遵循PEP 8代码风格指南 什么是PEP 8&#xff1f…