混合开发(一)WebView开发高级技巧之加载网页以及JavaScript,加载进度条

混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条一.加载网页先来说说大家经常用的加载网页吧，其实前辈们已经走出来了一条道路了，这里我也比较推荐这个知乎我们新建一个WebViewSample，然后给layout添加webview的组件?xmlversion=1.0encoding=utf-8?LinearLayoutxmlns:android=:layout_width=match_parentandroid:layout_height=match_parentandroid:orientation=verticalWebViewandroid:id=@+id/mWebViewandroid:layout_width=match_parentandroid:layout_height=match_parent//LinearLayout对了，这个要记得添加网络权限哦uses-permissionandroid:name=android.permission.INTERNET/11好的，我们前期工作都准备OK了，开撸吧，骚年！！！packagecom.lgl.webviewsample;/**项目名：WebViewSample*包名：com.lgl.webviewsample*文件名:UrlActivity*创建者:LGL*创建时间:2016/8/1222:40*描述：加载网页*/importandroid.os.Bundle;importandroid.support.v7.app.AppCompatActivity;importandroid.webkit.WebView;publicclassUrlActivityextendsAppCompatActivity{privateWebViewmWebView;//地址privateStringurl=@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_url);//初始化mWebView=(WebView)findViewById(R.id.mWebView);//加载网页mWebView.loadUrl(url);}}我们通过这段代码就可以去加载百度的网页，但是你会发现，只要一进去他就会跳转到浏览器，没错，这里我们需要做点处理了，因为他只是把url加载到我们本地的浏览器，这里也就牵扯到一个概念混合开发混合开发比较火，这个是毋庸置疑的，我们还是的理解他的概念，混合开发有两种模式1.WebApp2.NativeApp比较主流的当然是NativeApp啦。因为他更加的灵活，等等这里我们就简单的实现以下登录的效果，什么是登录？就是我们加载一个网站去完成登录的操作，但是在此之前，我们需要打开我们的TomCat去写怎么一个html网页了，关于tomcat怎么去搭建和使用我就不说了，不会的可以看下我的这篇博文：Android服务器——TomCat服务器的搭建然后我们就开始编写了!DOCTYPEHTMLPUBLIC//W3C//DTDHTML4.01Transitional//ENhtmlheadtitlelogin/titlemetahttp-equiv=keywordscontent=keyword1,keyword2,keyword3metahttp-equiv=descriptioncontent=thisismypagemetahttp-equiv=content-typecontent=text/html;charset=UTF-8/headbodyformname=form1action=method=POSTcentertableborder=1bordercolor=#CCCCCCcellpadding=1cellspacing=1trtdalign=rightname:/tdtdinputtype=textname=usernamevalue=/td/trtrtdalign=rightpassword:/tdtdinputtype=passwordname=pswdvalue=/td/trtrtdcolspan=2align=centerinputtype=submitname=submitvalue=login  inputtype=resetname=resetvalue=cancel/td/tr/table/center/body/html显示效果HTML写的挫不是我的错哈，我们现在的地址是：模拟器的话IP要改一下，不然是访问不了TomCat的行，我们加载试试到这里，看上去就想这么一回事了，而在这里你还可以发现，他不会跳转到本地浏览器了，如何加载百度也不跳到本地浏览器，我们可以加个监听//本地显示mWebView.setWebViewClient(newandroid.webkit.WebViewClient(){@OverridepublicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){view.loadUrl(url);returntrue;}});这样也是OK的好的，到这里我们仍然还没看到高级的用法，我们继续二.加载JavaScript既然要执行，那我们的html要修改一下了，对了，这里要说一点的就是，所操作的一些数据响应都是在服务端的，其实就是web端，而我忘记写了，所以尽量避免吧，这么久了谁还记得那挫代码，哈，我们现在给html加上一些点击事件。也就是写上我们JavaScript的方法!DOCTYPEHTMLPUBLIC//W3C//DTDHTML4.01Transitional//ENhtmlheadtitlelogin/titlemetahttp-equiv=keywordscontent=keyword1,keyword2,keyword3metahttp-equiv=descriptioncontent=thisismypagemetahttp-equiv=content-typecontent=text/html;charset=UTF-8scripttype=text/javascriptfunctionshow(){varth=document.form1;if(th.username.value==){alert(yourusernameisnull);return;}if(th.password.value==){alert(yourpasswordisnull);return;}th.action=/myweb/servlet/Login;th.submit();}/script/headbodyformname=form1action=method=POSTcentertableborder=1bordercolor=#CCCCCCcellpadding=1cellspacing=1trtdalign=rightname:/tdtdinputtype=textname=usernamevalue=/td/trtrtdalign=rightpassword:/tdtdinputtype=passwordname=pswdvalue=/td/trtrtdcolspan=2align=centerinputtype=buttonname=submitvalue=loginonclick=show()  inputtype=resetname=resetvalue=cancel/td/tr/table/center/body/html好的，JavaScript方法加上去了，然后，我们就可以看下效果了我们不用去管成功了之后是什么，我们只要知道输入框为空的话我们就弹出提示框，那我们现在放到项目里面去但是这个时候你会发现，点击是没有什么效果的，如果细心的朋友看过androidapi文档就会发现，webview默认是不支持JavaScript的，需要我们去打开，打开还不够，还需要我们去拦截他的动作，我们这里只有对话框，所以我们就先拦截他的对话框//支持JavaScriptmWebView.getSettings().setJavaScriptEnabled(true);//本地客户端mWebView.setWebChromeClient(newWebChromeClient(){//提示框@OverridepublicbooleanonJsAlert(WebViewview,Stringurl,Stringmessage,JsResultresult){returnsuper.onJsAlert(view,url,message,result);}});对的，把属性打开就好了，我们运行一下现在提示框就出来了，哈哈，但是这个对话框实在是太烂了，这里我们拦截到了对话框，可以对他进行包装，还是在onJsAlert方法里//本地客户端mWebView.setWebChromeClient(newWebChromeClient(){//提示框@OverridepublicbooleanonJsAlert(WebViewview,Stringurl,Stringmessage,finalJsResultresult){//本地对话框AlertDialog.Builderbuilder=newAlertDialog.Builder(UrlActivity.this);builder.(温馨提示:);//服务器端builder.setMessage(message);//按钮builder.setPositiveButton(确定,newDialogInterface.OnClickListener(){@OverridepublicvoidonClick(DialogInterfacedialogInterface,inti){//确认操作result.confirm();}});builder.setNegativeButton(取消,newDialogInterface.OnClickListener(){@OverridepublicvoidonClick(DialogInterfacedialogInterface,inti){result.cancel();}});builder.show();returntrue;}});这里就比较清晰了，只是写了一个原生的提示框显示，我们看下效果这个效果还是比较满意的当然，要是只教这些的话，那只能说明在扯淡，这根本用不上开发，我们继续撸，现在撸什么？就是怎么把账号密码保存在本地，也就是应用里，这个要怎么做呢？跟着我一起去看我们其实也是加一个属性//数据操作mWebView.addJavascriptInterface(newJSObjClass(),JSObj);这里的两个参数都是非常的有用的，第一个为一个接口回调