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

uni-app开发经验分享五: 解决三端页面兼容问题的方法的更多相关文章

  1. 解决移动端页面滚动后不触发touchend事件

    解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...

  2. 目前解决移动端1px边框最好的方法

    在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...

  3. APP多版本共存,服务端如何兼容?

    做过APP产品的技术人员都知道,APP应用属于一种C/S架构的,所以在做多版本兼容,升级等处理则比较麻烦,不像web应用那么容易.下面将带大家分析几种常见的情况和应对方式: 小改动或者新加功能的 这种 ...

  4. 用css3解决移动端页面自适应横屏竖屏的思考

    之前对于横屏的webapp做过一些尝试,可是始终不是非常好的解决方式,前段时间又接触了类似的需求,尝试了感觉更好的解决方式. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的样例还是平时 ...

  5. 完美解决ie8以下不兼容h5的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  6. PC/APP/H5三端测试的相同与不同

    随着手机应用的不断状态,同一款产品的移动端应用市场占相较PC端也越来越大,那么app与PC端针对这些产品的测试有什么相同与不同之处呢?总结如下: 首先谈一谈相同之处: 一,针对同一个系统功能的测试,三 ...

  7. PC、APP、H5三端测试的相同与不同

    随着手机应用的不断状态,同一款产品的移动端应用市场占相较PC端也越来越大,那么app与PC端针对这些产品的测试有什么相同与不同之处呢?笔者总结如下: 首先谈一谈相同之处... 一,针对同一个系统功能的 ...

  8. PC、APP、H5三端测试的区别

    一,针对同一个系统功能的测试,三端所测的业务流程是一样的 二,一般情况下手机端和PC端都对应一套后台服务,比如说笔者公司所开发的互联网金融平台,整个平台做了分布式服务架构,后台服务包括用户服务.交易服 ...

  9. 分享五个404页面模板 超好看的404页面你的网站离不了 seo优化404

    一个完整的网站离不开一个好的404页面,404页面不光是让你的网站美观,它对SEO的作用也很大,你想一下如果用户打开你的网站,输入一个不存在的风址,如果没有404直接就报错了,有了404就能打开一个美 ...

随机推荐

  1. HW之蓝队防守

    待看文章: https://blog.csdn.net/DBappSecurity_/article/details/107364216?utm_medium=distribute.pc_releva ...

  2. Azure Databricks 第一篇:创建工作区、集群和Notebook

    Azure Databricks是一个可扩展的数据分析平台,基于Apache Spark.Azure Databricks 工作区(Workspace)是一个交互式的环境,工作区把对象(noteboo ...

  3. Django项目连接多个数据库配置

    1.设置数据库连接 pip install PyMySQL 2.在项目同名目录myproject/myproject下的__init__.py添加以下代码 import pymysql pymysql ...

  4. 制作3D小汽车游戏(下)

    书接上回,这一节我们分模块说一说怎么写一个这样的游戏 1. 初始化场景.相机和渲染器 这几乎是绘制three必须做的事情,我们有两套场景和相机,一个是主场景和相机,另一个是小地图的场景和相机(用来俯视 ...

  5. HCIP----静态实验

    要求: 1.全网可达 2.拓扑中所需地址全部基于192.168.0.0/24划分所得 3.使用静态路由 4.R1有三个环回,需要汇总 5.PC1与PC3属于同一VLAN,PC2和PC4属于同一VLAN ...

  6. 测试平台MeterSphere源码入门

    前端代码结构 ├── package.json #Vue的模块依赖定义 ├── pom.xml #Maven前后端打包的定义与依赖 ├── public ├── src #前端核心代码 │ ├── a ...

  7. List集合转JSONObject

    以前写代码喜欢用Map拼接返回去给前端,这样得到的也是一个标准的JSON,今天先不说Map的优缺点,我们就来说说JSONObject的使用,我用的是阿里的fastjson,先上代码,当我们需要嵌套代码 ...

  8. 后台返回的json数据,前台需要修改对象的键值名,重新修改数据格式

    //例如,后台返回的数据为: var json = { data: [   {value: 103.95, name: "法拉利"}, {value: 103.2, name: & ...

  9. Linux USB子系统(一)—— USB设备基础概念

    一.基础概念 在终端用户看来,USB设备为主机提供了多种多样的附加功能,如文件传输,声音播放等,但对USB主机来说,它与所有USB设备的接口都是一致的.一个USB设备由3个功能模块组成:USB总线接口 ...

  10. Oracle dd-m月-yy转yyyy-mm-dd

    表名称:TEST_LP 字段:PROD_DATE 1 SELECT '20' || SUBSTR(T.PROD_DATE, INSTR(T.PROD_DATE, '-', 1, 2) + 1, 2) ...