跳转到页面内容
圆点软件.YUANDIAN SOFTWARE

YUANDIAN / INSIGHTS & IDEAS

uni-app 多端适配中的条件编译与样式差异处理

条件编译、样式单位、平台接口和页面栈在多端上都有差异。把差异收敛到封装层,业务代码才不会被平台细节淹没。

专注软件开发 · 连接业务与可能技术分享
uni-app 多端适配中的条件编译与样式差异处理

条件编译的边界

条件编译用来屏蔽平台差异,但滥用会让代码难以阅读。判断标准是差异是否只影响少量行,如果一整个页面在两端结构都不同,拆成独立文件更清晰。

常用的条件包括应用端、网页端以及各小程序平台。写之前先确认目标平台的实际标识,不同编译器版本存在细微差别。

模板、脚本、样式都支持条件编译,但样式的条件编译在小程序端受限于样式隔离规则,写在页面级还是组件级需要实测确认。编译产物里还可以按平台条件引入依赖,把只属于某一端的库排除在打包之外。

样式单位的取舍

响应式像素单位在小程序和应用端能按屏幕宽度等比换算,网页端则由编译器处理。做全端适配时统一使用它能减少一套样式多端调的问题。

但它不适合所有场景,边框、阴影这类不希望随屏幕缩放的属性用固定像素处理更稳。高分辨率屏上的细边框需要单独处理。暗色模式相关的样式在小程序端要同时处理系统主题与平台自定义主题,两套来源都要覆盖。

弹性布局在三端基本一致,网格布局在小程序端的支持程度参差。布局优先用弹性布局,实在需要网格时用百分比加弹性组合实现。

平台接口的能力差异

同一功能在三端往往对应不同的实现路径,比如文件选择、扫码、支付、分享。用条件编译包一层统一的方法,业务代码只调用这一层。

调用前判断接口是否存在,比直接调用后捕获错误更可控。不支持的平台给明确提示,而不是静默失败。回调里拿到的参数结构在各端也有差别,统一转换成内部结构再往上传递。

权限相关的能力在应用端需要声明并在运行时申请,拒绝后的引导流程要单独设计。小程序端则由平台托管授权,逻辑不同。

页面栈与导航差异

小程序的页面栈有层数限制,深层跳转会被截断。需要多级返回的场景改用重定向或者自定义导航栈管理。

返回上一页时刷新数据的时机,各端生命周期触发顺序不完全一致。统一在页面显示的生命周期里拉取,比依赖返回事件更可靠。

原生导航栏与自定义导航栏的选择会影响安全区处理。用自定义导航栏时,状态栏高度需要通过接口获取后动态设置,不能写死。横屏与折叠屏设备的安全区计算方式不同,需要按实际窗口尺寸动态调整。

调试与真机验证

模拟器上的表现不能作为最终结论,尤其涉及键盘、滚动、视频、地图的场景必须真机验证。开发者工具与真机的差异在小程序上尤其明显。

准备一份按平台的兼容清单,每次改动涉及差异点就逐项过一遍。靠记忆很容易漏掉只影响单一平台的问题。

打包体积在小程序端有硬性限制,分包是常用手段。主包只放启动必需的内容,其余按业务模块分包并配置好预下载。

跨端条件编译

LET’S BUILD TOGETHER

让思考,成为下一步行动。

把业务场景与初步想法告诉我们,一起找到合适的实现方式。