js与android原生的互调

webview的基本设置

引言

由于市面上应用基本上本地+HTML进行混合开发。
本地开发就是使用android系统提供的一些组件来实现
而HTML开发就是使用WebView加载的一个网页，进行开发。
因此，我们有必要更加深入了解一下WebView的使用。

回顾

大家回顾一下：
之前在查看新闻详情界面，我们对WebView有个简单认识。
WebView的基本使用
使用WebView的loadUrl加载一个简单的网页
使用WebView的WebSetting，来修改网页的字体大小。

实现步骤

第一步：创建布局文件

创建布局文件，引入WebView控件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.itheima.webview_base.MainActivity">    <RelativeLayout        android:id="@+id/rl"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:onClick="goBack"            android:text="后退"/>        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:onClick="javaCallJs"            android:layout_centerInParent="true"            android:text="javaCallJs"/>        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:onClick="goForward"            android:layout_alignParentRight="true"            android:text="前进"/>    </RelativeLayout>    <WebView        android:id="@+id/webView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/rl"></WebView></RelativeLayout>

第二步：让WebView支持js

webView.getSettings().setJavaScriptEnabled(true);

第三步：让WebView加载一个网页

//加载网页

webView.loadUrl(url);

第四步：让WebView中加载网页

webView.setWebViewClient(new WebViewClient(){

//页面加载完成@Overridepublic void onPageFinished(WebView view, String url) {    super.onPageFinished(view, url);     }

});

第五步：让WebView加载一个asset目录下的网页

//加载assets目录下的网页

