Android WebView学习

最新推荐文章于 2021-09-09 10:41:04 发布

YuannaY

最新推荐文章于 2021-09-09 10:41:04 发布

阅读量452

点赞数 3

分类专栏： Android开发

Android开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、关于WebView的使用：

****与JS交互****
拨打电话、发送短信、发送邮件
上传图片(版本兼容)
进度条设置
字体大小设置
返回网页上一层、显示网页标题
全屏播放网络视频

首页

2、文章说明

WebView的使用已经是老生常谈了，看到很多文章说了用法，但我很少看到全的或者是项目中可以直接使用的，都是看了很多后，自己把功能都集合在一起。这里是一份比较全面的WebView项目应用篇，其中已经解决了应用时出现的很多bug，希望能对大家有帮助。

3、项目地址

WebViewStudy

4、内容详细介绍

4.1 电话短信邮件

电话短信邮件&与JS交互测试.png

给WebView设置WebViewClient：

webView.setWebViewClient(new MyWebViewClient(this));

其中MyWebViewClient内容：

/**
* 监听网页链接:
* - 优酷视频直接跳到自带浏览器
* - 根据标识:打电话、发短信、发邮件
* - 进度条的显示
* - 加载完成后，添加javascript监听
*/
public class MyWebViewClient extends WebViewClient {
private IWebPageView iWebPageView;
private WebViewActivity activity;
public MyWebViewClient(IWebPageView iWebPageView) {
this.iWebPageView = iWebPageView;
activity = (WebViewActivity) iWebPageView;
}
@SuppressWarnings("deprecation")
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 优酷视频跳转浏览器播放
if (url.startsWith("http://v.youku.com/")) {
Intent intent = new Intent();
intent.setAction("android.intent.action.VIEW");
intent.addCategory("android.intent.category.DEFAULT");
intent.addCategory("android.intent.category.BROWSABLE");
Uri content_url = Uri.parse(url);
intent.setData(content_url);
activity.startActivity(intent);
return true;
// 电话、短信、邮箱
} else if (url.startsWith(WebView.SCHEME_TEL) || url.startsWith("sms:") || url.startsWith(WebView.SCHEME_MAILTO)) {
try {
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setData(Uri.parse(url));
activity.startActivity(intent);
} catch (ActivityNotFoundException ignored) {
}
return true;
}
iWebPageView.startProgress();
view.loadUrl(url);
return false;
}
@Override
public void onPageFinished(WebView view, String url) {
if (activity.progress90) {
iWebPageView.hindProgressBar();
} else {
activity.pageFinish = true;
}
if (!CheckNetwork.isNetworkConnected(activity)) {
iWebPageView.hindProgressBar();
}
// html加载完成之后，添加监听图片的点击js函数
iWebPageView.addImageClickListener();
super.onPageFinished(view, url);
}
// 视频全屏播放按返回页面被放大的问题
@Override
public void onScaleChanged(WebView view, float oldScale, float newScale) {
super.onScaleChanged(view, oldScale, newScale);
if(newScale - oldScale > 7) {
view.setInitialScale((int)(oldScale / newScale * 100)); //异常放大，缩回去。
}
}
}

因为有很多配置，这里把各个功能模块通过接口IWebPageView分离了出来，这样逻辑更清晰。

4.2 与JS交互

相信大家已经看到了上面"----点击了图片"的Toast，这里需要先给WebView设置JavascriptInterface：
webView.addJavascriptInterface(new ImageClickInterface(this), "injectedObject");

其中ImageClickInterface相关代码：

public class ImageClickInterface {
private Context context;
public ImageClickInterface(Context context) {
this.context = context;
}
@JavascriptInterface
public void imageClick(String imgUrl, String hasLink) {
Toast.makeText(context, "----点击了图片", Toast.LENGTH_SHORT).show();
// 查看大图
// Intent intent = new Intent(context, ViewBigImageActivity.class);
// intent.putStringArrayListExtra("imgUrl",imgUrl);
// context.startActivity(intent);
// Log.e("----点击了图片 url: ", "" + imgUrl);
}
}

