IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> Android webview 与js(vue) 交互 -> 正文阅读

[移动开发]Android webview 与js(vue) 交互

Android 原生调用 JS 中的方法

Android 调用 JS 有两种方式,都是通过 WebView 的方法
(1)webview.loadUrl()
(2)webview.evaluateJavascript()

二者区别:
(1)loadUrl() 会刷新页面,evaluateJavascript() 则不会使页面刷新,所以
evaluateJavascript() 的效率更高
(2)loadUrl() 得不到 js 的返回值,evaluateJavascript() 可以获取返回值
(3)evaluateJavascript() 在 Android4.4 之后才可以使用

Vue 代码

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

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

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

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

总结起来 Vue 中要做的事情就两步:
(1)在 methods 中定义方法
(2)在 mounted 中将方法挂载在 ==window ==上

Android 中代码
需要等页面加载完在 WebView 的 onPageFinished 方法中写调用逻辑,否则不会执行。

//loadUrl() 实现
//如果不需要传参数,把参数去掉即可 tbsWebView.loadUrl(“javascript:callJsFunction()”);
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')");
                    }
                });
            }
        });
    }
});

//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);
                }
            });
        }
    });
}

JS 调用 Android 原生方法

Vue 代码

methods: {
  showAndroidToast() {
    $App.showToast("js调用")
  }
}

Android 代码

//这里将类JsJavaBridge ,在 JS 中映射为了 $App,所以在 Vue 中可以这样调用 $App.showToast(“哈哈,我是js调用的”)。
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");

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-03-12 17:41:04  更:2022-03-12 17:41:06 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/1 14:22:31-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码