关于Android JS与原生的交互

简介: 有两种方法,我们知道,Android使用WebView加载页面是可以拦截到页面的url的,既然可以拦截到url,那就可以对url进行解析处理,判断后走不同的业务逻辑,比如判断url是否是一个pdf页面,如果是,就跳转页面去加载pdf等。

之前发表过一篇关于JS与原生交互的文章,但是采用的是jsbridge来实现的,有兴趣的可以去看看,链接放在下面:

https://developer.aliyun.com/article/976311?spm=a2c6h.13148508.setting.29.ee134f0eB2lAEX

既然是交互,那就是双向的,分为原生调用JS方法,跟JS调用原生方法。

JS调用原生

有两种方法,我们知道,Android使用WebView加载页面是可以拦截到页面的url的,既然可以拦截到url,那就可以对url进行解析处理,判断后走不同的业务逻辑,比如判断url是否是一个pdf页面,如果是,就跳转页面去加载pdf等。

通过webView.setWebViewClient(),在回调方法shouldOverrideUrlLoading中去拦截,下面是代码片段:

webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url.startsWith("tel:")) {
                } else if (url.endsWith(".pdf") || url.contains("downloadPdf") || url.contains("FileServer/download")) {
                } else if (url.startsWith("intent:")) {
                } else if (url.endsWith(".apk")) {
                } else if (url.startsWith("mailto:")) {
                }
                return true;
            }
        });

另外一种是原生通过向JS注入方法的形式来实现交互。

第一步,webView添加JS接口,第一个参数是JS接口,JS call 原生将会回调到这个接口里面的方法,第二个参数是需要跟JS统一好的,两边要一致。

webView.addJavascriptInterface(JsInterface(this),“callApp”)

第二步:创建JS接口,此接口里面的方法需要加上注解@JavascriptInterface,方法名字也需要跟JS两断保持一致。

class JsInterface(context: Activity) {
       
        @JavascriptInterface
        fun jsCallNativeCloseAccountEvent() {
            //本方法要跟JS方法一致,当JS出发web页面中的jsCallNativeCloseAccountEvent方法时,会回调到本方法,然后就可以做原生操作。
        }
}

以上需要注意的两点是,接口中的方法要跟JS一致,还有就是addJavascriptInterface方法的第二个参数需要跟JS的配置一致,这是两个重点。

原生调用JS

同样也有两种方法,分别是

//第一种方法
webView.loadUrl("javascript:test()") //不带参
webView.loadUrl("javascript:test(" + "'这里填参数'" + ")") //带参
 
//第二种方法
webView.evaluateJavascript("javascript:test(), new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                //此处为 js 返回的结果
                Toast.makeText(MainActivity.this, "js返回值:"+value, Toast.LENGTH_SHORT).show();
            }
        }); //不带参
webView.evaluateJavascript("javascript:test(" + "'这里填参数'" + "), new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                //此处为 js 返回的结果
                Toast.makeText(MainActivity.this, "js返回值:"+value, Toast.LENGTH_SHORT).show();
            }
        }); //带参

这两种方法的区别如下:

方法 易用性 局限性 线程
loadUrl() 使用相对简单 返回值获取困难,效率低 刷新WebView,需在UI线程里进行
evaluateJavascript() 使用相对复杂,效率高,返回值获取容易 Android4.4以上使用 不刷新WebView,主线程中进行

两种方法各有优缺点,我们可以采用两种方式结合:当android版本低于4.4,采用loadUrl(),否则采用evaluateJavascript()。

以上就是本篇的内容,比较基础简单。

相关文章
|
3月前
|
开发框架 前端开发 Android开发
Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势
本文深入探讨了 Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势。这对于实现高效的跨平台移动应用开发具有重要指导意义。
362 4
|
5天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
34 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
4月前
|
Java Linux Android开发
移动应用开发与操作系统的交互:深入理解Android和iOS
在数字时代,移动应用成为我们日常生活的一部分。本文将深入探讨移动应用开发的核心概念、移动操作系统的工作原理以及它们如何相互作用。我们将通过实际代码示例,展示如何在Android和iOS平台上创建一个简单的“Hello World”应用,并解释其背后的技术原理。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和知识。
|
29天前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
35 3
|
2月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
572 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
6月前
|
Android开发
错误记录:调用原生TvSettings 的 com.android.tv.settings.device.storage.ResetActivity 无法启动
本文记录了一个Android TV设置中由于未设置`android:exported="true"`导致`com.android.tv.settings.device.storage.ResetActivity`无法被第三方app启动的错误,并通过添加该属性成功解决了问题。
98 1
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
90 5
|
3月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
75 4
|
4月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
55 1
【JavaScript】网页交互的灵魂舞者
|
3月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
98 4

热门文章

最新文章

  • 1
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
  • 2
    Android历史版本与APK文件结构
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 5
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 6
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 7
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 8
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
  • 9
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 10
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