加入监听：

public void addImageClickListener() {
// 这段js函数的功能就是，遍历所有的img节点，
// 并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递对应src和has_link里的值过去
webView.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\");" +
"for(var i=0;i<objs.length;i++)" +
"{" +
"objs[i].onclick=function(){window.injectedObject.imageClick(this.getAttribute(\"src\"),this.getAttribute(\"has_link\"));}" +
"}" +
"})()");
}

我们来看一下网页对应的源码：

<img src="[./callsms_files/753b877c-c098-43e9-85cc-6df5bbdaaafe](./callsms_files/753b877c-c098-43e9-85cc-6df5bbdaaafe)" style="width: 100%">

大家可能觉得有点怪异..因为这是保存的本地网页，如是线上的话，是这样：

<img src='[http://7xk154.com1.z0.glb.clouddn.com/article/753b877c-c098-43e9-85cc-6df5bbdaaafe](http://7xk154.com1.z0.glb.clouddn.com/article/753b877c-c098-43e9-85cc-6df5bbdaaafe)' style='width: 100%'>

这里传递过去的是一个图片url的值，没有的属性传过去的则是null。这样我们就可以对其进行具体的操作了。

4.3 字体大小设置

/** 设置字体默认缩放大小(改变网页字体大小,setTextSize api14被弃用)*/
ws.setTextZoom(100);

其中100为默认缩放比，通过设置缩放比来控制字体大小。

4.4 上传图片(版本兼容) & 全屏播放网络视频 & 显示网页标题

这里因为篇幅原因，里面的代码很多，就不贴出来了，大家可以点击MyWebChromeClient.java，查看具体代码。

上传图片.png

4.5 返回网页上一层

返回网页上一层及退出全屏等操作：

@Overridepublic
boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
//全屏播放退出全屏
if (webChromeClient.inCustomView()) {
hideCustomView();
return true;
//返回网页上一页
} else if (webView.canGoBack()) {
webView.goBack();
return true;
//退出网页
} else {
webView.loadUrl("about:blank");
finish();
}
}
return false;
}

4.6 进度条设置

这里用的是先加载到90%再加载到100%, 具体为什么相信大家都懂吧...

// 进度条假装加载到90%
public void startProgress90() {
for (int i = 0; i < 900; i++) {
final int progress = i + 1;
mProgressBar.postDelayed(new Runnable() {
@Override
public void run() {
mProgressBar.setProgress(progress);
if (progress == 900) {
progress90 = true;
if (pageFinish) {
startProgress90to100();
}
}
}
}, (i + 1) * 2);
}
}

再加载到100%:

// 加载到90%后再加载到100%
public void progressChanged(int newProgress) {
if (progress90) {
int progress = newProgress * 100;
if (progress > 900) {
mProgressBar.setProgress(progress);
if (progress == 1000) {
mProgressBar.setVisibility(View.GONE);
}
}
}
}

5、推荐阅读

如很多细节不知缘由的查看这里

6、所遇问题

WebView加载网页不显示图片解决办法
webview: 视频全屏播放按返回页面被放大的问题
Failed to init browser shader disk cache.
EGL_BAD_DISPLAY
Unknown frame routing id: 3
找不到assets目录下资源：注意assets在哪层文件夹下！与AndroidManifest.xml同级
视频播放宽度比webview设置的宽度大，超过屏幕：设置ws.setLoadWithOverviewMode(false);
onDestroy时的清除资源操作

有技术困惑的小伙伴可以加群交流

群号：168786059

加群备注：技术交流

YuannaY

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android WebView学习

1、关于WebView的使用：****与JS交互**** 拨打电话、发送短信、发送邮件上传图片(版本兼容) 进度条设置字体大小设置返回网页上一层、显示网页标题全屏播放网络视频首页2、文章说明WebView的使用已经是老生常谈了，看到很多文章说了用法，但我很少看到全的或者是项目中可以直接使用的，都是看了很多后，自己把功能都集合在一起。这里是一份比较全面的W...
复制链接

扫一扫