混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条

现在关于混合开发也越来越多了，很多人喜欢跟随，比如HB,比如RN，其实这东西很早就有这么一个概念了，而且说实话，这方面的需求目前来讲，还是只针对一个别的应用的，不过日后会发展成什么样，那我就不知道了，不过在此之前，我们的WebView，还是用的比较多的，包括他浏览新闻，以及加载一些动作，也就是加载JS，这样的话，我们就可以拿出来讲一讲了，说真的，学习android也挺久的了，感觉很多东西，一出来的时候都哇哇哇的，到后来都是不了了之了，因为只在于型，而万变不离其宗，源码才是最好的老师，所以现在越来越往下面走了，不过我主要还是处于上层（framework和application），好像有点跑题了，我们就不废话了，我们直接进入主题吧，你在本章节中，将会学习到

WebView加载网页的技巧

WebView加载JavaScript的技巧

WebView增加加载进度条

一.加载网页

先来说说大家经常用的加载网页吧，其实前辈们已经走出来了一条道路了，这里我也比较推荐这个知乎

我们新建一个WebViewSample，然后给layout添加webview的组件

对了，这个要记得添加网络权限哦

好的，我们前期工作都准备OK了，开撸吧，骚年！！！

package com.lgl.webviewsample;/* *  项目名：  WebViewSample  *  包名：    com.lgl.webviewsample *  文件名:   UrlActivity *  创建者:   LGL *  创建时间:  2016/8/12 22:40 *  描述：    加载网页 */import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.webkit.WebView;public class UrlActivity extends AppCompatActivity {
         private WebView mWebView;    //地址    private String url = "http://www.baidu.com";    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_url);        //初始化        mWebView = (WebView) findViewById(R.id.mWebView);        //加载网页        mWebView.loadUrl(url);    }}

我们通过这段代码就可以去加载百度的网页，但是你会发现，只要一进去他就会跳转到浏览器，没错，这里我们需要做点处理了，因为他只是把url加载到我们本地的浏览器，这里也就牵扯到一个概念混合开发

混合开发比较火，这个是毋庸置疑的，我们还是的理解他的概念，混合开发有两种模式

1.Web App

2.Native App

比较主流的当然是Native App啦。因为他更加的灵活，等等

这里我们就简单的实现以下登录的效果，什么是登录？就是我们加载一个网站去完成登录的操作，但是在此之前，我们需要打开我们的TomCat去写怎么一个html网页了，关于tomcat怎么去搭建和使用我就不说了，不会的可以看下我的这篇博文：

然后我们就开始编写了

显示效果

这里写图片描述

HTML写的挫不是我的错哈，我们现在的地址是：

模拟器的话IP要改一下，不然是访问不了TomCat的

行，我们加载试试

这里写图片描述

到这里，看上去就想这么一回事了，而在这里你还可以发现，他不会跳转到本地浏览器了，如何加载百度也不跳到本地浏览器，我们可以加个监听

//本地显示 mWebView.setWebViewClient(new android.webkit.WebViewClient(){       @Override       public boolean shouldOverrideUrlLoading(WebView view, String url) {                view.loadUrl(url);                return true;            }        });

这样也是OK的

这里写图片描述

好的，到这里我们仍然还没看到高级的用法，我们继续

二.加载JavaScript

既然要执行，那我们的html要修改一下了，对了，这里要说一点的就是，所操作的一些数据响应都是在服务端的，其实就是web端，而我忘记写了，所以尽量避免吧，这么久了谁还记得那挫代码，哈，我们现在给html加上一些点击事件。也就是写上我们JavaScript的方法

好的，JavaScript方法加上去了，然后，我们就可以看下效果了

这里写图片描述

我们不用去管成功了之后是什么，我们只要知道输入框为空的话我们就弹出提示框，那我们现在放到项目里面去

但是这个时候你会发现，点击是没有什么效果的，如果细心的朋友看过android api文档就会发现，webview默认是不支持JavaScript的，需要我们去打开，打开还不够，还需要我们去拦截他的动作，我们这里只有对话框，所以我们就先拦截他的对话框

//支持JavaScriptmWebView.getSettings().setJavaScriptEnabled(true);//本地客户端mWebView.setWebChromeClient(new WebChromeClient(){   //提示框   @Override   public boolean onJsAlert(WebView view, String url, String message, JsResult result) {                return super.onJsAlert(view, url, message, result);            }        });

对的，把属性打开就好了，我们运行一下

这里写图片描述

现在提示框就出来了，哈哈，但是这个对话框实在是太烂了，这里我们拦截到了对话框，可以对他进行包装，还是在onJsAlert方法里

//本地客户端    mWebView.setWebChromeClient(new WebChromeClient(){            //提示框            @Override            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {                //本地对话框                AlertDialog.Builder builder = new AlertDialog.Builder(UrlActivity.this);                builder.setTitle("温馨提示:");                //服务器端                builder.setMessage(message);                //按钮                builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {                    @Override                    public void onClick(DialogInterface dialogInterface, int i) {                        //确认操作                        result.confirm();                    }                });                builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {                    @Override                    public void onClick(DialogInterface dialogInterface, int i) {                        result.cancel();                    }                });                builder.show();                return true;            }        });

这里就比较清晰了，只是写了一个原生的提示框显示，我们看下效果

这里写图片描述

这个效果还是比较满意的

当然，要是只教这些的话，那只能说明在扯淡，这根本用不上开发，我们继续撸，现在撸什么？就是怎么把账号密码保存在本地，也就是应用里，这个要怎么做呢？跟着我一起去看

我们其实也是加一个属性

//数据操作  mWebView.addJavascriptInterface(new JSObjClass(),"JSObj");

这里的两个参数都是非常的有用的，第一个为一个接口回调，第二个是一个标识，我们服务端会用上，先看下我们的回调，写个类

/**     * 数据保存类     */    public class JSObjClass {
             //获取用户名和密码        @JavascriptInterface        public String getMessage(String name, String pass) {            Log.i("TAG", "name:" + name + ":" + "pass:" + pass);            return name + "," + pass;        }    }

这里要注意下声明@JavascriptInterface就好了，然后我们就去html那里改JavaScript了

OK,这里的话，其实就是调用了一句话，大家应该能看出门道来吧！！！我们运行之后，点击登录，就可以拿到了

这里写图片描述

到这里，我们加载JavaScript也讲完了

三.加载进度条

这个实现其实是比较简单的，我们先再写个进度条，要在顶部哦

他需要一个背景是因为我想实现他的渐变达到进度的效果

就是一个xml的渐变，然后，我们就可以去绑定进度了，首先初始化一下进度条

pb = (ProgressBar) findViewById(R.id.pb);//设置最大值pb.setMax(100);

然后直接监听就好了

mWebView.setWebChromeClient(new WebViewClient());     /**     * 接口回调     */    public class WebViewClient extends WebChromeClient {
             @Override        public void onProgressChanged(WebView view, int newProgress) {            pb.setProgress(newProgress);            if (newProgress == 100) {                pb.setVisibility(View.GONE);            }            super.onProgressChanged(view, newProgress);        }    }

其实原理非常的简单，加载出来了就隐藏进度条，就是这样，效果如图

这里写图片描述

最后我还是想说一下我的观点，坚持下去，你不会的才叫难，你会了就不难了，所以学习，逆水行舟，不进则退

混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条

一.加载网页

二.加载JavaScript

三.加载进度条

有兴趣的可以加群：555974449，氛围很不错的群哦！

Demo下载：正在上传