Android中的WebView使用

1、基础用法

1)加载本地assert目录下文件(error.html)

webcontent.loadUrl(" file:///android_asset/error.html ");

2)加载网络url(http://www.csdn.com)

webcontent.loadUrl(" http://www.csdn.com ");

3)加载 String 类型html

String errorHtml = "<html><body><h1>Page not find!</h1></body></html>";

webcontent.loadData(errorHtml,"text/html", "UTF-8");

4)加载SD卡html:

webcontent.loadUrl(" content://com.android.htmlfileprovider/sdcard/kris.html ");

注意:

加载html代码片段的时候,水平方向适应全屏效果不好

解决思路:将“代码片段”补充为“完成的html代码”(参考:https://blog.csdn.net/u011692041/article/details/51063540

解决方法:

/**

* 将html片段拼接成完整的html代码

* 优点:为了更好的自适应全屏显示

*

* @param excerptHtml

* @return

*/

private String getCompleteHtml(String excerptHtml) {

    StringBuilder sb = new StringBuilder();

    String codeStart = "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\"http://www.w3.org/TR/html4/loose.dtd\">" +

                "<html>" +

                "<head>" + "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover\">" +

                "<style>img{width:100% !important;}</style>" +

                "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=\"></head>" + "<body style='word-wrap:break-word;font-family:Arial;'>";

        String codeEnd = "</body></html>";

    return sb.append(codeStart).append(excerptHtml).append(codeEnd).toString();

}

2、webView与js通信

1) Android调用JS代码

主要有两种方法:

  ● 通过WebView的loadUrl()

// 调用javascript的callJS()方法

mWebView.loadUrl("javascript:callJS()");

但是这种不常用,因为它会自动刷新页面而且没有返回值,有点影响交互。

  ● 通过WebView的evaluateJavascript()

mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {

        @Override

        public void onReceiveValue(String value) {

            //此处为 js 返回的结果

        }

    });

这种就比较全面了。调用方法并且获取返回值。

2) JS调用Android端代码

主要有两种方法:

  ● 通过WebView的addJavascriptInterface()进行对象映射

public class AndroidtoJs extends Object {

    // 定义JS需要调用的方法

    // 被JS调用的方法必须加入@JavascriptInterface注解

    @JavascriptInterface

    public void hello(String msg) {

        System.out.println("JS调用了Android的hello方法");

    }

}

mWebView.addJavascriptInterface(new AndroidtoJs(), "test");

//js中:

function callAndroid(){

    // 由于对象映射,所以调用test对象等于调用Android映射的对象

    test.hello("js调用了android中的hello方法");

}

这种方法虽然很好用,但是要注意的是4.2以后,对于被调用的函数以@JavascriptInterface进行注解,否则容易出发漏洞,因为js方可以通过反射调用一些本地命令,很危险。

  ● 通过WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url

这种方法是通过shouldOverrideUrlLoading回调去拦截url,然后进行解析,如果是之前约定好的协议,就调用相应的方法。

// 复写WebViewClient类的shouldOverrideUrlLoading方法

mWebView.setWebViewClient(new WebViewClient() {

        @Override

        public boolean shouldOverrideUrlLoading(WebView view, String url) {

  Uri uri = Uri.parse(url);                               

            // 如果url的协议 = 预先约定的 js 协议

            if ( uri.getScheme().equals("js")) {

  // 如果 authority  = 预先约定协议里的 webview,即代表都符合约定的协议

            if (uri.getAuthority().equals("webview")) {

              System.out.println("js调用了Android的方法");

              // 可以在协议上带有参数并传递到Android上

              HashMap<String, String> params = new HashMap<>();

              Set<String> collection = uri.getQueryParameterNames();

    }

            return true;

            }

            return super.shouldOverrideUrlLoading(view, url);

            }

        }

    );

3、如何避免WebView内存泄露

WebView的内存泄露主要是因为在页面销毁后,WebView的资源无法马上释放所导致的。现在主流的是两种方法:

1)不在xml布局中添加webview标签,采用在代码中new出来的方式,并在页面销毁的时候去释放webview资源

//addview

private WeakReference<BaseWebActivity> webActivityReference = new WeakReference<BaseWebActivity>(this);

mWebView = new BridgeWebView(webActivityReference .get());

webview_container.addView(mWebView);

//销毁

ViewParent parent = mWebView.getParent();

if (parent != null) {

    ((ViewGroup) parent).removeView(mWebView);

}

mWebView.stopLoading();

mWebView.getSettings().setJavaScriptEnabled(false);

mWebView.clearHistory();

mWebView.clearView();

mWebView.removeAllViews();

mWebView.destroy();

mWebView=null;

2)另起一个进程加载webview,页面销毁后干掉这个进程。但是这个方法的麻烦之处就在于进程间通信。

使用方法很简单,xml文件中写出进程名即可,销毁的时候调用System.exit(0)

<activity android:name=".WebActivity"

  android:process=":remoteweb"/>

System.exit(0) 

4、webView还有哪些可以优化的地方

  ● 提前初始化或者使用全局WebView。首次初始化WebView会比第二次初始化慢很多。初始化后,即使WebView已释放,但一些多WebView共用的全局服务/资源对想仍未释放,而第二次初始化不需要生成,因此初始化变快。

  ● DNS采用和客户端API相同的域名,DNS解析也是耗时比较多的部分,所以用客户端API相同的域名因为其DNS会被缓存,所以打开webView的时候就不会再耗时在DNS上了

  ● 对于JS的优化,尽量不要用偏重的框架,比如React。其次是高性能要求页面还是需要后端渲染。最后就是app中的网页框架要统一,这样就可以对js进行缓存和复用。

这里有美团团队的总结方案,如下:

  ● WebView初始化慢,可以在初始化同时先请求数据,让后端和网络不要闲着。

  ● 后端处理慢,可以让服务器分trunk输出,在后端计算的同时前端也加载网络静态资源。

  ● 脚本执行慢,就让脚本在最后运行,不阻塞页面解析。

  ● 同时,合理的预加载、预缓存可以让加载速度的瓶颈更小。

  ● WebView初始化慢,就随时初始化好一个WebView待用。

  ● DNS和链接慢,想办法复用客户端使用的域名和链接。

  ● 脚本执行慢,可以把框架代码拆分出来,在请求页面之前就执行好。

5、webview常见问题

1)https://mp.weixin.qq.com/s/OBGHYCuSYQbGRfrR6whuCg

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容