原生+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进行日志记录. 日志在开发中的作用是很重要的,使用日志,程序出了错误可以及时捕获并记录下来,开发人员可以通过日志 ...
随机推荐
- ArcMap2SLD添加中文支持
首先,你可以从作者提供的链接下载ArcMap2SLD.zip(支持ArcMap10.2) 1.打开LUT_sld_mapping_file.xml文件(上传文件中已经修改)修改文件<LUT> ...
- 洛谷P2024食物链
传送门啦 这道题的特殊之处在于对于任意一个并查集,只要告诉你某个节点的物种,你就可以知道所有节点对应的物种. 比如一条长为4的链 甲->乙->丙->丁 ,我们知道乙是A物种.那么甲一 ...
- java 内部类的继承
因为内部类的构造器必须连接到指向其外部类对象的引用. 因为在继承内部类的时候那个指向外部类对象的"秘密的"引用必须被初始化,而在导出类中不再存在可连接的默认对象,要解决这个问题必须 ...
- Linux学习笔记：644、755、777权限详解
一.问题 1.在Linux或者Android系统下用命令ll或者ls -la的时候会看到前面-rw-rw-r--一串字符,不知道代表什么? 2.新建vi一个文件之后,经常需要chmod 755 fil ...
- Effective STL 学习笔记 Item 16：vector, string & C API
有时需要支持 C 的接口,但这并不复杂. 对于 vector 来讲, \(v[0]\) 的地址 \(\&v[0]\) 即可作为数组指针传递给 C API: 1: // Legacy C API ...
- Fedora下Eclipse/MyEclipse崩溃的解决方案
Fedora19下使用myeclipse2013时,打开不到一分钟就异常关闭. 默认在home目录下生成一个log文件,里面显示的错误信息,说是libsoup.so文件导致出错.第一个想法是删除这个文 ...
- hdu 1085 有num1个 1 ，num2个 2 ，num3个 5 （母函数）
有num1个 1 ,num2个 2 ,num3个 5问它们不能组成的最小正整数是谁 样例的母函数 (1+X)(1+X2)(1+X5+X10+X15)展开后 X4的系数为0 Sample Input1 ...
- Ionic Js十五：对话框
$ionicPopup ionic 对话框服务允许程序创建.显示弹出窗口. $ionicPopup 提供了3个方法:alert(), prompt(),以及 confirm() . 实例 HTML 代 ...
- PHP经典算法百钱买小鸡
遇到一道有趣的题,并计算2种方法的效率,发现如果穷举所有组合竟高达1000000次排列~所以简化到了600次.所以,你的一个条件,或者一个运算,可能会提高几千倍的效率! <?php header ...
- Java 内存模型基础
一.并发编程模型的两个关键问题 1. 线程之间如何通信 通信是指线程之间以何种机制来交换信息. 在命令式编程中,线程之间的通信机制有两种:共享内存和消息传递. 在共享内存的并发模型里,线程之间共享程序 ...