Javascript和android原生互调
最近在做原生和js端的互调的功能,自己改了个demo,给大家讲解下。
先上js代码
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>方法调用基本流程测试</title>
</head>
<body>
<div id="helloweb"> <div id="echoInfo">如果有数据返回,会显示在这儿</div></div><script type="text/javascript">function funFromjs(){document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js";}function echoInfo( container, obj ){var domContainer = document.getElementById('echoInfo');domContainer.innerHTML = JSON.stringify( obj );}//function windowCallback( str ){//echoInfo( 'echoInfo', str );//}window.windowCallback = function( str ){echoInfo( 'echoInfo', str );};var MfsJSBridge = MfsJSBridge || undefined;if( undefined != MfsJSBridge ){//看这里var params = {id : 1,name : '测试'};var strParams = JSON.stringify( params );MfsJSBridge.invoke( 'testFunc', strParams, 'windowCallback');}else{alert('未定义MfsJSBridge');}</script></body>
</html>
android webview 设置可用javascript
//设置编码mWebView.getSettings().setDefaultTextEncodingName("utf-8");//支持js
mWebView.getSettings().setJavaScriptEnabled(true);
android 调js
mBtn1.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {mWebView.loadUrl("javascript:funFromjs()");//其中funFromjs()为js的方法Toast.makeText(mContext, "调用javascript:funFromjs()", Toast.LENGTH_LONG).show();}});
js调原生,原生响应时间并回调数据
mWebView.addJavascriptInterface(new Object(){//注意4.4以后加注解,位置在这个方法名上面,鉴于很多这个的例子,瞎、、写注解位置,并需要下 //载积分写了这个@JavascriptInterfacepublic void invoke(String name ,String t,String callback) {if(name.equals("testFunc")){ //其中t 为js带过来的数据 Toast.makeText(mContext, t,Toast.LENGTH_LONG).show();String strJson = "{\"code\":122, \"msg\":\"1231\", \"data\":null}";//回调数据给js 其中callback 为android 掉js 的方法名称。mWebView.loadUrl("javascript:"+ callback +"('" + strJson + "')");}// Toast.makeText(mContext, name, Toast.LENGTH_LONG).show();}},"MfsJSBridge");
代码比较简单,最主要的是 @JavascriptInterface注解的位置大家注意下。
源码下载
转载于:https://www.cnblogs.com/forezp/p/9852223.html
Javascript和android原生互调相关推荐
- JS(Javascript)调用Android原生方法三步走
三步走: 1.webview 一定要设置这三个方法 webSetting.setJavaScriptEnabled(true); webSetting.setJavaScriptCanOpenWind ...
- React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块...
尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...
- android原生代码转h5,Android原生和H5交互;Android和H5混合开发;WebView点击H5界面跳转到Android原生界面。...
当时业务的需求是这样的,H5有一个活动商品列表的界面,IOS和Android共用这一个界面,点击商品可以跳转到Android原生的商品详情界面并传递商品ID: 大概就是点击H5界面跳转到Androi ...
- RN 封装 Android原生组件
RN 封装 Android原生组件 背景 当在React Native暂时未提供部分原生功能或者模块,我们需要复用部分原生代码时,比如复用一个原生方法,此时就需要将原生方法进行封装,暴露出一个接口来让 ...
- android自定义Dcloud插件,调用android原生界面并获取返回数据
由于工作的需要,所以我接触到了Dcloud这个我不是很愿意接触的东西.Dcloud也是Webapp的一个工具,同样也可以用来做原生android的插件.比较一下Dcloud和Cordova的优缺点: ...
- JS如何调用Android原生方法
一.引入 JSBridge JSBridge 主要是给 JavaScript 提供调用 Native 功能的接口,让混合开发中的前端部分可以方便地使用 Native 的功能(例如:通讯录.蓝牙). 而 ...
- android原生和H5交互(转)
最近在左一个Android原生的H5混合开发的APP,之前还没有好好的总结一下Android原生 和 H5 之间交互的方法,这里来总结一下: 1.hybrid通信,主要就是前端的js和我们Androi ...
- React Native 中的 Android 原生模块
当使用 React Native 开发 Android 应用时,你可能需要使用没有被 React Native 封装的模块.但你可以使用 Java 编写原生模块,然后选择性的暴露公共接口到 React ...
- Android原生UI开发框架 《Jetpack Compose入门到精通》最全上手指南
前言 在去年的Google/IO大会上,亮相了一个全新的 Android 原生 UI 开发框架-Jetpack Compose, 与苹果的SwiftIUI一样,Jetpack Compose是一个声明 ...
最新文章
- JSP与Web技术概论
- GDALWarp设置GDALWarpOptions::dfWarpMemoryLimit过大时处理失败
- 网页3D效果库Three.js学习[二]-了解照相机
- linux切换到管理员失败解决方法(因为误操作导致不能切换到管理员用户)
- 类别不平衡学习:论文/代码/框架/库
- 学前端有什么好方法,怎么才能更快学会前端?
- C语言 · 数组查找及替换
- ActiveMQ 认证
- setfacl 权限导出_setfacl getfacl 将某个目录的访问权限赋值给某个用户
- completionService
- Ubuntu中软件安装与卸载
- 《Android软件安全与逆向分析》— Android 书籍
- 常用c语言代码大全,C语言的一些常用代码
- 做好固定资产管理,提升行政的工作绩效
- 2021年茶艺师(初级)考试内容及茶艺师(初级)考试总结
- vue3.0 H5页面配置 Autoprefixer 报警Replace Autoprefixer browsers option to Browserslist config.
- 2015秋季腾讯【技术运营】岗位———在线笔试总结
- DTOJ 3999 ♂U♂ Xi♂
- 三维视频融合 倾斜摄影模型 开放c++源代码 支持与java js交互 内嵌web容器 可用于雪亮工程 等 安防项目 稳定流畅 点卯系列
- 戴尔服务器的性能,解析戴尔12G服务器主要性能提升和改进