webView.loadUrl(“file:///android_asset/demo.html”);

第六步：让WebView支持后退和前进功能

后退操作

//回退

public void goBack(View view){

if(webView.canGoBack()){    webView.goBack();}

}

前进操作

public void goForward(View view){

if(webView.canGoForward()){    webView.goForward();}

}

强调

WebViewClient对象使用

注意：WebView的SetWebViewClient方法，传递的WebViewClient对象。

webView.setWebViewClient(new WebViewClient(){

//页面加载完成@Overridepublic void onPageFinished(WebView view, String url) {    super.onPageFinished(view, url);     }

});

WebViewClient的作用：

帮助WebView处理各种通知、请求事件的

WebViewClient的方法说明：

shouldOverrideUrlLoading(WebView view, String url)
点击请求时，如果是链接是才会调用。

重写此方法返回true：表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。

这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的

onReceivedError(WebView view, int errorCode, String description, String failingUrl)// (报告错误信息)

onPageStarted(WebView view, String url, Bitmap favicon) //这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。

onPageFinished(WebView view, String url) //在页面加载结束时调用。同样道理，我们知道一个页面载入完成，于是我们可以关闭loading 条，切换程序动作。

WebChromeClient对象的使用

可以调用webView的setWebChromeClient方法设置WebChromeClient对象。
webView.setWebChromeClient(new WebChromeClient());

WebChromeClient的作用：
主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等

常见的方法说明：
onJsAlert (WebView上alert无效，需要定制WebChromeClient处理弹出)
onJsPrompt
显示一个提示对话框
onJsConfirm
显示一个确认对话框
onProgressChanged
显示webview加载的进度
onReceivedTitle
获取加载网站的标题

问题

问题1：如何让WebView中加载网页？
l 给WebView设置WebViewClient对象
l WebViewClient的作用:
n 帮助WebView处理各种通知、请求事件的

问题2：WebView中的WebViewClient和WebChromeClient对象的区别？
l WebViewClient的作用：
n 帮助WebView处理各种通知、请求事件的
l WebChromeClient的作用：
n 主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等

java和javaScript之间的互调

引言

在开发中经常会有这样的需求，就是点击Html的条目或者图片时，打开本地的组件
比如：当点击一个图片时，会打开一个activity，查看图片详情。
实现这样的功能，就涉及到android 和 js之间相互交互了。

接下来，我看一下如何实现android和js进行交互？
实现步骤

Android调用js代码

public void javaCallJs(View view){

webView.loadUrl("javascript:wave()");

}

Js调用android代码

Android中提供对象，传递给js

//把java里面的对象传递给js

webView.addJavascriptInterface(new JsCallJava() {

@JavascriptInterface@Overridepublic void onCallback() {    Toast.makeText(getApplicationContext(),"JavaScript调用的java代码",Toast.LENGTH_SHORT).show();}

}, “demo”);

注意：js调用android中的方法，一定使用@JavascriptInterface进行注解

Js执行android代码

/* This function is invoked by the activity */ function wave() { alert("Android调用Js啦"); }

<!-- Js调用Android代码 --><a onClick="window.demo.onCallback()">点我!</a>

强调

除了以上WebView的使用，还有一些比较常见的使用。
WebView设置缓存

缓存设置
setCacheMode(int mode)
WebSettings.LOAD_CACHE_ELSE_NETWORK
只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据
WebSettings.LOAD_CACHE_ONLY
只加载缓存
WebSettings.LOAD_DEFAULT
根据cache-control决定是否从网络上取数据 cache-control:?
private(内容只缓存到私有缓存中)
public(所有内容都将被缓存)
no-cache(所有内容都不会被缓存)
max-age=xxx(缓存的内容将在 多长时间后失效)
WebSettings.LOAD_NO_CACHE
清理缓存
webview.clearCache(true);
deleteDatabase(“webview.db”);

WebView自适应屏幕

   WebSettings.setUseWideViewPort(true);          webview推荐使用的窗口, 将图片调整到适合webview的大小   WebSettings.setLoadWithOverviewMode(true);          设置webview加载的页面的模式, 缩放至屏幕的大小

WebView的Cookie的设置

Cookie设置（保存用户登录状态）
创建CookieSyncManager实例
CookieSyncManager.createInstance(this);
获取CookieManager管理器实例
cookieManager = CookieManager.getInstance();
设置支持cookie
cookieManager.setAcceptCookie(true);
设置cookie值
cookieManager.setCookie(“”name=xxx;age=18””, cookie);
通过CookieSyncManager
CookieSyncManager.getInstance().sync();
获取cookie值
String cookie_value = cookieManager.getCookie(url);
移除cookie
cookieManager.removeAllCookie();
CookieSyncManager.getInstance().sync();

问题

问题1：如何实现android和js相互交互?

l js调用android代码
提供java对象，给webview
webView.addJavascriptInterface(new JSObject(), “Android”);
提供js，调用java对象
Android.JsCallAndroid(toast)
l android调用js
Webview.loadUrl(“javascript:changeInputValue(‘哈哈 js 您好’)”);
function changeInputValue(content){
document.getElementById(“put_id”).value=content;
}

具体事例，如下
前天去面试问到了问题你，就是js与android调用遇到了什么坑，以前经常用到js，并没有做过系统的总结。

引言

由于市面上应用基本上本地+HTML进行混合开发。本地开发就是使用android系统提供的一些组件来实现，而HTML开发就是使用WebView加载的一个网页，进行开发。因此，我们有必要更加深入了解一下WebView的使用。

首先了解webview的坑，

• android4.4系统前后，版本里卖弄谷歌把内核换成了谷歌浏览器
• 在交换的时候，处于安全的考虑，在设置与JavaScript需要在方法上加上@SuppressLint({ “JavascriptInterface”, “SetJavaScriptEnabled” })，不然4.2以上调用js会出现问题；
• 调用loaddata方法时，注意与loaddatawithurl的区别，前者注意编码问题，后者默认utf-8；
• WebView的内存泄露。单独开一个进程 去使用webview 并且当这个 进程结束时，请手动调用System.exit(0)。
• getSettings().setBuiltInZoomControls(true) 引发的crush。
• 这个方法调用以后 如果你触摸屏幕 弹出那个提示框还没消失的时候 你如果activity结束了 就会报错了。3.0以上 4.4以下很多手机会出现这种情况，所以为了规避他，我们通常是在activity的onDestroy方法里手动的将webiew设置成 setVisibility(View.GONE)
• 后台无法释放js 导致耗电，onstop和onresume里分别把setJavaScriptEnabled();给设置成false和true。
  先知道，js与java如何互调的吧，
  首先看js文件

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><script language="javascript">    /* This function is invoked by the activity */    function wave() {        alert("Android调用Js啦");    }</script><body>    <!-- Js调用Android代码 -->    <a onClick="window.demo.onCallback()">点我!</a></body></html>

代码执行块

 we = (WebView) findViewById(R.id.webview);        //打开自己的网页        we.setWebViewClient(new WebViewClient());        //可以js执行        we.getSettings().setJavaScriptEnabled(true);//        we.loadUrl("https://www.baidu.com/");//打开一个网页，//加载assets目录下的网页        we.loadUrl("file:///android_asset/demo.html");//打开一个网页，        /**         * 用于调用demo中js的回调，以及，设置，第二参数是对应js中的demo         */        we.addJavascriptInterface(new jsCallJava() {          //用来注明是js调用的方法            @JavascriptInterface            @Override            public void onCallback() {                Toast.makeText(getApplicationContext(), "js调用的java代码", Toast.LENGTH_SHORT).show();            }        }, "demo");    }

java调用js的方法怎么调呢，
如下
直接调用就行，

//因为换成谷歌内核了，we.setWebChromeClient(new WebChromeClient());    //调用js中的方法，  public void calljs(View view) {        we.loadUrl("javascript:wave()");   }

到此，js与android的互调已经完成了，