使用webview来做一个h5页面的安卓端外壳
之前工作上需要做一个安卓端来加载项目里写的h5页面,主要思路就是使用webview进行加载页面,而一些原生的操作如打开相册、打开相机、扫描二维码等通过安卓端完成。东西很少，大多数都是网络上的demo集成的。
代码块
通过这个LoadActivity 完成大部分操作：
public class LoadActivity extends Activity {
private static final int CAMERA_CODE = 1;//拍照
private static final int GALLERY_CODE = 2;//相册
private static final int CROP_CODE = 3;//剪裁
private static final int QROP_CODE = 49374;//二维码
private WebView webView;
private String url;
private String mainurl;
private int version;
private String type;
private String clientid;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
url = getResources().getString(R.string.url);
mainurl = getResources().getString(R.string.mainurl);
version = Build.VERSION.SDK_INT;// Android版本变量
PushManager.getInstance().initialize(this.getApplicationContext(), fire.main.PushService.class);//个推
// IntentService 为第三方自定义的推送服务事件接收类
PushManager.getInstance().registerPushIntentService(this.getApplicationContext(), fire.main.IntentService.class);
clientid = PushManager.getInstance().getClientid(this.getApplicationContext());
//设置窗口风格为进度条
getWindow().requestFeature(Window.FEATURE_PROGRESS);
setContentView(R.layout.load);
webView = (WebView) findViewById(R.id.webView);
WebSettings settings = webView.getSettings();
settings.setSupportZoom(true); //支持缩放
settings.setBuiltInZoomControls(true); //启用内置缩放装置
settings.setJavaScriptEnabled(true); //启用JS脚本
settings.setAllowFileAccess(true);// 设置允许访问文件数据
webView.addJavascriptInterface(this,"android");
// 由于设置了弹窗检验调用结果,所以需要支持js对话框
// webview只是载体，内容的渲染需要使用webviewChromClient类去实现
// 通过设置WebChromeClient对象处理JavaScript的对话框
//设置响应js 的Alert()函数
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(LoadActivity.this);
b.setTitle("测试题目");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
});
webView.setWebViewClient(new WebViewClient() {
//当点击链接时,希望覆盖而不是打开新窗口
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.toLowerCase().equals("qrscan:exec")) {
IntentIntegrator intentIntegrator = new IntentIntegrator(LoadActivity.this);
intentIntegrator.setPrompt("请进行二维码扫描");
//设置方向锁不被锁定
intentIntegrator.setOrientationLocked(false);
// 开始扫描
intentIntegrator.initiateScan();
return true;
}
if (url.toLowerCase().indexOf("take:exec") != -1) {//相机拍照
type = (url.toLowerCase().toString()).substring(url.toLowerCase().indexOf("=") + 1);
chooseFromCamera();
return true;
}
if (url.toLowerCase().indexOf("select:exec") != -1) {//相册选择
type = (url.toLowerCase().toString()).substring(url.toLowerCase().indexOf("=") + 1);
chooseFromGallery();
return true;
}
view.loadUrl(url); //加载新的url
return true; //返回true,代表事件已处理,事件流到此终止
}
});
settings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗
webView.setWebChromeClient(new WebChromeClient() {
//当WebView进度改变时更新窗口进度
@Override
public void onProgressChanged(WebView view, int newProgress) {
//Activity的进度范围在0到10000之间,所以这里要乘以100
LoadActivity.this.setProgress(newProgress * 100);
}
});
webView.loadUrl(url);
}
/**
* 按键响应，在WebView中查看网页时，按返回键的时候按浏览历史退回,如果不做此项处理则整个WebView返回退出
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
//判断是否可以返回操作
if (webView.canGoBack() && event.getKeyCode() == KeyEvent.KEYCODE_BACK) {
//获取历史列表
WebBackForwardList mWebBackForwardList = webView
.copyBackForwardList();
//判断当前历史列表是否最顶端,其实canGoBack已经判断过
if (mWebBackForwardList.getCurrentIndex() > 0) {
//获取历史列表
String historyUrl = mWebBackForwardList.getItemAtIndex(
mWebBackForwardList.getCurrentIndex() - 1).getUrl();
//按照自己规则检查是否为可跳转地址
//注意:这里可以根据自己逻辑循环判断,拿到可以跳转的那一个然后webView.goBackOrForward(steps)
// steps为负数时，表示回退，正数表示向前
String nurl= webView.getUrl();
if (!historyUrl.contains(url)&&!nurl.contains(mainurl)) {
//执行跳转逻辑
webView.goBack();
return true;
} else {
//弹出确认框确认退出
dialog();
return true;
}
}
}
return super.onKeyDown(keyCode, event);
}
private void dialog() {
AlertDialog.Builder builder = new AlertDialog.Builder(LoadActivity.this);
builder.setMessage("确认要退出么？");
builder.setTitle("提示");
builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
//TODOAuto-generatedmethodstub
dialog.dismiss();
finish();
}
});
builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
//TODOAuto-generatedmethodstub
dialog.dismiss();
}
});
builder.show();
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
switch (requestCode) {
case CAMERA_CODE:
//用户点击了取消
if (data == null) {
return;
} else {
Bundle extras = data.getExtras();
if (extras != null) {
//如果需要剪裁.按下方所示
//获得拍的照片
//Bitmap bm = extras.getParcelable("data");
//将Bitmap转化为uri
//Uri uri = saveBitmap(bm, "temp");
//启动图像裁剪
//startImageZoom(uri);
Bitmap bm = extras.getParcelable("data");
sendPhoto(bm);//发送图片数据
}
}
break;
case GALLERY_CODE:
if (data == null) {
return;
} else {
Bundle extras = data.getExtras();
if (extras != null) {
//用户从图库选择图片后会返回所选图片的Uri
Uri uri;
//获取到用户所选图片的Uri
uri = data.getData();
//返回的Uri为content类型的Uri,不能进行复制等操作,需要转换为文件Uri
uri = convertUri(uri);
//如果需要剪裁.按下方所示
//startImageZoom(uri);
try {
Bitmap bm = getBitmapFormUri(LoadActivity.this, uri);
//Bitmap bm = MediaStore.Images.Media.getBitmap(this.getContentResolver(), uri);
sendPhoto(bm);//发送图片数据
} catch (IOException e) {
e.printStackTrace();
}
}
}
break;
case CROP_CODE:
if (data == null) {
return;
} else {
Bundle extras = data.getExtras();
if (extras != null) {
//获取到裁剪后的图像
Bitmap bm = extras.getParcelable("data");
//获取Bitmap并用自己封装的工具类解释成base64
String baseData = bitmapToBase64(bm);
sendPhoto(bm);//发送图片数据
}
}
break;
case QROP_CODE:
// 获取解析结果(二维码)
IntentResult result = IntentIntegrator.parseActivityResult(requestCode, resultCode, data);
if (result != null) {
if (result.getContents() == null) {
Toast.makeText(this, "取消扫描", Toast.LENGTH_LONG).show();
} else {
final String qrcode = result.getContents();
// 先载入JS代码
webView.loadUrl(webView.getUrl());
webView.post(new Runnable() {
@Override
public void run() {
// 注意调用的JS方法名要对应上
// 调用javascript的getQrcode()方法
webView.loadUrl("javascript:getQrcode(\"" + qrcode + "\")");
}
});
}
} else {
super.onActivityResult(requestCode, resultCode, data);
}
break;
default:
break;
}
}
/**
* 拍照选择图片
*/
private void chooseFromCamera() {
//构建隐式Intent
Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
//调用系统相机
startActivityForResult(intent, CAMERA_CODE);
}
/**
* 从相册选择图片
*/
private void chooseFromGallery() {
//构建一个内容选择的Intent
Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
//设置选择类型为图片类型
intent.setType("image/*");
//打开图片选择
startActivityForResult(intent, GALLERY_CODE);
}
/**
* 将content类型的Uri转化为文件类型的Uri
*
* @param uri
* @return
*/
private Uri convertUri(Uri uri) {
InputStream is;
try {
//Uri ----> InputStream
is = getContentResolver().openInputStream(uri);
//InputStream ----> Bitmap
Bitmap bm = BitmapFactory.decodeStream(is);
//关闭流
is.close();
return saveBitmap(bm, "temp");
} catch (FileNotFoundException e) {
e.printStackTrace();
return null;
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
/**
* 将Bitmap写入SD卡中的一个文件中,并返回写入文件的Uri
*
* @param bm
* @param dirPath
* @return
*/
private Uri saveBitmap(Bitmap bm, String dirPath) {
//新建文件夹用于存放裁剪后的图片
File tmpDir = new File(Environment.getExternalStorageDirectory() + "/" + dirPath);
if (!tmpDir.exists()) {
tmpDir.mkdir();
}
//新建文件存储裁剪后的图片
File img = new File(tmpDir.getAbsolutePath() + "/avator.png");
try {
//打开文件输出流
FileOutputStream fos = new FileOutputStream(img);
//将bitmap压缩后写入输出流(参数依次为图片格式、图片质量和输出流)
bm.compress(Bitmap.CompressFormat.PNG, 85, fos);
//刷新输出流
fos.flush();
//关闭输出流
fos.close();
//返回File类型的Uri
return Uri.fromFile(img);
} catch (FileNotFoundException e) {
e.printStackTrace();
return null;
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
/**
* 通过Uri传递图像信息以供裁剪
*
* @param uri
*/
private void startImageZoom(Uri uri) {
//构建隐式Intent来启动裁剪程序
Intent intent = new Intent("com.android.camera.action.CROP");
//设置数据uri和类型为图片类型
intent.setDataAndType(uri, "image/*");
//显示View为可裁剪的
intent.putExtra("crop", true);
//裁剪的宽高的比例为1:1
intent.putExtra("aspectX", 16);
intent.putExtra("aspectY", 9);
//输出图片的宽高均为150
intent.putExtra("outputX", 800);
intent.putExtra("outputY", 400);
//裁剪之后的数据是通过Intent返回
intent.putExtra("return-data", true);
startActivityForResult(intent, CROP_CODE);
}
/**
* 部分低端机可能会因为字符串太长而不能直接传base64
* 需要把base64封装到JSON对象中
*/
public void sendPhoto(Bitmap bm) {
//获取Bitmap并用自己封装的工具类解释成base64
String baseData = bitmapToBase64(bm);
if (!TextUtils.isEmpty(baseData)) {
final JSONObject jsonObject = new JSONObject();
try {
jsonObject.put("img", "data:image/png;base64," + baseData);
jsonObject.put("type", type);
webView.post(new Runnable() {
@Override
public void run() {
// 注意调用的JS方法名要对应上
// 调用javascript的getPhoto()方法
webView.loadUrl("javascript:" + "getPhoto" + "(" + jsonObject + ")");
}
});
} catch (JSONException e) {
//TODO
}
}
}
/**
* bitmap转化base64
*/
public static String bitmapToBase64(Bitmap bitmap) {
String result = null;
ByteArrayOutputStream baos = null;
try {
if (bitmap != null) {
baos = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, baos);
try {
baos.flush();
baos.close();
} catch (IOException e) {
e.printStackTrace();
}
byte[] bitmapBytes = baos.toByteArray();
result = Base64.encodeToString(bitmapBytes, Base64.DEFAULT);
}
} finally {
try {
if (baos != null) {
baos.flush();
baos.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return result;
}
public static Bitmap getBitmapFormUri(Activity ac, Uri uri) throws FileNotFoundException, IOException {
InputStream input = ac.getContentResolver().openInputStream(uri);
BitmapFactory.Options onlyBoundsOptions = new BitmapFactory.Options();
onlyBoundsOptions.inJustDecodeBounds = true;
onlyBoundsOptions.inDither = true;//optional
onlyBoundsOptions.inPreferredConfig = Bitmap.Config.ARGB_8888;//optional
BitmapFactory.decodeStream(input, null, onlyBoundsOptions);
input.close();
int originalWidth = onlyBoundsOptions.outWidth;
int originalHeight = onlyBoundsOptions.outHeight;
if ((originalWidth == -1) || (originalHeight == -1))
return null;
//图片分辨率以480x800为标准
float hh = 800f;//这里设置高度为800f
float ww = 480f;//这里设置宽度为480f
//缩放比。由于是固定比例缩放，只用高或者宽其中一个数据进行计算即可
int be = 1;//be=1表示不缩放
if (originalWidth > originalHeight && originalWidth > ww) {//如果宽度大的话根据宽度固定大小缩放
be = (int) (originalWidth / ww);
} else if (originalWidth < originalHeight && originalHeight > hh) {//如果高度高的话根据宽度固定大小缩放
be = (int) (originalHeight / hh);
}
if (be <= 0)
be = 1;
//比例压缩
BitmapFactory.Options bitmapOptions = new BitmapFactory.Options();
bitmapOptions.inSampleSize = be;//设置缩放比例
bitmapOptions.inDither = true;//optional
bitmapOptions.inPreferredConfig = Bitmap.Config.ARGB_8888;//optional
input = ac.getContentResolver().openInputStream(uri);
Bitmap bitmap = BitmapFactory.decodeStream(input, null, bitmapOptions);
input.close();
return compressImage(bitmap);//再进行质量压缩
}
/**
* 质量压缩方法
*
* @param image
* @return
*/
public static Bitmap compressImage(Bitmap image) {
ByteArrayOutputStream baos = new ByteArrayOutputStream();
image.compress(Bitmap.CompressFormat.JPEG, 100, baos);//质量压缩方法，这里100表示不压缩，把压缩后的数据存放到baos中
int options = 100;
while (baos.toByteArray().length / 1024 > 100) { //循环判断如果压缩后图片是否大于100kb,大于继续压缩
baos.reset();//重置baos即清空baos
//第一个参数 ：图片格式 ，第二个参数： 图片质量，100为最高，0为最差 ，第三个参数：保存压缩后的数据的流
image.compress(Bitmap.CompressFormat.JPEG, options, baos);//这里压缩options%，把压缩后的数据存放到baos中
options -= 10;//每次都减少10
}
ByteArrayInputStream isBm = new ByteArrayInputStream(baos.toByteArray());//把压缩后的数据baos存放到ByteArrayInputStream中
Bitmap bitmap = BitmapFactory.decodeStream(isBm, null, null);//把ByteArrayInputStream数据生成图片
return bitmap;
}
@JavascriptInterface
public String getClientid() {
//返回给集成个推需要的clientid
return clientid;
}
}加载webview使用的页面
就使用一个webview加载进入 简单粗暴：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView" />
</LinearLayout>JavaScript上的一些交互
//向安卓发送获取clientid值
var clientid = window.android.getClientid();
//向android端发送二维码扫描请求、拍照、相册选取
function qrcode() {
location.href = "qrscan:exec";
}
/**
* 获取安卓端返回的二维码
* @result 二维码字符串
* */
function getQrcode(result) {
window.location.href = "test.html?id=" + result;
}
/*
* 接收android传送图片
* @param {jsonObject} jsonObject : img:图片base64的src地址
*
*/
function getPhoto(jsonObject) {
var div = $("#ImgDiv");
//在div中显示图片
div.append("<div class='imgNode'><img type='file' style=\"width: 100%\" src=\" " + jsonObject.img + " \" data-preview-src=\"\" data-preview-group=\"1\"/></div>");
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
