Android webview 与 js(Vue) 交互

待兔 等级 1307 1 1

js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。

本文将对这两种情况分别讲解,H5 端用 vue 实现。

一、前期准备(Vue项目准备)

本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。

项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令行看到两个地址:

Android webview 与 js(Vue) 交互

http://localhost:8080/http://10.0.0.188:8080/

10.0.0.188 是我本机的 ip 地址,每个人的不一样。

在电脑的浏览器访问的话哪个都行,但在手机或模拟器访问的话需要用第二个带 ip 地址的,且要保证手机跟电脑连接同一个 wifi 或在同一网段。

注意:这里用的是 vue-cli 3.0,运行命令跟 vue-cli 2.X 有所区别。详情请自行查询官方文档。

启动成功后在 Android 项目中将 http://10.0.0.188:8080/ 地址配置给 WebView 即可

Intent intent = new Intent(getActivity(), ProgressWebviewActivity.class);
intent.putExtra("url", "http://10.0.0.188:8080/");
startActivity(intent); 

到此,在手机中就可以访问 Vue 项目了。

二、Android 原生调用 JS 中的方法

Android 调用 JS 有两种方式,都是通过 WebView 的方法:

  1. webview.loadUrl()
  2. webview.evaluateJavascript()

二者区别:

  1. loadUrl() 会刷新页面,evaluateJavascript() 则不会使页面刷新,所以 evaluateJavascript() 的效率更高

  2. loadUrl() 得不到 js 的返回值,evaluateJavascript() 可以获取返回值

  3. evaluateJavascript() 在 Android 4.4 之后才可以使用

要实现的效果:

如下图,页面上有一行文字 ”哈哈“,要在 WebView 页面加载完的时候通过 Android 原生代码将这行字改为 ”我通过原生方法改变了文字“ + Android 传递过来的参数,并给 Android 返回一个字符串 ”js调用成功“。

Android webview 与 js(Vue) 交互

2.1 Vue 代码

先看 Vue 中代码怎么写

mounted() {
    //将要给原生调用的方法挂载到 window 上面
    window.callJsFunction = this.callJsFunction
},
data() {
    return {
        msg: "哈哈"
    }
},
methods: {
    callJsFunction(str) {
        this.msg = "我通过原生方法改变了文字" + str
        return "js调用成功"
    }
} 

methods 中定义一个供 Android 调用的方法 callJsFunction(str) , 并可接收一个参数 str,然后改变页面中的文字。

如果只是在 methods 中定义方法,原生调用会找不到这个方法。所以要在页面加载的时候将方法挂载在 window 上,这样 WebView 就可以拿到此方法了。注意,这步很重要一定要写!

注意一个细节,this.callJsFunction 后面不要加括号 (),加括号相当于直接调用了。

总结起来 Vue 中要做的事情就两步:

  1. methods 中定义方法
  2. mounted 中将方法挂载在 window

2.2 Android 中代码

需要等页面加载完在 WebViewonPageFinished 方法中写调用逻辑,否则不会执行。

2.2.1 loadUrl() 实现

tbsWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url, headerMap);
                return true;
            }

            @Override
            public void onPageFinished(WebView webView, String s) {
                super.onPageFinished(webView, s);
                //安卓调用js方法。注意需要在 onPageFinished 回调里调用
                tbsWebView.post(new Runnable() {
                    @Override
                    public void run() {
                        tbsWebView.loadUrl("javascript:callJsFunction('soloname')");
                    }
                });
            }
        });
    }
}); 

如果不需要传参数,把参数去掉即可 tbsWebView.loadUrl("javascript:callJsFunction()");

2.2.2 evaluateJavascript() 实现

其他地方跟loadUrl()一样,只是把 tbsWebView.loadUrl("javascript:callJsFunction('soloname')"); 替换掉

@Override
public void onPageFinished(WebView webView, String s) {
    super.onPageFinished(webView, s);
    //安卓调用js方法。注意需要在 onPageFinished 回调里调用
    tbsWebView.post(new Runnable() {
        @Override
        public void run() {
            tbsWebView.evaluateJavascript("javascript:callJsFunction('soloname')", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String s) {
                    Logger.d("js返回的结果: " + s);
                }
            });
        }
    });
} 

可以看到页面更新了,第二种方法也拿到了返回的结果。

Android webview 与 js(Vue) 交互

三、JS 调用 Android 原生方法

