美文网首页
Android webView 注入js文件,及交互

Android webView 注入js文件,及交互

作者: 郭某人1 | 来源:发表于2019-04-19 17:20 被阅读0次

    0.js文件:

    链接:https://pan.baidu.com/s/1MaWKxgkYgQTVQCgn8-dxLg
    提取码:o6wy

    1. 读取js文件内容
     /**
         * 获取js文件内容
         *
         * @param context  参数为当前上下文对象
         * @param fileName 参数为要获取的js文件名称
         * @return
         */
        public static String getJS(Context context, String fileName) {
            InputStream inputStream = null;
            ByteArrayOutputStream outputStream = null;
            try {
                inputStream = context.getAssets().open(fileName);
                outputStream = new ByteArrayOutputStream();
                int len = 0;
                byte[] buffer = new byte[2048];
                while ((len = inputStream.read(buffer)) != -1) {
                    outputStream.write(buffer, 0, len);
                }
                return new String(outputStream.toByteArray());
            } catch (IOException e) {
                e.printStackTrace();
            } finally {
                if (outputStream != null) {
                    try {
                        outputStream.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
                if (inputStream != null) {
                    try {
                        inputStream.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
            return null;
        }
    
    }
    
     webViewsettings.setJavaScriptEnabled(true);
    

    3.添加js要调用的Android方法

    public class JavaScriptUtil {
        @JavascriptInterface
        public void pushMessage(String serialNumber, String params, String methodName) {
       Log.i("serialNumber",serialNumber);
       Log.i("params",params);
       Log.i("methodName",methodName);
      EventBusCarrier eventBusCarrier = new EventBusCarrier();
            eventBusCarrier.setEventType(EventTypeGlobal.CONTACT_CHANGED_TYPE);
            if (TextUtils.equals(methodName, "testMethod")) {
              // 处理并发送消息
                eventBusCarrier.setEventType(methodName);
                eventBusCarrier.setObject(serialNumber);
                EventBus.getDefault().post(eventBusCarrier);
            }
            }
        }
    }
    

    4.添加 (JsBridge:js中调用Android方法的对象名)

    webView.addJavascriptInterface(new JavaScriptUtil(), "JsBridge");
    

    5.注入js

       binding.jsWebView.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    view.loadUrl(url);
                    return true;
                }
    
                @Override
                public void onPageStarted(WebView view, String url, Bitmap favicon) {
                    super.onPageStarted(view, url, favicon);
                    if (mInjection) {
                        mInjection = false;
                    }
                }
    
                @Override
                public void onLoadResource(WebView view, String url) {
                    super.onLoadResource(view, url);
                    if (mInjection) {
                        return;
                    }
                    if (url.endsWith(".js") || url.endsWith(".css")) {  // 如果是注入到本地html中去掉这个判断
                       // 调用注入方法
                        onJsLocal();
                        mInjection = true;
                    }
                }
            });
        }
    
      @SuppressLint("ObsoleteSdkInt")
        public void onJsLocal() {
            StringBuilder builder = new StringBuilder(JSTools.getJS(this, "test.js"));
            if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.KITKAT) {
                binding.jsWebView.loadUrl("javascript:" + builder.toString());
            } else {
                binding.jsWebView.evaluateJavascript(builder.toString(), new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        Log.i("onReceiveValue", value);
                    }
                });
            }
        }
    

    6.Android 调用js方法 传值给js
    步骤 3 中发送了处理后的消息,在webactivity中接受消息并处理:

        @Subscribe(threadMode = ThreadMode.MAIN)
        public void onHandleEvent(EventBusCarrier busCarrier) {
           if (null != busCarrier) {
                if (TextUtils.equals(busCarrier.getEventType(), "testMethod")) {
                     //....
                    // 调用js方法传数据
                    onJSCallback(data1, data2);
                }
            }
        }
    
        /**
         * 执行JS回调,用于关闭web支付对话框
         *
         * @param serialNumber 参数为服务端返回的交易hash
         */
        public void onJSCallback(String data1, String data2) {
            StringBuilder sb = new StringBuilder("callbackResult(\'" + data1+ "\',\'{\"data\":\"");
            sb.append(data2);
            sb.append("\"}\')");
            if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.KITKAT) {
                sb.insert(0, "javascript:");
                binding.jsWebView.loadUrl(sb.toString());
                Log.i("javascript", sb.toString());
            } else {
                binding.jsWebView.evaluateJavascript(sb.toString(), null);
                Log.i("javascript", sb.toString());
            }
        }
    

    数据示例:(参数需要使用单引号包着)
    else 中对应的
    callbackResult('sr1557665118336','{"data":"test"}')
    if中对应的
    javascript:callbackResult('sr1557665118336','{"data":"test"}')

    7.补充:eventbus 消息实体封装类

    public class EventBusCarrier {
        private String eventType; //区分事件的类型
        private Object object;  //事件的实体类
    
        public String getEventType() {
            return eventType;
        }
    
        public void setEventType(String eventType) {
            this.eventType = eventType;
        }
    
        public Object getObject() {
            return object;
        }
    
        public void setObject(Object object) {
            this.object = object;
        }
    }
    

    8.总结:

    2.、3 、 4 js 调用Android方法;
    5    js文件注入;
    6   Android 调用 Js

    相关文章

      网友评论

          本文标题:Android webView 注入js文件,及交互

          本文链接:https://www.haomeiwen.com/subject/eohcgqtx.html