在做uni-app开发的过程中,我们最头疼可能不是开发的过程中的逻辑,而是最后要做的三端兼容测试和修改,在我开发的项目中,这一步都是最头疼和令人头秃的过程,这里总结一些个人开发遇到的问题,希望对大家有所帮助。
三端头部高度兼容
描述:在开发中,原生的标题往往不能满足我们的开发要求,我们需要自己写一个自定义的导航栏来使用,那么这就涉及一个问题,app和小程序的头部是有一段自填充高度的,原生的标题会自己填充出来,而我们自定义的导航栏需要自己设置,这里提供给大家一种思路,代码如下。
<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,解决代码如下:
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。