原生android与H5交互

前面讲解方法，结尾放代码

android调用H5方法

首先需要一个WebView

/*查找到WebView控件*/
mWebView = (WebView) findViewById(R.id.webView);/*给WebView一个H5的链接，这里使用的是自己启动的Vue项目*/
mWebView.loadUrl("http://10.20.58.190:8081/");/*对WebView进行设置*/
WebSettings webSettings = mWebView.getSettings();/*既然要调用H5的方法，那么一定不能禁用JS方法*/
webSettings.setJavaScriptEnabled(true);

方法一：使用WebView的loadUrl()方法，以loadUrl(script)的方式调用

android方法：

/*在某处写入这一行代码即可*/
mWebView.loadUrl("javascript:test1Fun('使用这种方法无法取得返回参数，且会刷新页面,如果js函数有返回值，则页面会仅展示返回值')");

需要H5支持：

/*
这里使用的是Vue，对data里的test1Content 进行了修改
*/
test1Fun(str){this.test1Content = str;// return "调用test1Fun成功";
}/*
要注意的是，如果使用原生H5，直接在页面的JavaScript标签里写入一个方法即可
但是如果使用vue来写的话，需要将此方法暴露给window，如下
*/
mounted(){window.test1Fun = this.test1Fun;
}

这种方法比较简单，但是缺点在于android无法获取函数的返回值
注：如果调用的函数存在返回值的话，那么H5的页面会只显示返回值

方法二：使用WebView的evaluateJavascript()方法

android方法：

mWebView.evaluateJavascript("test2Fun('使用这种方法可以取得返回参数，且不会刷新页面')", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {text2.setText(value);}
});

这种方法同样需要H5支持，同上：

test2Fun(str){this.test2Content = str;return "调用test2Fun成功";
}/*同样需要暴露到window*/
mounted(){window.test2Fun = this.test2Fun;
}

这种方法比上一种方法更为灵活，且能够获取返回值

H5调用android

方法一：使用WebView的addJavascriptInterface()方法注入对象。

android注入：

/*将JsInteration注入到h5的window.android中*/
mWebView.addJavascriptInterface(new JsInteration(), "android");/*这里实现JsInteration */
public class JsInteration {@JavascriptInterfacepublic String JsCallJava1(String value) {text3.setText(value);return "调用JsCallJava1成功";}}

H5调用：

useJsCallJava1(){let a = window.android.JsCallJava1("我是JsCallJava1的返回值");this.JsCallJava1Content = a;}

这种方式运用最为广泛，一些企业级的项目都是以此为基础搭建H5调用android的桥方法，当然，为了防止注入过多的方法，参数一般是JSON字符串格式，在android获取到参数后，会将其转换为JSON，然后根据其状态，进行后续的操作反馈。

方法二：使用WebViewClient 的shouldOverrideUrlLoading()方法回调拦截请求。

android方法：

