原生+H5开发之：Android webview配置
在上一篇文章Android 原生开发、H5、React-Native开发特点，我们可以了解到三种Android开发方式的区别和优缺点。[Android开发：原生+H5]系列的文章，将主要讲解Android原生+H5开发相关，这一节主要是Android原生+H5开发时要使用WebView，要使WebView正确的显示加载H5页面和功能需要做相关的配置。
AndroidManifest权限添加
请一定、务必在AndroidManifest中添加如下权限，否则是无法正常打开显示H5页面的。
这个一定要单独拿出来强调一下，以防你其他代码啊，配置啊什么的都写好了，但就是不显示，然后你就各种找问题，发愁，恼怒，耽误时间。因为楼主就曾经犯过这样的错误，真的被自己粗心蠢哭，哭哭哭……
<uses-permission android:name="android.permission.INTERNET"/>
WebView使用步骤
1. 添加AndroidManifest权限。
<uses-permission android:name="android.permission.INTERNET"/>
2. 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.app.www.webapp.SecondActivity"> <WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" /> </LinearLayout>
3. 获取WebView对象。
webView = this.findViewById(R.id.webView);
4. WebSettings配置WebView。下面有具体的配置说明。
5. 设置加载地址。
webView.loadUrl(url);
到这一步为止，WebView就可以正常的显示了，如果我们想要对WebView做进一步的监听处理，就需要下面的设置。
6. 设置WebViewClient。 WebViewClient主要是监听WebView加载进程，平常我们对webview加载的处理，例如加一些进度条、跳转设置之类的都是通过WebViewClient类完成。在下面我们会讲到。
7. 设置WebChromeClient。 有时候我们不想原生去调用手机的拍照和相册，如果我们想要用H5去掉用的话，我们需要去重新WebChromeClient类，并进行设置，这样H5才能成功的调用拍照和相册。下面会细讲。
WebSettings类配置
/**支持Js**/
setting.setJavaScriptEnabled(true); /**设置自适应屏幕，两者合用**/
//将图片调整到适合webview的大小
setting.setUseWideViewPort(true);
// 缩放至屏幕的大小
setting.setLoadWithOverviewMode(true); /**缩放操作**/
// 是否支持画面缩放，默认不支持
setting.setBuiltInZoomControls(true);
setting.setSupportZoom(true);
// 是否显示缩放图标，默认显示
setting.setDisplayZoomControls(false);
// 设置网页内容自适应屏幕大小
setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); /**设置允许JS弹窗**/
setting.setJavaScriptCanOpenWindowsAutomatically(true);
setting.setDomStorageEnabled(true); /**关闭webview中缓存**/
setting.setCacheMode(WebSettings.LOAD_NO_CACHE);
/**设置可以访问文件 **/
setting.setAllowFileAccess(true);
setting.setAllowFileAccessFromFileURLs(true);
setting.setAllowUniversalAccessFromFileURLs(true);
WebViewClient类
如果不进行设置WebViewClient的话，我们的WebView通常会跳转到手机自带的浏览器去进行显示，但是我们想要的是在app内显示，所以我们需要对WebViewClient进行设置。对这个类的使用我们之前在Android 网络连接——WebView这篇文章中也讲过，这里我就只复制一下。
WebView加载失败设置
我们在使用浏览器时，我们经常会看到，如果页面加载失败会出现一个提示的页面。我们自己的浏览器当然也少不了这个功能。设置加载页面失败调用WebView的setWebViewClient()方法，传入匿名WebViewClient对象，重写onReceivedError()方法，在该方法内进行处理。
webView.setWebViewClient(new WebViewClient() {
/*
网络连接错误时调用
*/
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl){
super.onReceivedError(view, errorCode, description, failingUrl);
}
});
WebView网页加载进度条显示
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
progressBar.setProgress(newProgress);//网络加载时设置进度条进度
}
});
webView.setWebViewClient(new WebViewClient() {
/*
网络开始加载时调用
*/
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
progressBar.setVisibility(View.VISIBLE);//设置显示进度条
}
/*
网络加载结束时调用
*/
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
progressBar.setVisibility(View.GONE);//设置去除进度条
}
});
WebChromeClient类
H5想要调用我们手机的相册和拍照，直接调用是不行的，我们必须在WebView设置中进行设置。重写WebChromeClient类。
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.app.Activity;
import android.content.ClipData;
import android.content.ComponentName;
import android.content.ContentUris;
import android.content.Context;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.content.pm.ResolveInfo;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Build;
import android.os.Environment;
import android.os.Parcelable;
import android.provider.DocumentsContract;
import android.provider.MediaStore;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast; import java.io.File;
import java.util.ArrayList;
import java.util.List; import static android.view.KeyEvent.KEYCODE_BACK; public class SecondActivity extends Activity {
private WebView webView;
private Intent intent;
private String url;
/**
* 表单的数据信息
*/
private ValueCallback<Uri> mUploadMessage;
private ValueCallback<Uri[]> mUploadCallbackAboveL;
/**
* 表单的结果回调</span>
*/
private final static int FILECHOOSER_RESULTCODE = 1;
private Uri imageUri;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
intent = getIntent();
url = intent.getStringExtra("url");
Toast.makeText(this, url, Toast.LENGTH_SHORT).show();
webView = this.findViewById(R.id.webView); initWebView();
// this.webView.loadUrl("http://192.168.1.105:8099/photo");
webView.loadUrl(url); webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return super.shouldOverrideUrlLoading(view, url);
} @Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
} @Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
});
webView.setWebChromeClient(new OpenFileChromeClient());
} public class OpenFileChromeClient extends WebChromeClient { @Override
public boolean onShowFileChooser(WebView webView,
ValueCallback<Uri[]> filePathCallback,
FileChooserParams fileChooserParams) {
mUploadCallbackAboveL = filePathCallback;
take();
return true;
} /**
* Android < 3.0 调用这个方法
*
* @param uploadMsg
*/
public void openFileChooser(ValueCallback<Uri> uploadMsg) {
mUploadMessage = uploadMsg;
take();
} /**
* Android < 3.0 调用这个方法
*
* @param uploadMsg
* @param acceptType
*/
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
mUploadMessage = uploadMsg;
take();
} /**
* Android > 4.1.1 调用这个方法
*
* @param uploadMsg
* @param acceptType
* @param capture
*/
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
mUploadMessage = uploadMsg;
take();
}
} private void initWebView() {
WebSettings setting = webView.getSettings();
/**支持Js**/
setting.setJavaScriptEnabled(true); /**设置自适应屏幕，两者合用**/
//将图片调整到适合webview的大小
setting.setUseWideViewPort(true);
// 缩放至屏幕的大小
setting.setLoadWithOverviewMode(true); /**缩放操作**/
// 是否支持画面缩放，默认不支持
setting.setBuiltInZoomControls(true);
setting.setSupportZoom(true);
// 是否显示缩放图标，默认显示
setting.setDisplayZoomControls(false);
// 设置网页内容自适应屏幕大小
setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); /**设置允许JS弹窗**/
setting.setJavaScriptCanOpenWindowsAutomatically(true);
setting.setDomStorageEnabled(true); /**关闭webview中缓存**/
setting.setCacheMode(WebSettings.LOAD_NO_CACHE);
/**设置可以访问文件 **/
setting.setAllowFileAccess(true);
setting.setAllowFileAccessFromFileURLs(true);
setting.setAllowUniversalAccessFromFileURLs(true); } @Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == FILECHOOSER_RESULTCODE) {
if (null == mUploadMessage && null == mUploadCallbackAboveL) return;
Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
if (mUploadCallbackAboveL != null) {
onActivityResultAboveL(requestCode, resultCode, data);
} else if (mUploadMessage != null) { if (result != null) {
String path = getPath(getApplicationContext(),
result);
Uri uri = Uri.fromFile(new File(path));
mUploadMessage
.onReceiveValue(uri);
} else {
mUploadMessage.onReceiveValue(imageUri);
}
mUploadMessage = null; }
}
} @Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KEYCODE_BACK) && webView.canGoBack()) {
webView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
} @SuppressWarnings("null")
@TargetApi(Build.VERSION_CODES.BASE)
private void onActivityResultAboveL(int requestCode, int resultCode, Intent data) {
if (requestCode != FILECHOOSER_RESULTCODE
|| mUploadCallbackAboveL == null) {
return;
} Uri[] results = null; if (resultCode == Activity.RESULT_OK) { if (data == null) { results = new Uri[]{imageUri};
} else {
String dataString = data.getDataString();
ClipData clipData = data.getClipData(); if (clipData != null) {
results = new Uri[clipData.getItemCount()];
for (int i = 0; i < clipData.getItemCount(); i++) {
ClipData.Item item = clipData.getItemAt(i);
results[i] = item.getUri();
}
} if (dataString != null)
results = new Uri[]{Uri.parse(dataString)};
}
}
if (results != null) {
mUploadCallbackAboveL.onReceiveValue(results);
mUploadCallbackAboveL = null;
} else {
results = new Uri[]{imageUri};
mUploadCallbackAboveL.onReceiveValue(results);
mUploadCallbackAboveL = null;
} return;
} private void take() {
File imageStorageDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "MyApp");
// Create the storage directory if it does not exist
if (!imageStorageDir.exists()) {
imageStorageDir.mkdirs();
}
File file = new File(imageStorageDir + File.separator + "IMG_" + String.valueOf(System.currentTimeMillis()) + ".jpg");
imageUri = Uri.fromFile(file); final List<Intent> cameraIntents = new ArrayList<Intent>();
final Intent captureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
final PackageManager packageManager = getPackageManager();
final List<ResolveInfo> listCam = packageManager.queryIntentActivities(captureIntent, 0);
for (ResolveInfo res : listCam) {
final String packageName = res.activityInfo.packageName;
final Intent i = new Intent(captureIntent);
i.setComponent(new ComponentName(res.activityInfo.packageName, res.activityInfo.name));
i.setPackage(packageName);
i.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
cameraIntents.add(i); }
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
Intent chooserIntent = Intent.createChooser(i, "Image Chooser");
chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, cameraIntents.toArray(new Parcelable[]{}));
SecondActivity.this.startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE);
} @SuppressLint("NewApi")
@TargetApi(Build.VERSION_CODES.KITKAT)
public static String getPath(final Context context, final Uri uri) {
final boolean isKitKat = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT; // DocumentProvider
if (isKitKat && DocumentsContract.isDocumentUri(context, uri)) {
// ExternalStorageProvider
if (isExternalStorageDocument(uri)) {
final String docId = DocumentsContract.getDocumentId(uri);
final String[] split = docId.split(":");
final String type = split[0]; if ("primary".equalsIgnoreCase(type)) {
return Environment.getExternalStorageDirectory() + "/" + split[1];
} // TODO handle non-primary volumes
}
// DownloadsProvider
else if (isDownloadsDocument(uri)) { final String id = DocumentsContract.getDocumentId(uri);
final Uri contentUri = ContentUris.withAppendedId(Uri.parse("content://downloads/public_downloads"), Long.valueOf(id)); return getDataColumn(context, contentUri, null, null);
}
// MediaProvider
else if (isMediaDocument(uri)) {
final String docId = DocumentsContract.getDocumentId(uri);
final String[] split = docId.split(":");
final String type = split[0]; Uri contentUri = null;
if ("image".equals(type)) {
contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
} else if ("video".equals(type)) {
contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI;
} else if ("audio".equals(type)) {
contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
} final String selection = "_id=?";
final String[] selectionArgs = new String[]{split[1]}; return getDataColumn(context, contentUri, selection, selectionArgs);
}
}
// MediaStore (and general)
else if ("content".equalsIgnoreCase(uri.getScheme())) {
return getDataColumn(context, uri, null, null);
}
// File
else if ("file".equalsIgnoreCase(uri.getScheme())) {
return uri.getPath();
} return null;
} /**
* Get the value of the data column for this Uri. This is useful for
* MediaStore Uris, and other file-based ContentProviders.
*
* @param context The context.
* @param uri The Uri to query.
* @param selection (Optional) Filter used in the query.
* @param selectionArgs (Optional) Selection arguments used in the query.
* @return The value of the _data column, which is typically a file path.
*/
public static String getDataColumn(Context context, Uri uri, String selection, String[] selectionArgs) {
Cursor cursor = null;
final String column = "_data";
final String[] projection = {column}; try {
cursor = context.getContentResolver().query(uri, projection, selection, selectionArgs, null);
if (cursor != null && cursor.moveToFirst()) {
final int column_index = cursor.getColumnIndexOrThrow(column);
return cursor.getString(column_index);
}
} finally {
if (cursor != null) cursor.close();
}
return null;
} /**
* @param uri The Uri to check.
* @return Whether the Uri authority is ExternalStorageProvider.
*/
public static boolean isExternalStorageDocument(Uri uri) {
return "com.android.externalstorage.documents".equals(uri.getAuthority());
} /**
* @param uri The Uri to check.
* @return Whether the Uri authority is DownloadsProvider.
*/
public static boolean isDownloadsDocument(Uri uri) {
return "com.android.providers.downloads.documents".equals(uri.getAuthority());
} /**
* @param uri The Uri to check.
* @return Whether the Uri authority is MediaProvider.
*/
public static boolean isMediaDocument(Uri uri) {
return "com.android.providers.media.documents".equals(uri.getAuthority());
}
}
完整代码下载地址：下载地址
原生+H5开发之：Android webview配置的更多相关文章
- 原生+H5开发之：js交互【location方式】
1. 交互方式总结 1Android与JS通过WebView互相调用方法,实际上是: Android去调用JS的代码 JS去调用Android的代码 二者沟通的桥梁是WebView 对于Android ...
- 基于xmpp openfire smack开发之Android客户端开发[3]
在上两篇文章中,我们依次介绍openfire部署以及smack常用API的使用,这一节中我们着力介绍如何基于asmack开发一个Android的客户端,本篇的重点在实践,讲解和原理环节,大家可以参考前 ...
- Android开发之 Android应用程序目录结构解析
建立的HelloWorld的应用项目,其代码是由ADT插件自动生成的,形成Android项目特有的结构框架. 接下来让我带领大家解析一个Android程序的各个组成部分,这次我们拿一个Hello,Wo ...
- Android 开发之Android 应用程序如何调用支付宝接口
1.到支付宝官网,下载支付宝集成开发包 由于android设备一般用的都是无线支付,所以我们申请的就是支付宝无线快捷支付接口.下面是申请的地址以及下载接口开发包的网址:https://b.alipay ...
- 移动混合开发之android文件管理demo
框架采用cordova,android编译环境为android studio.系统为mac,cordova 环境搭建参考网址:http://cordova.apache.org/docs/en/5.0 ...
- Win7平台下React-Native开发之Android项目打包发布流程
一.bundle文件 React-Native开发步骤中,有一个步骤是使用命令 react-native start 去启动一个基于Node.js的服务,名字为packager.这个packager的 ...
- Android 开发之 Android 开发的起步
前言 Android 开发的起步 我们可以先来看看百科上面怎么说? 百度百科上 Android的介绍 一.Windows环境下在线搭建Android环境. 1. 下载 Android开发工具. JD ...
- 【Cocos2d-x 3.0】游戏开发之android交叉编译
作者:Senlern 转载请注明,原文链接:http://blog.csdn.net/zhang429350061/article/details/37959489 在上一篇文章我分享了如在win32 ...
- Asp.NetCore Web开发之Nlog日志配置
接着讲基于ASP .net Core 的web开发,这节主要讲一下如何使用和配置Nlog进行日志记录. 日志在开发中的作用是很重要的,使用日志,程序出了错误可以及时捕获并记录下来,开发人员可以通过日志 ...
随机推荐
- weblogic更改端口
两种方式: 1.访问console控制台页面,进入“环境\服务器\需要修改端口的服务器如AdminServer”,修改监听端口,保存并激活更改即可: 2.修改配置文件,进入weblogic的域目录,如 ...
- CCScale9Sprite 的 setContentSize setPreferredSize 区别
CCScale9Sprite 设置图片大小方式: updateButtonSpriteMark->setContentSize(size);//设置图片的原始大小设置节点的未转换大小.无论节点被 ...
- RabbitMQ--work queues（二）
封装一个task到一个message,并发送到queue.consumer会去除task并执行这个task. 这里我们简化了操作,发送消息到队列中,consumer取出消息计算里面'.'号有几个就sl ...
- Golang新起航！（编译安装go）
别废话,直接上~ linux下安装GO1.8 1.下载go的版本 国内地址源:https://dl.gocn.io/ 在这里选择源码的方式安装,在安装go的时候是需要gcc的,所以你的linux系统需 ...
- centos7 安装java和tomcat9
centos7 安装java 下载好java安装包后,首先是解压,然后配置环境变量. 在usr下新建Java文件夹,把java解压到Java文件夹中 新建文件夹 # mkdir /usr/Java 键 ...
- [android]Intent跳转新的Activity可以传递数据过去
两种方式: 一,直接通过Bundle对象来传递: 如果我们想要给“收件人”Activity说点什么的话,那么可以通过下面这封“E-mail”来将我们的消息传递出去 Intent intent=new ...
- SQLSERVER中的非工作时间不得插入数据的触发器的实现
create trigger trigger_nameon table_namefor insert,update,deleteasif (datepart(yy,getdate())%4=0 or ...
- 安装部署Apache Hadoop (完全分布式模式并且实现NameNode HA和ResourceManager HA)
本节内容: 环境规划 配置集群各节点hosts文件 安装JDK1.7 安装依赖包ssh和rsync 各节点时间同步 安装Zookeeper集群 添加Hadoop运行用户 配置主节点登录自己和其他节点不 ...
- HashMap 在 Java1.7 与 1.8 中的区别
hashMap 数据结构 如上图所示,JDK7之前hashmap又叫散列链表:基于一个数组以及多个链表的实现,hash值冲突的时候,就将对应节点以链表的形式存储. JDK8中,当同一个hash值(Ta ...
- JSP的学习二（请求转发与 重定向）
一: 1.介绍知识点 1). 本质区别: 请求的转发只发出了一次请求, 而重定向则发出了两次请求. 具体: ①. 请求的转发: 地址栏是初次发出请求的地址. 请求的重定向: 地址栏不再是初次发出的请 ...