android 混合webview和js交互常见使用

android 原生和js之间的交互更好实现功能；以下主要针对webview的配置进行论述：

一、webview的配置：

 //开启js脚本支持
        WebSettings settings = getSettings();
        settings.setJavaScriptEnabled(true);
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
            settings.setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        //适配手机大小
        settings.setUseWideViewPort(true);
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
        settings.setLoadWithOverviewMode(true);
        settings.setSupportZoom(true);
        settings.setBuiltInZoomControls(true);
        settings.setDisplayZoomControls(false);
        settings.setGeolocationEnabled(true);
        String dir = context.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
        settings.setGeolocationDatabasePath(dir);
        // enable Web Storage: localStorage, sessionStorage
        settings.setDomStorageEnabled(true);
        // 设置 缓存模式
//        s.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        // 设置 缓存模式
        settings.setAppCacheMaxSize(1024 * 1024 * 15);// 设置缓冲大小，我设的是15M
        String cacheDirPath = context.getFilesDir().getAbsolutePath() + "cache/";
        settings.setAppCachePath(cacheDirPath);
        // 开启 Application Caches 功能
        settings.setAppCacheEnabled(true);
        // 设置 Application Caches 缓存目录
        settings.setAppCachePath(cacheDirPath);
        settings.setAllowFileAccess(true);
        // 触摸焦点起作用
        requestFocus();
        setWebChromeClient(new WVChromeClient());
        setWebViewClient(new WVClient());

二、调用

1、js调用原生方法：

//注意后面的android是和h5约定好的，他调用是window.android.xxxMethod();
mBinding.h5WebView.addJavascriptInterface(new JsObject(), "android");


class JsObject {
    //此方法并不在主线程，所以在此方法不能更新UI，可以使用Handler处理
    @JavascriptInterface
     public void pageJump(String params) {//js调用window.android.pageJump("hh")
    //注意调用参数必须一致，要是传string就让js转化下如：JSON.stringify(user)
     }
 }

2、加载h5链接、调用h5方法

1、加载assets文件夹中的资源：
 h5Webview.loadUrl("file:///android_asset/scene_home/index.html");

2、加载手机内存中的资源：
h5Webview.loadUrl("file:///" +“文件的详细路径”);

3、直接加载url：h5Webview.loadUrl(url);

4、调用h5的方法：
第一种：//只调用不需要返回值
h5WebView.loadUrl("javascript:getAppApp()");

第二种：通过调用js方法，js直接return返回移动端需要的值，此方法需要4.4以上才支持
h5WebView.evaluateJavascript("javascript:getAppApp()", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        Log.e("zyt", "onReceiveValue==" + value);
        //此处为 js 返回的结果
    }
});

3、原生按返回webview的返回情况

//h5是否可以返回
h5WebView.canGoBack()
//调用h5返回上一页面
h5WebView.goBack()

//获取当前h5页面是打开的第几个h5页面   //第一个页面为index为0
WebBackForwardList backForwardList = h5WebView.copyBackForwardList();
int currentIndex = backForwardList.getCurrentIndex();

//判断是否可以返回或前进到指定页面
h5WebView.canGoBackOrForward(index)；
//返回或者前进到index页面    index相对当前也页面为0传值，向前为正，向后为负；如前进一页index为1 后退一页index为 -1 
h5WebView.goBackOrForward(index)；

三、webview和js使用中遇到的一些问题

1、忽略https的证书问题===一些https的链接不能打开

private class WVClient extends WebViewClient {
 @Override
        public void onReceivedSslError(WebView webView, SslErrorHandler sslErrorHandler, SslError sslError) {
            super.onReceivedSslError(webView, sslErrorHandler, sslError);
            //https忽略证书问题
            sslErrorHandler.proceed();
        }
}

2、改变webview的内核信息

//xxx_android 是和h5约定好的
s.setUserAgentString(s.getUserAgentString() + ";xxx_android");

3、Webview 加载一些链接出现白板现象

webView.getSettings().setDomStorageEnabled(true);


还有一种是加载https的URL时在5.0以上加载不了，5.0以下可以加载，这种情况可能是网页中存在非https得资源，在5.0以上是默认关闭，需要设置，

webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

4、Android Webview加载h5播放视频或音频时，退出Activity 后，还有播放声音的解决方法

注意：是h5WebView.reload();有效,onResume和onPause方法要都使用，只用onPause方法会出现锁屏再回来h5的点击事件、滑动无效
 @Override
 protected void onResume() {
     super.onResume();
     h5WebView.onResume();
 }

@Override
protected void onPause() {
    super.onPause();
    h5WebView.reload();
    h5WebView.onPause();
}

@Override
protected void onDestroy() {
    //销毁
    h5WebView.clearCache(true);
    h5WebView.clearFormData();
    h5WebView.destroy();
    h5WebView = null;
    super.onDestroy();
}

 

5、Android原生图片转化为base64传给js（h5显示图片），要传格式，否则方法都不会调用：

//imgPlugin这是h5加载图片的方法
getWebView().loadUrl("javascript:imgPlugin('data:image/png;base64," + base64PicPathString + "')");

6、设置cookie

/**
 * 同步webView的cookie信息----多个数据需要一个一个去设置，不可以使用setcookie(url,"cookie01;cookie02");这样只能获得第一个
 *
 * @param context
 * @param url
 */
public static void synCookies(Context context, String url) {
    CookieSyncManager.createInstance(context);
    CookieManager cookieManager = CookieManager.getInstance();
    cookieManager.setAcceptCookie(true);
    cookieManager.removeSessionCookie();// 移除
    //添加cookie====注意多个cookie需要分别设置
    cookieManager.setCookie(url, "cookie01");
    cookieManager.setCookie(url, "cookie02");


    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        cookieManager.flush();
    } else {
        CookieSyncManager.getInstance().sync();
    }
}

 

7、清除cookie信息

//移除cookie信息
CookieSyncManager.createInstance(APPApplication.getInstance());
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.removeAllCookie();
CookieSyncManager.getInstance().sync();

8、给h5链接添加请求头

Map<String,String> map=new HashMap<>();
 map.put("1", "23");
 webview.loadUrl(s,map);

9、调用js方法时传字符串调用失败，仿照如下代码（注意单引号）

webview.loadUrl("javascript:setMessage('" + content + "')");

10、webview加载html代码：

String msg ="<html>在模拟器 2.1 上测试</html>";
tbsWebview.loadData(msg, "text/html", "UTF-8");

11、有些手机加载html代码显示乱码：

将方法
tbsWebview.loadData(htmlCode, "text/html", "UTF-8");
改为：
tbsWebview.loadDataWithBaseURL(null, htmlCode, "text/html", "UTF-8", null);

 

常用的和常遇到的问题都记录在此了，后面遇到新问题会补上的。

webview封装类