Android WebView与H5交互方式混合开发

前言

所谓这个混合开发,也就是比较流行hybird,就是一些简单的html5和native 代码之间的交互。很多电商之类的app里面都有类似的功能,其优点就是可以实现跨平台,有新功能也或bug不需要再重新发版本。

概括

本章介绍基础属性WebSettings的使用,它可以设置webview所支持的功能,如页码缩放、支持JS交互、支持多窗口等。另外,webview自身也公开了一些方法提供调用,如加载某个Url网页、页码回退和前进、拦截url等。重点讲解Android与JS交互技术,这也是面试最必问的技术点。最后简单介绍了webview的优化及缓存处理。

一、WebSettings  设置属性

在开发中,我们一般都会先进行设置属性,通过 WebView.getSettings(); 可以获取webSettings的对象实例。

(1)支持webview进行页面缩放;

webSettings.setBuiltInZoomControls(true);      

*这里有个坑,为了防止webview缩放时退出崩溃,最好写上如下代码:

@Override
public void finish() {
    ViewGroup view = (ViewGroup) getWindow().getDecorView();
    view.removeAllViews();
    super.finish();
}

(2) 支持JS;

webSettings.setJavaScriptEnabled(true);

(3)支持页面多窗口;

webSettings.setSupportMultipleWindows(true);

(4)支持JS打开对话窗口;

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

(5)支持启动技术;

webSettings.setUseWideViewPort(true); 

(6)webSettings.setLoadWithOverviewMode(true); //支持加载时相关页面适配
(7)String cacheDirPath = //设置缓存路径

mWebView.getSettings().setDatabasePath(cacheDirPath);       //设置数据库缓存路径       
mWebView.getSettings().setAppCachePath(cacheDirPath);    //设置 应用 缓存目录       
mWebView.getSettings().setDomStorageEnabled(true);     //开启 DOM 存储功能         
  mWebView.getSettings().setDatabaseEnabled(true);   //开启 数据库 存储功能        
mWebView.getSettings().setAppCacheEnabled(true);  //开启 应用缓存 功能        

 

二、网页返回&前进

(1)是否可以后退,返回值Boolean

Webview.canGoBack() 

(2)后退

Webview.goBack()

(3)是否可以前进,返回值Boolean                     

Webview.canGoForward()

(4)前进

Webview.goForward()

(5)以当前的页码为起始点,前进或者后退到历史记录中指定的steps。如果steps为负数则为后退,正数则为前进。

Webview.goBackOrForward(int steps) 

案例,通常会拦截返回按键按钮: 

public boolean onKeyDown(int keyCode, KeyEvent event) {
    if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) { //手机返回键
        mWebView.goBack();//后退网页
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

 

三、Android与JS交互  

JS是什么???即JavaScript,它不是Java程序的设计语言,而是一种脚本语言。JS是可以一行一行运行的脚本程序代码,可以直接内嵌于HTML网页,属于HTML网页的一部分。本章介绍的交互有两种方式。分别是Android调用JS方法和JS调用Android的方法。

(1)Android调用JS的方法:有2种

1、WebView的loadUrl()//会重新刷新页面

// 调用js中的函数:jsFun(msg)
  webView.loadUrl("javascript:jsFun('" + msg + "')"); 

2、evaluateJavascript()// 该方法的执行不会使页面刷新

mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
    //此处为 js 返回的结果
    }
  });
} 

小结论:

建议两种方法混合使用,即Android 4.4以下使用loadUrl,Android 4.4以上evaluateJavascript
 

(2)JS调用Android的方法:有三种

 

1、通过WebView的addJavascriptInterface()

// 参数1:Android的本地对象
// 参数2:JS的对象
mWebView.addJavascriptInterface(new MyJSInterface(),"androidJsInterface");


private static class MyJSInterface{
      public void showMessage(String msg){
        Toast.makeText(WebViewActivity.this, "成功"+ msg, Toast.LENGTH_LONG).show();
      }
}

原理: 通过对象映射将Android中的本地对象和JS中的对象进行关联,从而实现JS调用Android的对象和方法。

漏洞:因为addJavascriptInterface绑定了一个Java对象实例,根据Java的反射机制,就可以获得更多方法,而且间接获得更多的实例对象。

解决:

  • Android 4.2版本之后,Google 在Android 4.2 版本中规定对被调用的函数以 @JavascriptInterface进行注解从而避免漏洞攻击:
    private static class MyJSInterface{
          @JavascriptInterface
          public void showMessage(String msg){
              Toast.makeText(WebViewActivity.this, "成功"+ msg, Toast.LENGTH_LONG).show();
          }
    }
    
  • Android 4.2版本以前,需要采用拦截prompt()的方式进行漏洞修复,下面?就是讲解内容。

2、通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调,拦截JS对话框alert()、confirm()、prompt() 消息。JS的消息方法如下:

原理:Android通过 WebChromeClient 的onJsAlert()onJsConfirm()onJsPrompt()方法回调分别拦截JS对话框 ,得到他们的消息内容,然后分析意图执行相应操作。(需要和前端开发人员做好约定好消息内容的意图)

