安卓中webview的使用以及与js的相互调用

之前就使用了webview写了公司的安卓客户端 那时因为时间仓促赶着上线 没很多时间学习安卓 复杂的界面只能用html写了 而且这种混合的应用方式貌似还很流行啊 html5的很多跨平台应用大概都是这样的吧 在应用里面嵌入一个webview之类的 然后加载网页 不过对于我这样原本就是web前端的来说 是不是写这种混合式的应用有种先天的优势的 不需要像其他那些需要各种其他html整合工具和类库 开发工具类似hybird xdk 这种 或者是web前端框架 native.js nativeScript这样的

我就整理一下我所知道的要注意的点吧

一、 webview的使用

首先 webview 有几个属性很重要

1. wv_main.getSettings().setJavaScriptEnabled(true);

这个设置webview可以执行js

2. wv_main.addJavascriptInterface(new MyJsInterface(MianActivity.this),"myapp");

这个是定义js与java接口, 在js中可以使用 windows.app 调用这个new出来的对象 ， 调用里面的方法 ， 而且貌似只能是方法，调用不了属性，等下再具体讲这个js如何调用这个类的。

3. wv_main.setWebViewClient(new WebViewClient());

这个WebViewClient是和webview的数据加载相关的，可以重载好几个方法，比如可以这样用：

wv_main.setWebViewClient(new WebViewClient() {
    //发起网络请求前，如果返回值为true表示页面在当前webview打开，否则调用系统默认浏览器打开页面。。。。
    public boolean shouldOverrideUrlLoading(WebView view, String url) {}
    //已经发起网络请求，开始加载页面
    public void onPageStarted(WebView view, String url, Bitmap favicon) {}
    //页面加载结束
    public void onPageFinished(WebView view, String url) {}
    //访问失败
    public void onReceivedError(WebView view, int errorCode, String description, String url){}
    //https请求错误 handler.proceed(); 接受所有网站的证书  一般和https请求相关
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error){}
});

具体的用法可以查一下，还有其他很多方法

4. wv_main.setWebChromeClient(new WebChromeClient());

这个WebChromeClient是和我自己感觉是应该称做为交互相关的，主要处理js的各种弹框，页面加载进度，图标favicon，title，新建窗体，关闭窗体，这样的

wv_main.setWebChromeClient(new WebChromeClient(){
    //返回值表示js 调用alert的时候，是否会运行这一段，一般如果不重写这个方法，alert出来的框的标题会是 : 网址为"http://xxxx"的网站提示 。 然后下面的内容才是alert的内容， 居然这个标题不是网站的title。。。。想不通。。。所以一般这里都是直接return true; 然后在里面手动写一个AlertDialog.Builder，自定义标题样式什么的，然后show出来，不过最后操作完了之后要执行result.confirm(); 否则的话js里面alert运行了之后就就卡住了，无法继续运行。。。开始的时候被这个坑惨了
    public boolean onJsAlert(WebView view, String url, String message,final JsResult result) {} 
    //这个基本和onJsAlert类似，处理confirm的，最后有result.confirm(); 和 result.cancel(); 两种方法分别表示确定和取消
    public boolean onJsConfirm(WebView view, String url, String message,final JsResult result) {}

    //prompt这个方法在web里面js用的少，但是我觉得在客户端这里会用到很多吧， 可以result.confirm(text); 向js返回数据，或者result.cancel(); 取消
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {} 
    
    //用来展示网站加载进度的， progress貌似是百分比的值，tv_progress.setText("已经加载"+progress+"%"); 这样
    public void onProgressChanged(WebView view, int progress) {}
});

其他的方法应该用不多 就不列举了

webview主要就这几个重要的方法，其他的一些都不是很重要的就不讲了。

二、 js与anroid相互调用接口

1. js调用android

说不清楚 直接上代码 以wv_main.addJavascriptInterface(new MyJsInterface(),"myapp");为例

public class MyJsInterface{
    int index=0;

    @JavascriptInterface //这个必须要有，表示是js接口，如果没有js那边是无法调用到这个函数的 除了这个标记外，这个类与其他普通的类完全一样，构造函数 private public 什么乱七八糟的都可以用
    public int getIndex(){ // 返回int 可以支持基础的数据类型 比如 string int boolean 其他的复杂的应该也不支持吧没试过
        index++;
        return index;
    }

    @JavascriptInterface
    public void setIndex(int n){ //参数可以为 string int boolean 其他复杂的 也没过 应该也不支持吧，好在js弱类型语言，转换什么的比较方便，字符串能解决所有
        index=n;
    }

    @JavascriptInterface
    public void exit(){}
}

这个差不多就这样
然后在js里面是这样调用的 坑超级多。。

var i = window.myapp.getIndex();
window.myapp.setIndex(100);

这几个接口函数基本和普通js函数差不多 但是还是有区别！！ 之前被坑掉了

setTimeout(window.myapp.exit,1000); // 这个是无法执行的！！尼玛！！
setTimeout(window.myapp.exit(),1000);// 这个才是能执行的！！ js三观已毁。。。。

所以为了安全起见，不知道还会发生什么意料之外的东西，最好还是下面这样写吧

setTimeout(function(){window.myapp.exit();},1000);

2. android调用js

在api19 及之后 webview提供了evaluateJavascript方法 第一个参数是需要执行的js的字符串，第二个参数是回调 用来获取这个js执行完成后返回的值
api19以下 android没有直接调用js的方法，没办法，只能这样了

js:

function myFunc(){ }

android:

if(Build.VERSION.SDK_INT>Build.VERSION_CODES.JELLY_BEAN_MR2){
    webview.evaluateJavascript("myFunc()",null);
}else {
    wv_main.loadUrl("javascript:myFunc();");
}

很明显 这样如果运行很长的东西还是有点奇怪的。。。 因此里面不会包含很长大语句，一般就一句函数吧。

嗯嗯 差不多就这样吧