使用webview来做一个h5页面的安卓端外壳

使用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>");
 }

---