Android与H5界面的交互(参数互传)以及遇到的一些问题

前言

在开发项目时,有部分界面是H5界面,原本以为直接加载H5界面就能搞定,后来还是遇到参数互传问题了,然后网上意见不一,只好自己摸索,下面就给大家聊聊我遇到的问题~~~

1.先给大家看看成功之后的界面跳转:

解释一下:
界面跳转流程: 首页的限时特卖–>限时特卖的H5界面–>商品详情页.

(1)由App原生界面跳转

由首页的限时特卖进入显示特卖的H5界面:
直接将后台返回的H5链接加载到WebView界面,对大家来说肯定没有丝毫难度吧,在这里就不粘代码了

---

(2)从H5的商品列表页进入到商品详情页时需要商品的id,这就真正的涉及到与H5的交互了,看代码:

public class MyGoods {
    Context context;

    public MyGoods(Context context) {
        this.context = context;
    }

    //该方法将暴露给js调用,打来商品详情页
    @JavascriptInterface
    public void getCall(String goodsid) {
        Intent intent = new Intent(context, GoodsDetailsAct.class);
        intent.putExtra("goods_id", goodsid);
        context.startActivity(intent);
    }
}

定义一个全局的类,在这个类里面只需要写一个Intent,打开商品详情页,并将id传过去;MyGoods中的方法使用@JavascriptInterface修饰,因此会将这两个方法暴露给JS脚本,则允许JS脚本通过MyGood来调用MyGoods里面的方法:

然后我自己封装了一个关于公共的加载WebView的类:
初始化完成之后作如下操作:

WVJBWebView.getSettings().setJavaScriptEnabled(true);
WVJBWebView.addJavascriptInterface(new MyGoods(PublicWebViewAct.this), "MyGood");

第一行代码开启了JS调用Android方法的功能;第二行则负责将Android应用中的MyGoods对象暴露给JS脚本;

前端的同学在他的代码里只写了一下这行代码:

MyGood.getCall(goods_id);

最后就大功告成了,点击的条目的Id就传过来了~~~

2.在与H5交互过程中遇到其他的问题

(1) 我们H5界面比较多,然后我们的界面的标题栏用的都是原生的,然后前端同学就把自己H5界面的标题栏给干掉了,之后就需要获取标题,然后就在网上找到了这个方法:

每次加载新的界面就能获取到该H5界面的标题,当然了,这也离不开H5同学的配合哦~~

(2) 关于H5界面在Android5.0 以上系统加载报错的问题:

if (android.os.Build.VERSION.SDK_INT >= 21) {
            WVJBWebView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

        }

在加载数据之前做个判断就行了,设置上面的属性就没问题了;

(3) 在一个比较复杂的H5界面需要调用系统的相册和摄像头,在调用时 APP崩溃:

WVJBWebView.setWebChromeClient(new WebChromeClient() {

            // For Android < 3.0
            public void openFileChooser(ValueCallback<Uri> valueCallback) {
                uploadMessage = valueCallback;
                openImageChooserActivity();
            }

            // For Android  >= 3.0
            public void openFileChooser(ValueCallback valueCallback, String acceptType) {
                uploadMessage = valueCallback;
                openImageChooserActivity();
            }

            //For Android  >= 4.1
            public void openFileChooser(ValueCallback<Uri> valueCallback,
                                        String acceptType, String capture) {
                uploadMessage = valueCallback;
                openImageChooserActivity();
            }

            // For Android >= 5.0
            @Override
            public boolean onShowFileChooser(WebView webView,
                                             ValueCallback<Uri[]> filePathCallback,
                                             WebChromeClient.FileChooserParams fileChooserParams) {

                uploadMessageAboveL = filePathCallback;
                openImageChooserActivity();
                return true;
            }
        });

打开图库的方法:

    private void openImageChooserActivity() {
        Intent i = new Intent(Intent.ACTION_GET_CONTENT);
        i.addCategory(Intent.CATEGORY_OPENABLE);
        i.setType("image/*");
        startActivityForResult(Intent.createChooser(i,"ImageChooser"),FILE_CHOOSER_RESULT_CODE);
    }

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == FILE_CHOOSER_RESULT_CODE) {
            if (null == uploadMessage && null == uploadMessageAboveL) return;
            Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
            if (uploadMessageAboveL != null) {
                onActivityResultAboveL(requestCode, resultCode, data);
            } else if (uploadMessage != null) {
                uploadMessage.onReceiveValue(result);
                uploadMessage = null;
            }
        }
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private void onActivityResultAboveL(int requestCode, int resultCode, Intent intent) {
        if (requestCode != FILE_CHOOSER_RESULT_CODE || uploadMessageAboveL == null)
            return;
        Uri[] results = null;
        if (resultCode == Activity.RESULT_OK) {
            if (intent != null) {
                String dataString = intent.getDataString();
                ClipData clipData = intent.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)};
            }
        }
        uploadMessageAboveL.onReceiveValue(results);
        uploadMessageAboveL = null;
    }

在加载WebView时遇到的主要问题就是这些了,只是给大家单纯的做一个实用的代码总结,做到上手能用就行,想了解更多底层原理的同学需要自己努力了哦~~我只是个小菜鸟

需要我那个公共的WebView的同学可以私信或者加我QQ哦,祝大家工作顺利~~~