- A+
所属分类：Web前端
在做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
