zoukankan      html  css  js  c++  java
  • 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);  
         100%;  
        background-color: #F8F8F8;  
    	
    }  
    .top_view {  
        height: var(--status-bar-height);  
         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

  • 相关阅读:
    一个好用的web甘特图
    应用ExcelPackage导出Excel
    Base64中文不能加密问题
    Sql Server存储过程和函数浅谈
    .NET反编译之Reflector基础示例
    NPOI导出数据到Excel
    twitter接口开发
    Nginx基本属性配置详解
    ssh-keygen创建证书
    asp.net core 设置默认文档index.html
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/13754330.html
Copyright © 2011-2022 走看看