webview 跟客户端的适配问题

原创

魔王卷子

修改于 2021-03-09 10:02:48

2.2K0

修改于 2021-03-09 10:02:48

文章被收录于专栏：魔王卷子的专栏

前言

我们APP中经常存在显示网页会有网页底部留有大量空白，显示网页速度要一两秒或者更久时间的问题。

宽度获取问题

IOS和安卓的问题是IOS的webview撑开之后没有办法重新缩小，而android是可以的。所以这就要要求文档设置的文字宽度和图片高度问题要提前设置为比较小的值，而后将其撑开。

比如说在获取宽度时，可以使用以下方法：

function initWidth() {
    var innerWidth = window.innerWidth;
    var scrollWidth = document.body.scrollWidth;

    return (innerWidth < scrollWidth ? window.innerWidth : document.body.scrollWidth);
}

然后是对html的默认font-size设置最小宽度。代码示例如下：

<html lang="zh" style="font-size: 0px;">

webview与原生交互

之前我们是客户端注入类实例。但是现在我们建议使用 DSBridge 进行交互。这里有Android和iOS的文档链接。

图片懒加载

一般来说，为了减少对流量的使用，我们都会对图片进行懒加载处理。那么这个时间可能会碰到一个问题，就是说关于如果图片都是高度特别短的图片，然后因为懒加载，导致图片总体的加载高度小于懒加载的高度，可能会造成页面的显示会有一段空白。

建议默认将图片的默认高度变为0，然后在html中存储图片宽高比例，然后在网页中通过计算比例来获取正确的图片高度。这样就不会造成显示的高度与实际的高度产生误差了。

webview加载优化

为了加载JS的显示，我们将以前的加载全部网页更改为在本地创建模板。每次加载时直接加载本地的网页模板。然后JS直接通过ajax直接请求网页动态内容进行渲染。这样极大的加快了网页的展示速度。

流程图如下：

结尾

我们具体做的优化策略就是这些了。经过优化之后，网页内容几乎是秒开了。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

webview

javascript

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

webview

javascript

登录后参与评论

0 条评论

热度