1.这种情况，就是点击了web页面的控件，让android原生做出反应，如跳转或者处理方法
2.android代码要做的就是在写web页面的代码内部监听js点击的方法
3.这里监听的时候部分普通js和vue js
4.不管你用的什么web第三方控件都要实现下面的方法
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(this,"name");
来一段没有注释的代码块
WebSettings webSettings = webview.getSettings()
webSettings.setJavaScriptEnabled(true)
webview.loadUrl("file:///android_asset/html.html")
webview.addJavascriptInterface(MainActivity.this,"android")
来一段js代码
1.里面的test.hello("xxx")，应该可以写成window.test.hello("xxxx")
2.所以以hello命名的方法要写在android代码中，那之前在android代码中的那个name就是test
3.所以写成webview.addJavascriptInterface(this,"test");
<!DOCTYPE html>
<meta charset="utf-8">
<title>Carson</title>
<script>
function callAndroid()
test.hello("js调用了android中的hello方法");
</script>
</head>
//点击按钮则调用callAndroid函数
<button type="button" id="button1" onclick="callAndroid()"></button>
</body>
</html>
js代码示例
<script>
window.onload = function () {
let temp = document.getElementById("test02");
temp.onclick = function (e) {
if(window.js_obj){
window.js_obj.testJS();
document.getElementById("test03").onclick = function(){
if(window.js_obj){
window.js_obj.shareTitleDesc("111","222");
</script>
在来段js代码加深印象
1.下面应该写成webview.addJavascriptInterface(this,"android")
2.this是上下文，根据具体情况定
<meta http-equiv="Content-Type" charset="GB2312"/>
<script type="text/javascript">
function javacalljs()
document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
function javacalljswith(arg){
document.getElementById("showmsg").innerHTML = (arg);
</script>
</head>
<h3>Web模块</h3>
<h3 id="showmsg">调用js显示结果</h3>
// 注意看，你可以知道addJavascriptInterface后面的name是哪个吗？没错就是android
<input type="button" value="Js调用Java代码" onclick="window.android.jsCallAndroid()"/>
<input type="button" value="Js调用Java代码并传参数" onclick="window.android.jsCallAndroidArgs('Js传过来的参数')"/>
</body>
</html>
上面的代码在java中监听的写法是
1.在Android4.4以上并且必须加入@JavascriptInterface才有响应。
2.第一个方法不带参数，第二方法带参数
@JavascriptInterface
public void jsCallAndroid(){
@JavascriptInterface
public void jsCallAndroidArgs(String args){
第二部分：android调用js
1.那android怎么调用js中的方法呢
2.我分为两种，一个是调用普通的js代码，一个是调用vue js的代码
看在js中定义的一个方法给android调用
function callFromJava(str){
console.log(str);
接着在java中调用
1.javascript这个是固定写法
2.callFromJava("xxxx")才是真正要调用的方法
public void javaCallJS(){
webView.loadUrl("javascript:callFromJava('call from java')");
android调用vue js
vue js 中的写法
1.里面一定要把给java调用的方法挂在到window上，就是mounted()中写的
mounted() {
window.callJsFunction = this.callJsFunction
data() {
return {
msg: "哈哈"
methods: {
callJsFunction(str) {
this.msg = "我通过原生方法改变了文字" + str
return "js调用成功"
java中调用代码
1.网上找了一种这个写法的，给参考下
2.我自己写的方法直接点，这里还传了一个参数
@Override
public void callVueJS() {
tbsWebView.post(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:callJsFunction('soloname')");
自己写的是
webView.loadUrl("javascript:callJsFunction('soloname')");
复制代码
