WebView 踩坑记

1. 通过WebView调起继承微信支付的H5页面

    // 微信H5 支付 官方测试地址    String url = "http://wxpay.wxutil.com/mch/pay/h5.v2.php";    Map<String, String> extraHeaders = new HashMap<String, String>();    extraHeaders.put("Referer", "http://wxpay.wxutil.com");   // 商户申请H5时提交的授权域名    myWebView.loadUrl(url,extraHeaders); // 加载url    mClient = new WebViewClient() {            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url) {                if(url.startsWith("weixin://wap/pay?")) {                    try{                        Intent intent = new Intent();                        intent.setAction(Intent.ACTION_VIEW);                        intent.setData(Uri.parse(url));                        startActivity(intent);                    }catch (ActivityNotFoundException e){                        ToastUtil.showShortToast(FoodWebViewActivity.this,"请安装微信最新版！");                    }                    return true;                } else {                    Map<String, String> extraHeaders = new HashMap<String, String>();                    extraHeaders.put("Referer", "http://wxpay.wxutil.com");   // 微信公共测试地址                    myWebView.loadUrl(url,extraHeaders);                    return true;                }                return true;            }            @Override            public void onPageFinished(WebView view, String url) {                if (mProgressDialog != null) {                    mProgressDialog.dismiss();                }                super.onPageFinished(view, url);            }            @Override            public void onReceivedError(WebView view, int errorCode,                                        String description, String failingUrl) {                // 加载失败                if (mProgressDialog != null) {                    mProgressDialog.dismiss();                }                super.onReceivedError(view, errorCode, description, failingUrl);            }        };        myWebView.setWebViewClient(mClient);

