uni-app開發經驗分享五： 解決三端頁面兼容問題的方法

在做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