混合开发一WebView开发高级技巧之加载网页以及JavaScript加载进度条.docx
- 文档编号:8255650
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:15
- 大小:152.45KB
混合开发一WebView开发高级技巧之加载网页以及JavaScript加载进度条.docx
《混合开发一WebView开发高级技巧之加载网页以及JavaScript加载进度条.docx》由会员分享,可在线阅读,更多相关《混合开发一WebView开发高级技巧之加载网页以及JavaScript加载进度条.docx(15页珍藏版)》请在冰豆网上搜索。
混合开发一WebView开发高级技巧之加载网页以及JavaScript加载进度条
混合开发
(一)——WebView开发高级技巧之加载网页以及JavaScript,加载进度条
一.加载网页
先来说说大家经常用的加载网页吧,其实前辈们已经走出来了一条道路了,这里我也比较推荐这个知乎
我们新建一个WebViewSample,然后给layout添加webview的组件
xmlversion="1.0"encoding="utf-8"?
>
xmlns: android=" android: layout_width="match_parent" android: layout_height="match_parent" android: orientation="vertical"> android: id="@+id/mWebView" android: layout_width="match_parent" android: layout_height="match_parent"/>
对了,这个要记得添加网络权限哦
name="android.permission.INTERNET"/> 1 1 好的,我们前期工作都准备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=""; @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_url); //初始化 mWebView=(WebView)findViewById(R.id.mWebView); //加载网页 mWebView.loadUrl(url); } } 我们通过这段代码就可以去加载XX的网页,但是你会发现,只要一进去他就会跳转到浏览器,没错,这里我们需要做点处理了,因为他只是把url加载到我们本地的浏览器,这里也就牵扯到一个概念混合开发 混合开发比较火,这个是毋庸置疑的,我们还是的理解他的概念,混合开发有两种模式 1.WebApp 2.NativeApp 比较主流的当然是NativeApp啦。 因为他更加的灵活,等等 这里我们就简单的实现以下登录的效果,什么是登录? 就是我们加载一个网站去完成登录的操作,但是在此之前,我们需要打开我们的TomCat去写怎么一个html网页了,关于tomcat怎么去搭建和使用我就不说了,不会的可以看下我的这篇博文: Android服务器——TomCat服务器的搭建 然后我们就开始编写了 DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN">
显示效果
HTML写的挫不是我的错哈,我们现在的地址是:
http:
//localhost:
8080/lgl/login.html
模拟器的话IP要改一下,不然是访问不了TomCat的
http:
//10.0.2.2:
8080/lgl/login.html
行,我们加载试试
到这里,看上去就想这么一回事了,而在这里你还可以发现,他不会跳转到本地浏览器了,如何加载XX也不跳到本地浏览器,我们可以加个监听
//本地显示
mWebView.setWebViewClient(newandroid.webkit.WebViewClient(){
@Override
publicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){
view.loadUrl(url);
returntrue;
}
});
这样也是OK的
好的,到这里我们仍然还没看到高级的用法,我们继续
二.加载JavaScript
既然要执行,那我们的html要修改一下了,对了,这里要说一点的就是,所操作的一些数据响应都是在服务端的,其实就是web端,而我忘记写了,所以尽量避免吧,这么久了谁还记得那挫代码,哈,我们现在给html加上一些点击事件。
也就是写上我们JavaScript的方法
DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN">
functionshow(){
varth=document.form1;
if(th.username.value==""){
alert("yourusernameisnull");
return;
}
if(th.password.value==""){
alert("yourpasswordisnull");
return;
}
th.action="/myweb/servlet/Login";
th.submit();
}
好的,JavaScript方法加上去了,然后,我们就可以看下效果了
我们不用去管成功了之后是什么,我们只要知道输入框为空的话我们就弹出提示框,那我们现在放到项目里面去
但是这个时候你会发现,点击是没有什么效果的,如果细心的朋友看过androidapi文档就会发现,webview默认是不支持JavaScript的,需要我们去打开,打开还不够,还需要我们去拦截他的动作,我们这里只有对话框,所以我们就先拦截他的对话框
//支持JavaScript
mWebView.getSettings().setJavaScriptEnabled(true);
//本地客户端
mWebView.setWebChromeClient(newWebChromeClient(){
//提示框
@Override
publicbooleanonJsAlert(WebViewview,Stringurl,Stringmessage,JsResultresult){
returnsuper.onJsAlert(view,url,message,result);
}
});
对的,把属性打开就好了,我们运行一下
现在提示框就出来了,哈哈,但是这个对话框实在是太烂了,这里我们拦截到了对话框,可以对他进行包装,还是在onJsAlert方法里
//本地客户端
mWebView.setWebChromeClient(newWebChromeClient(){
//提示框
@Override
publicbooleanonJsAlert(WebViewview,Stringurl,Stringmessage,finalJsResultresult){
//本地对话框
AlertDialog.Builderbuilder=newAlertDialog.Builder(UrlActivity.this);
builder.setTitle("温馨提示:
");
//服务器端
builder.setMessage(message);
//按钮
builder.setPositiveButton("确定",newDialogInterface.OnClickListener(){
@Override
publicvoidonClick(DialogInterfacedialogInterface,inti){
//确认操作
result.confirm();
}
});
builder.setNegativeButton("取消",newDialogInterface.OnClickListener(){
@Override
publicvoidonClick(DialogInterfacedialogInterface,inti){
result.cancel();
}
});
builder.show();
returntrue;
}
});
这里就比较清晰了,只是写了一个原生的提示框显示,我们看下效果
这个效果还是比较满意的
当然,要是只教这些的话,那只能说明在扯淡,这根本用不上开发,我们继续撸,现在撸什么?
就是怎么把账号密码保存在本地,也就是应用里,这个要怎么做呢?
跟着我一起去看
我们其实也是加一个属性
//数据操作
mWebView.addJavascriptInterface(newJSObjClass(),"JSObj");
这里的两个参数都是非常的有用的,第一个为一个接口回调,第二个是一个标识,我们服务端会用上,先看下我们的回调,写个类
/**
*数据保存类
*/
publicclassJSObjClass{
//获取用户名和密码
@JavascriptInterface
publicStringgetMessage(Stringname,Stringpass){
Log.i("TAG","name:
"+name+":
"+"pass:
"+pass);
returnname+","+pass;
}
}
这里要注意下声明@JavascriptInterface就好了,然后我们就去html那里改JavaScript了
functionshow(){
varth=document.form1;
varname=th.username.value;
if(name==""){
alert("yourusernameisnull");
return;
}
varpass=th.pswd.value;
if(pass==""){
alert("yourpasswordisnull");
return;
}
//接口回传数据
JSObj.getMessage(name,pass);
th.action="/myweb/servlet/Login";
th.submit();
}
OK,这里的话,其实就是调用了一句话,大家应该能看出门道来吧!
!
!
我们运行之后,点击登录,就可以拿到了
到这里,我们加载JavaScript也讲完了
三.加载进度条
这个实现其实是比较简单的,我们先再写个进度条,要在顶部哦
android: id="@+id/pb" style="? android: attr/progressBarStyleHorizontal" android: layout_width="fill_parent" android: layout_height="4dip" android: indeterminateOnly="false" android: max="100" android: progressDrawable="@drawable/progress_bar_states"/> 他需要一个背景是因为我想实现他的渐变达到进度的效果 android=" id="@android: id/background"> android: startColor="#FFE4C4" android: centerColor="#ccffff" android: endColor="#ccffff" /> id="@android: id/secondaryProgress"> android: startColor="#234" android: centerColor="#234" android: endColor="#a24" /> id="@android: id/progress"> android: startColor="#33000001" android: centerColor="#40000000" android: endColor="#44000000" /> 就是一个xml的渐变,然后,我们就可以去绑定进度了,首先初始化一下进度条 pb=(ProgressBar)findViewById(R.id.pb); //设置最大值 pb.setMax(100); 然后直接监听就好了 mWebView.setWebChromeClient(newWebViewClient()); /** *接口回调 */ publicclassWebViewClientextendsWebChromeClient{ @Override publicvoidonProgressChanged(WebViewview,intnewProgress){ pb.setProgress(newProgress); if(newProgress==100){ pb.setVisibility(View.GONE); } super.onProgressChanged(view,newProgress); } } 其实原理非常的简单,加载出来了就隐藏进度条,就是这样,效果如图 最后我还是想说一下我的观点,坚持下去,你不会的才叫难,你会了就不难了,所以学习,逆水行舟,不进则退
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 混合 开发 WebView 高级 技巧 加载 网页 以及 JavaScript 进度条