/*这里的url是H5将要进行跳转的链接，使用这个方法进行拦截*/
mWebView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {if (url.equals("http://10.20.58.190:8081/intercept")) {text4.setText("intercept");
//                    startActivity(new Intent(MainActivity.this,SecondFragment.class));return true;} else {mWebView.loadUrl(url);return false;}}});

H5调用：

location.href = "http://10.20.58.190:8081/intercept";

注：这里一般是用于拦截链接，如果shouldOverrideUrlLoading的返回值为true，则会进行拦截，H5不进行跳转，否则则进行跳转

方法三：重写 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息。

android方法：

mWebView.setWebChromeClient(new WebChromeClient(){@Overridepublic boolean onJsAlert(WebView view, String url, String message, JsResult result){if (message.equals("alert")){alert.setText("成功");}return super.onJsAlert(view, url, message, result);}@Overridepublic boolean onJsConfirm(WebView view, String url, String message, JsResult result) {if (message.equals("confirm")){confirm.setText("成功");}return super.onJsConfirm(view, url, message, result);}@Overridepublic boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {if (message.equals("prompt")){prompt.setText("成功");}return super.onJsPrompt(view, url, message, defaultValue, result);}});

H5触发：

useJsCallJava3(judge){if(judge == 1){alert('alert')}if(judge == 2){confirm('confirm')}if(judge == 3){prompt('prompt')}}

此方法将会监听三种弹窗，用户可以根据弹窗内容进行判断，但是请注意
如果在android拦截后，return了true，则会默认客户会对弹窗进行处理，所以我们要对弹窗进行额外处理，否则H5页面就会卡死。
因此这种方法为了避免麻烦，还是少用为好，并且不对弹窗进行拦截，仅监听即可。

最后，完整的demo如下

MainActivity.java：

package com.example.study_android_java_javascript;import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.TextView;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {public static final String TAG = "MainActivity";private WebView mWebView;private TextView text1;private TextView text2;private TextView text3;private TextView text4;private Button btn1;private Button btn2;private Button btn_clear;private TextView alert;private TextView confirm;private TextView prompt;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);text1 =findViewById(R.id.text1);text2 =findViewById(R.id.text2);text3 = findViewById(R.id.text3);text4 = findViewById(R.id.text4);alert = findViewById(R.id.alert);confirm = findViewById(R.id.confirm);prompt = findViewById(R.id.prompt);btn1 = (Button) findViewById(R.id.btn1);btn1.setOnClickListener(new View.OnClickListener(){@Overridepublic void onClick(View view) {mWebView.loadUrl("javascript:test1Fun('使用这种方法无法取得返回参数，且会刷新页面,如果js函数有返回值，则页面会仅展示返回值')");}});btn2 = (Button) findViewById(R.id.btn2);btn2.setOnClickListener(new View.OnClickListener(){@Overridepublic void onClick(View view) {mWebView.evaluateJavascript("test2Fun('使用这种方法可以取得返回参数，且不会刷新页面')", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {text2.setText(value);}});}});btn_clear = findViewById(R.id.btn_clear);btn_clear.setOnClickListener(new View.OnClickListener(){@Overridepublic void onClick(View view) {mWebView.loadUrl("javascript:clearContent()");text2.setText("暂无返回");}});mWebView = (WebView) findViewById(R.id.webView);mWebView.loadUrl("http://10.20.58.190:8081/");WebSettings webSettings = mWebView.getSettings();webSettings.setJavaScriptEnabled(true);mWebView.addJavascriptInterface(new JsInteration(), "android");mWebView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {if (url.equals("http://10.20.58.190:8081/intercept")) {text4.setText("intercept");
//                    startActivity(new Intent(MainActivity.this,SecondFragment.class));return true;} else {mWebView.loadUrl(url);return false;}}});mWebView.setWebChromeClient(new WebChromeClient(){@Overridepublic boolean onJsAlert(WebView view, String url, String message, JsResult result){if (message.equals("alert")){alert.setText("成功");}return super.onJsAlert(view, url, message, result);}@Overridepublic boolean onJsConfirm(WebView view, String url, String message, JsResult result) {if (message.equals("confirm")){confirm.setText("成功");}return super.onJsConfirm(view, url, message, result);}@Overridepublic boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {if (message.equals("prompt")){prompt.setText("成功");}return super.onJsPrompt(view, url, message, defaultValue, result);}});}//Android调用有返回值js方法public class JsInteration {@JavascriptInterfacepublic String JsCallJava1(String value) {text3.setText(value);return "调用JsCallJava1成功";}}}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center_horizontal"><WebViewandroid:layout_width="match_parent"android:layout_height="200dp"android:id="@+id/webView"/><Buttonandroid:id="@+id/btn1"android:layout_width="match_parent"android:layout_height="wrap_content"android:textAllCaps="false"android:text="使用webview.loadUrl()调用JavaScript方法"/><TextViewandroid:id="@+id/text1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="暂无返回"/><TextViewandroid:layout_width="match_parent"android:layout_height="20dp"/><Buttonandroid:id="@+id/btn2"android:layout_width="match_parent"android:layout_height="wrap_content"android:textAllCaps="false"android:text="使用webview.evaluateJavascript()调用JS方法"/><TextViewandroid:id="@+id/text2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="暂无返回"/><Buttonandroid:id="@+id/btn_clear"android:layout_width="match_parent"android:layout_height="wrap_content"android:textAllCaps="false"android:text="清除H5的内容"android:layout_marginTop="20dp"/><TextViewandroid:layout_marginTop="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="JavaScript调用Java方法："/><TextViewandroid:id="@+id/text3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:text="JsCallJava1返回值"/><TextViewandroid:layout_marginTop="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="拦截链接："/><TextViewandroid:id="@+id/text4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="拦截测试数据"/><TextViewandroid:layout_marginTop="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="拦截弹窗"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="alert:"/><TextViewandroid:id="@+id/alert"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text=""/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="confirm:"/><TextViewandroid:id="@+id/confirm"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text=""/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="prompt:"/><TextViewandroid:id="@+id/prompt"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text=""/></LinearLayout></LinearLayout>

indexVue.vue

<template><div class="box"><div class="test1"><h3 title="123">{{test1}}</h3><h4>测试内容：{{test1Content}}</h4></div><div class="test2"><h3>{{test2}}</h3><h4>测试内容：{{test2Content}}</h4></div><button @click="useJsCallJava1">调用Java方法：JsCallJava1</button><h4>返回数据：{{JsCallJava1Content}}</h4><button @click="useJsCallJava2">拦截链接</button><h4>   </h4><button @click="useJsCallJava3(1)">测试拦截alert</button><button @click="useJsCallJava3(2)">测试拦截confirm</button><button @click="useJsCallJava3(3)">测试拦截prompt</button></div>
</template><script>export default {data(){return {test1:"Java使用webview.loadUrl()调用JavaScript方法",test1Content:"",test2:"Java使用webview.evaluateJavascript()调用JavaScript方法",test2Content:"",JsCallJava1Content:"",};},methods:{test1Fun(str){this.test1Content = str;// return "调用test1Fun成功";},test2Fun(str){this.test2Content = str;return "调用test2Fun成功";},clearContent(){this.test1Content = "";this.test2Content = "";},useJsCallJava1(){let a = window.android.JsCallJava1("我是JsCallJava1的返回值");this.JsCallJava1Content = a;},useJsCallJava2(){location.href = "intercept";},useJsCallJava3(judge){if(judge == 1){alert('alert')}if(judge == 2){confirm('confirm')}if(judge == 3){prompt('prompt')}}},mounted(){window.test1Fun = this.test1Fun;window.test2Fun = this.test2Fun;window.clearContent = this.clearContent;}
}
</script><style scoped>h3{color: blue;}h4{color: red;}
</style>

关于原生android与H5交互的方法相关推荐

Android 系统（229）---Android与h5交互专题
[Android开发进阶系列]Android与h5交互专题 1 交互原理 1.1 webview如何加载H5页面我们都知道在Android中是通过webView来加载html页面的,根据HTML文件 ...
Android 和 H5 交互-框架篇
Android 和 H5 交互-框架篇 2017-08-01 YouJZ code小生作者 | YouJZ 地址 | http://www.jianshu.com/p/02afb387b6b4 声明 ...
Android与H5交互探索之旅
周一清早,某技术(对接我司业务SDK的技术)在有我司boss的微信群火急火燎地艾特我说为什么H5的回调 SDK 这边收不到?看到消息的我内心瞬间那是焦虑的一P,飞奔公司打开电脑双击IDE,心想别人用的 ...
安卓混合开发——原生Java和H5交互，保证你一看就懂！
在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的JavaSc ...
Android原生app与H5交互
1.开发背景. 随着当前开发迭代要求速度更快,改动更灵活,不需要发布版本就能实时更新app的内容,故当前H5制作界面越来越受到科技公司和开发者的欢迎. 2.实现交互今天记录一下开发过程中用到的H5交 ...
android 和h5交互,Android中与H5的交互
Android日常开发中,常常会遇到加载H5页面的情况,于是少不了与H5页面的交互问题.具体表现在Android调用H5代码及H5中调用Android代码两种情况. 测试页面 test.png 这里我 ...
Android和H5交互-基础篇
hybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的.Android中是如何和H5交互的? 1.webView加载页面我们都知道在Android中是通过webV ...
Android 与 H5 交互基础普及
文章目录前言创建一个WebView页面 WebView 与 H5交互 H5 调用 WebView 中的方法 WebView 调用 H5 中的方法另外一些重要操作处理页面导航处理页面历史总结 ...
android与H5交互调用js方法无效问题
正常的调用js方法很简单,只有一句话 mWebView.loadUrl("javascript:do()"); do();是js提供的方法名但是调用之后发现无效,不禁在想就这么一 ...

关于原生android与H5交互的方法

文章目录

原生android与H5交互

android调用H5方法

H5调用android

关于原生android与H5交互的方法相关推荐

最新文章

热门文章