uni-app开发经验分享五: 解决三端页面兼容问题的方法
在做uni-app开发的过程中,我们最头疼可能不是开发的过程中的逻辑,而是最后要做的三端兼容测试和修改,在我开发的项目中,这一步都是最头疼和令人头秃的过程,这里总结一些个人开发遇到的问题,希望对大家有所帮助。
三端头部高度兼容
描述:在开发中,原生的标题往往不能满足我们的开发要求,我们需要自己写一个自定义的导航栏来使用,那么这就涉及一个问题,app和小程序的头部是有一段自填充高度的,原生的标题会自己填充出来,而我们自定义的导航栏需要自己设置,这里提供给大家一种思路,代码如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <template> <view> <!-- #ifdef APP-PLUS --> <view class= "status_bar" :style= "{background:bg}" > <view class= "top_view" :style= "{background:bg}" ></view> </view> <!-- #endif --> </view> </template> <script> export default { props:{ bg:{ type:String, default: "#F8F8F8" , } } } </script> <style lang= "scss" > .status_bar { height : var(--status-bar-height); width : 100% ; background-color : #F8F8F8 ; } .top_view { height : var(--status-bar-height); width : 100% ; position : fixed ; background-color : #F8F8F8 ; top : 0 ; z-index : 999 ; } </style> |
数据拼接问题:
在我们上传图片的过程中,后台返回给我们图片的路径中,网站是需要我们来拼接,在拼接的过程中(app环境),我们会遇到拼接失败的问题,拼接后中间出现了/ufeff,解决代码如下:
1 | encodeURI(that. url .toString()+res.data).replace(/%EF%BB%BF/, "" ) |
split方法问题:
在小程序兼容的过程,split方法是无法在view里运行的,需要我们提前在onshow里处理。
多代码编辑问题:
因为有些代码三端无法同时兼容,我们需要运行各自的代码块,而识别的方法就是条件编译,官方链接如下:
https://uniapp.dcloud.io/platform?id=%e6%9d%a1%e4%bb%b6%e7%bc%96%e8%af%91
分类:
uni-app学习笔记
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)