选择:常用拦截prompt()方法,因为onJsPrompt调用较少,而onJsAlert、onJsConfirm调用频繁。只有prompt()可以返回任意类型的值,而alert()没有返回值、confirm()只能返回两种状态(确定 / 取消)两个值。

3、通过WebViewClient.shouldOverrideUrlLoading  拦截url,分析意图执行相应操作

网易云音乐的app 里面的积分商城就是使用这种方式实现H5与native交互。微信也是和网易一样通过拦截url 分析url 意图来执行相应的操作的,native 回调js代码也是走的js里的_handleMessageFromWeixin 这种方法。但你其实想一想, 微信这个方法也是有缺陷的,因为url是可以伪造的,好在微信自己会在native代码里 验证他的appid。所以一定程度上可以避免大部分的攻击。

//步骤1. 定义Webview组件
Webview webview = (WebView) findViewById(R.id.webView1);

//步骤2. 加载一个网页:
webView.loadUrl("http://www.google.com/");
  //2:apk包中的html页面 webView.loadUrl("file:///android_asset/test.html");
  //3:本地页面webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");

//步骤3. 复写shouldOverrideUrlLoading()方法
webView.setWebViewClient(new WebViewClient(){
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
        //使得打开网页时不调用系统浏览器, 而是在本WebView中显示 
         view.loadUrl(url);
      return true;
      }
  });

2、当网页加载后有一个url,可以进行判断。需要与前端人员沟通如何定义Url,此url可以作为内部交互的意图。

a.比如,点击网页按钮关闭Activity。这里url字符串查找是否包含“finish_app”关键字。

if(url.contains("finish_app")) {//退出Activity
    finish();
}

b.比如,这个是从WebView页面跳转另外一个Activity页面。

 if (url.contains("MyLuckLog")){//会员页面
    startActivity(new Intent(WebViewActivity.this,NewActivity.class));
}

 

四、WebView 优化

1、内存优化

@Override
protected void onDestroy() {
    super.onDestroy();
    webView.removeAllViews();
    webView.destroy();
}
//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
Webview.clearCache(true);

//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory();

//这个api仅仅清除自动完成填充的表单数据,并不会清除WebView存储到本地的数据
Webview.clearFormData();

2、播放视频时,返回页面,声音依然存在问题。

@Override
protected void onResume() {
    try {
        webView.getClass().getMethod("onResume").invoke(webView,(Object[])null);//继续播放视频
    } catch (IllegalAccessException e) {
        e.printStackTrace();
    } catch (InvocationTargetException e) {
        e.printStackTrace();
    } catch (NoSuchMethodException e) {
        e.printStackTrace();
    }
    super.onResume();
}

@Override
protected void onPause() {
    try {
        webView.getClass().getMethod("onPause").invoke(webView,(Object[])null);//停止视频播放
    } catch (IllegalAccessException e) {
        e.printStackTrace();
    } catch (InvocationTargetException e) {
        e.printStackTrace();
    } catch (NoSuchMethodException e) {
        e.printStackTrace();
    }
    super.onPause();
}

3、后台耗电问题 :activity不可见时要停用webview 

4、webview硬件加速导致页面渲染问题-白屏展示(关闭硬件加速) 

 

五、WebView 缓存

1、缓存的是url、css、图片、Js等,有两种方式,一种是网页数据缓存,一种是H5AppCache缓存 ,但都会缓存到应有所在的数据库表中。

 

2、五种模式:

  • Load_Cache_only 只读取缓存;
  • Load_Default 根据Cache_Control决定是否网络获取;
  • Load_Cache_Noraml   API 17后 与 2相同;
  • Load_No_Cache 不使用缓存只从网络获取;
  • Load_Cache_Else_Netwrok 只要本地存在缓存 无论是否过期或no_cache,都用缓存。

 

3、正确设置缓存模式:

if (NetWorkUtils.isNetworkConnected(this)){
    webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
}else{
    webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}

4、清除WebView缓存

/**
     * 清除WebView缓存
     */
    public void clearWebViewCache() {
        /**清理Webview缓存数据库,缓存文件由程序自动生成
         * /data/data/package_name/database/webview.db
         * /data/data/package_name/database/webviewCache.db
         **/
        try {
            //因为他们都是文件,所以可以用io方式删除,具体方法可以自己写
            deleteDatabase("webview.db");
            deleteDatabase("webviewCache.db");
        } catch (Exception e) {
            e.printStackTrace();
        }
        //WebView 缓存文件
        File webviewCacheDir = new File(APP_CACAHE_DIRNAME);
        //删除webview 缓存目录
        if (webviewCacheDir.exists()) {
            //具体的方法自己写
            deleteFile(webviewCacheDir);
        }
    }

欢迎入qq学习群号:569614530

©️2020 CSDN 皮肤主题: 点我我会动 设计师:上身试试 返回首页
实付 29.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值