对于JS调用Android代码的方法有3种:

  1. 通过 WebViewaddJavascriptInterface() 进行对象映射
  2. 通过 WebViewClientshouldOverrideUrlLoading()方法回调拦截 url
  3. 通过 WebChromeClientonJsAlert()onJsConfirm()onJsPrompt()方法回调拦截JS对话框alert()confirm()prompt() 消息

对比: 第一种最简洁,但在 Android 4. 2 以下存在漏洞;第二种和第三种使用复杂,但不存在漏洞问题。

由于目前的设备系统版本基本都在 4.2 以上,所以用第一种就可以了,简单快捷。时间有限本文只实现第一种,第二种和第三种就不实现了,想了解的可以参考 这篇文章

3.1 效果展示

要实现的效果就是点击 H5 页面上的按钮,弹出 Android 原生的 Toast

Android webview 与 js(Vue) 交互

3.2 Vue 代码

methods: {
  showAndroidToast() {
    $App.showToast("哈哈,我是js调用的")
  }
} 

methods 中定义方法 showAndroidToast() , 点击页面上按钮 "调用Android原生Toast" 时调用。

3.3 Android 代码

新建类 JsJavaBridge

public class JsJavaBridge {

    private Activity activity;
    private WebView webView;

    public JsJavaBridge(Activity activity, WebView webView) {
        this.activity = activity;
        this.webView = webView;
    }

    @JavascriptInterface
    public void onFinishActivity() {
        activity.finish();
    }

    @JavascriptInterface
    public void showToast(String msg) {
        ToastUtils.show(msg);
    }
} 

然后通过 WebView 设置 Android 类与 JS 代码的映射

tbsWebView.addJavascriptInterface(new JsJavaBridge(this, tbsWebView), "$App"); 

这里将类 JsJavaBridge 在 JS 中映射为了 $App,所以在 Vue 中可以这样调用 $App.showToast("哈哈,我是js调用的")

以上就是 Android 与 JS 的互相调用。

收藏
评论区

相关推荐

Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢? 1:抽离javascriptHome.vue<template <div <div :style"{ padding: '24px', back
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持
Android WebView
[Skip to content](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.android.com%2Freference%2Fandroid%2Fwebkit%2FWebView.html%23top) [![Android](https://develop
Android WebView实现js与java交互
刚学Android用WebView来做应用 Android Studio下载: [http://www.android-studio.org/](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.android-studio.org%2F) 写此文时最新稳定版是2.3.3,预览版3.
Android与H5交互 原理与对比
[原文:  https://www.jianshu.com/p/345f4d8a5cfa](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.jianshu.com%2Fp%2F345f4d8a5cfa) 1.Android调用JS的方法有2种:  -----------------
Android为TV端助力之Webview与JS双向交互
package com.hhzt.iptv.adservice;import android.app.Activity;import android.graphics.Bitmap;import android.os.Build;import android.os.Bundle;import android.util.Log;import andro
JS与iOS之间的通信
JS与iOS之间的通信,主要运用两个方法:(PhoneGap框架也是基于此原理) 1、UIWebView的 stringByEvaluatingJavaScriptFromString方法 2、UIWebViewDelegate的 \- (BOOL)webView:(UIWebView \*)webView shouldStartLoadWithReq
JS前端图形化插件之利器Gojs组件(php中文网)
JS前端图形化插件之利器Gojs组件(php中文网) ========================== 一、总结 ---- ### 一句话总结:php中文网我可以好好走一波 二、JS前端图形化插件之利器Gojs组件 -------------------- 参考: JS前端图形化插件之利器Gojs组件-js教程-PHP中文网 http://
JavaScript 两个叹号含义
先起个例子吧~  这个用的是谋智的js引擎monkey spider  darion.yaphet@localhost.localdomain:/home/darion.yaphet> js               js> var i; js> print(i) undefined js>  js> va
JavaScript八张思维导图
**![](https://oscimg.oschina.net/oscnet/17104907-a0f0-4b40-ac9d-9c40d9b13157.jpg)** **目录** * JS基本概念 * JS操作符 * JS基本语句 * JS数组用法 * Date用法 * JS
React与Vue的相同与不同点
我们知道JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架。所以要想前端的开发那么必须掌握好这两个框架。 那么这两个框架有什么不同呢? **React 和 Vue 相同之处,它们都有:** * 使用 Virtual DOM * 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件
Vue 3 组件开发:搭建基于SpreadJS的表格编辑系统(环境搭建)
![image.png](https://upload-images.jianshu.io/upload_images/17056223-960fe5cf787f603c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vu