手记

混合App开发h5页面的一些问题

        h5页面混合嵌入到APP后,我们会发现一些难以修复的Bug,但在h5网页端却不能复现,因此给我们调试也带来很大的不便。为了提高开发工作的效率,所以就自己 遇到的一些问题和常见的问题 做一下总结补充,同时也将 调试的方法 和大家分享

        1. 无法滚动,在混合APP中这个是最常见最容易发生的问题。

        问题描述:html、body有设置height:100%,会导致在APP中不能滚动

        解决一:去掉html、body的height设置,同时把不需要滚动的部位设置固定定位(这样看起来就像在当前容器中滚动而不是在整个html中滚动。)

        解决二:使用iscroll 或者 vue-scroller 等第三方js模拟滚动的npm 插件。目前自己是使用方案一实现的。

        2.  固定定位position: fixed 失效。

问题描述:我们都知道h5页面中的固定定位是相对于整个window窗口,但中混合页面中,尤其在iOS系统的固定定位抖动的情况,或者会随页面滚动,或者没有实现预期的层次关系。

解决: 用position: absolute 布局代替固定定位。

        3.  用vue做前端页面 解决IOS返回白屏问题

问题描述:进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决

原因:在ios机器上使用webview开发Vue项目时候,go history(-1), 无法将body的高度拉掉,使得遮住,触发轻点击,方可消除遮罩

解决:html,body都是100%,#app撑起了父元素的高度,但是浏览器默认的滚动scroll并不是#app,而是body,某些元素,造成返回history 后,无法复原(ios 的锅),为此,我们将#app 进行了绝对定位,并让它重新成为 scroll 的对象,从而解决问题

具体实现:

html, body {

 width: 100%;

 height: 100%;

 margin: 0;

 padding: 0;

 position: relative;

}

#app {

 width: 100%;

 height: 100%;

 background: #fff;

 overflow: scroll;

 -webkit-overflow-scrolling: touch;

 position: absolute;

 left:0;

 top:0;

}

4.  访问图片出现403(服务器端资源不可用)的解决办法

参考网站:https://blog.csdn.net/tiantang_1986/article/details/83748782

5. 居中对齐,ios\Android 不能同时居中垂直对齐

小伙伴们可能会碰到,测试给提bug没有垂直居中,用自己手机一看确是居中的。怎么回事???

解决:给父元素使用flex布局垂直居中,这还不够,还是会有不兼容的情况。这时需要把父、子元素的相关的宽高尺寸都X2, 然后在父元素上使用transform:scale(0.5)。整个父容器缩小一倍即可。

具体实现(主要代码):

.parent{

    display: flex;

    align-items:center;

    transform:scale(0.5);

}

.children{

    width: 200px; // 原本是100px

}


其他问题及调试:待续

0人推荐
随时随地看视频
慕课网APP