2. 为什么 WebView 调不起 弹框

    myWebView.setWebChromeClient(new WebChromeClient() {        private ValueCallback<Uri> mUploadMessage;        @Override        public void onProgressChanged(WebView view, int newProgress) {            if (newProgress == 100) {                // 网页加载完成                // main_pb_load.setVisibility(View.GONE);            } else {                // 加载中                // if(main_pb_load.getVisibility()==View.GONE){                // main_pb_load.setVisibility(View.VISIBLE);                // }                // main_pb_load.setProgress(newProgress);            }        }        /**         * alert弹框         *         * @return         */        @Override        public boolean onJsAlert(WebView view, String url, final String message,                                 JsResult result) {            runOnUiThread(new Runnable() {                @Override                public void run() {                    new AlertDialog.Builder(BusWebViewActivity.this)                            .setTitle("温馨提示")                            .setMessage(message)                            .setPositiveButton("确定", null)                            .show();                }            });            result.cancel();//这里必须调用，否则页面会阻塞造成假死            return true;        }        @Override        public boolean onJsConfirm(WebView view, String url,                                   final String message, final JsResult result) {            runOnUiThread(new Runnable() {                @Override                public void run() {                    new AlertDialog.Builder(BusWebViewActivity.this)                            .setTitle("温馨提示")                            .setMessage(message)                            .setPositiveButton("确定", new DialogInterface.OnClickListener() {                                @Override                                public void onClick(DialogInterface dialog, int which) {                                    result.confirm();                                }                            })                            .setNegativeButton("取消", new DialogInterface.OnClickListener() {                                @Override                                public void onClick(DialogInterface dialog, int which) {                                    result.cancel();                                }                            })                            .show();                }            });            return true;        }    });

3. H5上传图片，调用起 拍照和 图库

其实上传图片的方式有两种，一种是通过设置WebChromeClient。重写WebChromeClient中关于文件选择的方法，onShowFileChooser和openFileChooser，这种方法其实是有坑的，而且麻烦，还要兼容各个版本，当然我已经实现了，但是出现了个Bug，实在是找不到解决方法，我这边简单描述一下，拍照和图库选择图片我都是可以调起，并且在网页上进行显示，但是当我第一次拍照，显示OK,但是如果我马上又拍了一张，发现图片死活显示不出来。如果我是选择图库，然后在拍照，有可以，只要我是连续拍照就不行。算了，你也看得迷糊，你遇到就会清楚。

现在我在这里介绍第二种，不会存在兼容问题，当然也有兼容问题，下面的例子已经解决，所以是OK的。
第二种：通过 H5 调用 android本地方法，调起 拍照和 图库选择，然后选择好之后，用android 调用 JS 的方法，通过把图片转为base64的字符串传递给H5，这里有个坑，就是base64比较大 在低版本的安卓机上，是传不上去的，所以呢，我们把base64 转为JsonObject 传递给 H5的 JS 方法。同样的还有一个坑，就是 如果用Base64.DEFAULT进行转换base64他会在这个base64后面加上一个换行符，所以不能用这个要用Base64.NO_WRAP 。当然如果你不兼容 低版本，直接用Base64.DEFAULT 的base64字符串直接JS是可以显示图片的，但是如果用 JsonObject 就不行。

以上的坑的解决方法我都是通过上网查找资料找到的，很可惜，没有一段完整的代码来实现这个功能，我这边特别整理了所有的坑，然后完整的代码在这里做个笔记。

当然我没有详细的将这些代码到底是干嘛的，有点基础的会知道的，不知道就百度吧，想要认真的写一篇博客，真的 是很浪费精力。我这边只是做个记录，很多小细节我都没讲，代码也不是全部完整的，但是该有的重点全部有，你照着这个搞一定可以搞定

    public class BusJavaScriptMethods  extends  JavaScriptMethods{        public BusJavaScriptMethods(Context context, WebView webView) {            super(context, webView);        }        @JavascriptInterface        public void openPhoto(int selectImageIndex) {            // 启动本地相册            ((BusWebViewActivity) context).selectImageIndex = selectImageIndex;            ((BusWebViewActivity) context).openPhoto();        }    }    private WebSettings webSettings;    webSettings = myWebView.getSettings();    webSettings.setJavaScriptEnabled(true); // 启用JS脚本    myWebView.addJavascriptInterface(                    new BusJavaScriptMethods(this, myWebView), "jsInterface");    // 这个就是 掉起 相册和拍照    public void openPhoto() {        showPhotoAlertDialog();    }    private void showPhotoAlertDialog() {            final AlertDialog alertDialog = new AlertDialog.Builder(this).create();            alertDialog.show();            Window win = alertDialog.getWindow();            win.getDecorView().setPadding(0, 0, 0, 0);            WindowManager.LayoutParams lp = win.getAttributes();            // 设置弹出框的宽高            lp.width = ViewGroup.LayoutParams.MATCH_PARENT;            lp.height = ViewGroup.LayoutParams.WRAP_CONTENT;            // 设置弹出框的位置            win.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);            win.setAttributes(lp);            win.setContentView(R.layout.dialog_user_photo);            RelativeLayout tempRl = (RelativeLayout) win                    .findViewById(R.id.rl_takevidio);            tempRl.setVisibility(View.GONE);            // 取消            RelativeLayout cancelRl = (RelativeLayout) win                    .findViewById(R.id.rl_cancle_photo);            cancelRl.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    alertDialog.cancel();                }            });            // 拍照            RelativeLayout takephotoRl = (RelativeLayout) win                    .findViewById(R.id.rl_takephoto);            takephotoRl.setBackgroundResource(R.drawable.corners_takephoto_bg);            takephotoRl.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    takePhoto();                    alertDialog.cancel();                }            });            // 从手机上传            RelativeLayout fromcameraRl = (RelativeLayout) win                    .findViewById(R.id.rl_from_camera);            fromcameraRl.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    // 调用系统相册获取图片 ，未将图片与上传至服务器                    pickPhoto();                    alertDialog.cancel();                }            });        }        /***         * 使用相册中的图片         */        public static final int SELECT_PIC_BY_PICK_PHOTO = 2;        private static final int PHOTO_REQUEST_GALLERY = 0;        private Uri photoUri;        /***         * 使用照相机拍照获取图片         */        public static final int SELECT_PIC_BY_TACK_PHOTO = 1;        /**         * 拍照获取图片         */        private void takePhoto() {            // 执行拍照前，应该先判断SD卡是否存在            String SDState = Environment.getExternalStorageState();            if (SDState.equals(Environment.MEDIA_MOUNTED)) {                Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);// "android.media.action.IMAGE_CAPTURE"                /***                 * 需要说明一下，以下操作使用照相机拍照，拍照后的图片会存放在相册中的 这里使用的这种方式有一个好处就是获取的图片是拍照后的原图                 * 如果不实用ContentValues存放照片路径的话，拍照后获取的图片为缩略图不清晰                 */                ContentValues values = new ContentValues();                photoUri = this.getContentResolver().insert(                        MediaStore.Images.Media.EXTERNAL_CONTENT_URI, values);                intent.putExtra(android.provider.MediaStore.EXTRA_OUTPUT, photoUri);                /** ----------------- */                startActivityForResult(intent, SELECT_PIC_BY_TACK_PHOTO);            } else {                MyApplication.mToast.ToastShow("内存卡不存在");            }        }        /***         * 从相册中取图片         */        private void pickPhoto() {            Intent intent = new Intent();            intent.setType("image/*");            intent.setAction(Intent.ACTION_PICK);            intent.setData(android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);// 使用以上这种模式，并添加以上两句            startActivityForResult(intent, PHOTO_REQUEST_GALLERY);        }

上面是选择图片
下面是通过onActivityResult 拿到选择的图片或者是拍照的图片，然后调用JS的方法进行传递

    @RequiresApi(api = Build.VERSION_CODES.KITKAT)    public void onActivityResult(int requestCode, int resultCode, Intent data) {        if (resultCode == Activity.RESULT_OK) {            //裁剪图片            if (requestCode == PHOTO_REQUEST_GALLERY) {                if (data == null) {                    MyApplication.mToast.ToastShow("选择图片文件出错");                    return;                }                photoUri = data.getData();                if (photoUri == null) {                    MyApplication.mToast.ToastShow("选择图片文件出错");                    return;                }                setImage(getRealFilePath(this, photoUri));            } else if (requestCode == SELECT_PIC_BY_TACK_PHOTO) {                setImage(getRealFilePath(this, photoUri));            }        }        super.onActivityResult(requestCode, resultCode, data);    }    // 这个是 和 JS 约定的 方法 "javascript:setImg('" + jsonObject + "'," + selectImageIndex + ")"    private void setImage(final String path) {        String base64String = getImageBase64(path);        if (!TextUtils.isEmpty(base64String)) {            JSONObject jsonObject = new JSONObject();            try {                jsonObject.put("img", "data:image/png;base64," + base64String);                myWebView.loadUrl("javascript:setImg('" + jsonObject + "'," + selectImageIndex + ")");            } catch (JSONException e) {            }        }    }        public String getImageBase64(String path) {            String base64Image = bitmapToBase64String(path);            return base64Image;        }        //计算图片的缩放值        public static int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight) {            final int height = options.outHeight;            final int width = options.outWidth;            int inSampleSize = 1;            if (height > reqHeight || width > reqWidth) {                final int heightRatio = Math.round((float) height / (float) reqHeight);                final int widthRatio = Math.round((float) width / (float) reqWidth);                inSampleSize = heightRatio < widthRatio ? heightRatio : widthRatio;            }            return inSampleSize;        }        // 根据路径获得图片并压缩，返回bitmap用于显示        public static Bitmap getSmallBitmap(String filePath) {            final BitmapFactory.Options options = new BitmapFactory.Options();            options.inJustDecodeBounds = true;            BitmapFactory.decodeFile(filePath, options);            // Calculate inSampleSize            options.inSampleSize = calculateInSampleSize(options, 480, 800);            // Decode bitmap with inSampleSize set            options.inJustDecodeBounds = false;            return BitmapFactory.decodeFile(filePath, options);        }        //把bitmap转换成String        public static String bitmapToBase64String(String filePath) {            Bitmap bm = getSmallBitmap(filePath);            ByteArrayOutputStream baos = new ByteArrayOutputStream();            bm.compress(Bitmap.CompressFormat.JPEG, 40, baos);            byte[] b = baos.toByteArray();            // Base64.NO_WRAP 这个坑 之前提过            return Base64.encodeToString(b, Base64.NO_WRAP);        }        public static String getRealFilePath(final Context context, final Uri uri) {            if (null == uri) return null;            final String scheme = uri.getScheme();            String data = null;            if (scheme == null)                data = uri.getPath();            else if (ContentResolver.SCHEME_FILE.equals(scheme)) {                data = uri.getPath();            } else if (ContentResolver.SCHEME_CONTENT.equals(scheme)) {                Cursor cursor = context.getContentResolver().query(uri, new String[]{MediaStore.Images.ImageColumns.DATA}, null, null, null);                if (null != cursor) {                    if (cursor.moveToFirst()) {                        int index = cursor.getColumnIndex(MediaStore.Images.ImageColumns.DATA);                        if (index > -1) {                            data = cursor.getString(index);                        }                    }                    cursor.close();                }            }            return data;        }

下面是H5 的代码，对照着看吧，你会看懂的

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0">    <meta content="telephone=no" name="format-detection">    <meta name="msapplication-tap-highlight" content="no">    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta content="yes" name="apple-mobile-web-app-capable">    <meta name="apple-touch-fullscreen" content="yes">    <meta name="format-detection" content="telephone=no">    <meta http-equiv="cleartype" content="on">    <title>图片上传测试</title>    <script src="/Public/api/js/buses/zepto.js"></script>    <script src="/Public/api/js/buses/uploadImg.js"></script>    <script src="/Public/api/js/page.js"></script><meta name="__hash__" content="f3d10c9b6eeb384d1bfc1ae58e3cbdf9_b585d710b9132dbe319f2475665d42eb" /></head><body><p>测试 JS调本地相册</p><button onclick="openPhotoFromAndroid()">JS调用相册</button><p><img id="img" src="" width="100" height="100"/></p><p>参数： <span id="param">0</span></p><br><br><button onclick="backApp()">返回</button><script type="text/javascript">    var u = navigator.userAgent;    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端    console.log('是否是Android：' + isAndroid);    console.log('是否是iOS：' + isiOS);    /**     * 调用安卓打开相册对应的openPhoto方法     */    function openPhotoFromAndroid() {        //调用Android的方法启动相册/拍照        //if (isAndroid) alert('当前系统为：安卓');        //if (isiOS) alert('当前系统为：IOS');        window.runApp('openPhoto', rnd(1, 2));        // 这边做过封装，想要掉我的android代码，应该这样写        // window.jsInterface.openPhoto(rnd(1, 2));        // 这个jsInterface不是乱取的是和android那边定义好的，具体看myWebView.addJavascriptInterface(new BusJavaScriptMethods(this, myWebView), "jsInterface");    }    /**     * 安卓调用的js方法，将图片路径返回     * @param path     * @param id     */    function setImg(path, id) {        try {            alert('返回数据类型：' + typeof path);            path = JSON.parse(path);            alert(' 解析后的数据:' + path.img);            //$('#img').attr('src', path[0].img);            //$('#param').text(id);            //readFile();        } catch (err) {            alert('设置图片路径发生错误：' + err.message);        }    }    /**     * 读取文件并转为base64     * @returns {boolean}     */    function readFile() {        alert('开始读取图片');        var path = $('#img').attr('src');        lrz(path).then(function (rst) {            console.log(rst);            $('#img').attr('src', rst.base64);        }).catch(function (err) {            // 处理失败会执行            alert('读取图片发生错误1：' + err.message + ' 图片路径为：' + path);        }).always(function () {            // 不管是成功失败，都会执行        });    }    /**     * 调用app退出浏览器的方法     */    function backApp() {        window.runApp('stopWebActivity');// 这边做过封装，想要掉我的android代码，应该这样写window.jsInterface.stopWebActivity();    }    function rnd(min, max) {        return min + Math.floor(Math.random() * (max - min + 1));    }</script></body></html>