最近在做原生和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() {

            @Override

            public 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以后加注解，位置在这个方法名上面，鉴于很多这个的例子，瞎、、写注解位置，并需要下                        //载积分写了这个

            @JavascriptInterface

            public 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注解的位置大家注意下。

源码下载

Javascript和android原生互调的更多相关文章

  1. JavaScript调用App原生代码(iOS、Android)通用解决方案

    实际场景 场景:现在有一个H5活动页面,上面有一个登陆按钮,要求点击登陆按钮以后,唤出App内部的登录界面,当登录成功以后将用户的手机号返回给H5页面,显示出来.这个场景应该算是比较完整的一次H5中的 ...

  2. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  3. Android-----js和android的互调

    Android-----js和android的互调   http://code.google.com/p/apps-for-android/source/browse/trunk/Samples/We ...

  4. React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

    尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...

  5. Android原生和H5交互；Android和H5混合开发；WebView点击H5界面跳转到Android原生界面。

    当时业务的需求是这样的,H5有一个活动商品列表的界面,IOS和Android共用这一个界面,点击商品可以跳转到Android原生的商品详情界面并传递商品ID:  大概就是点击H5界面跳转到Androi ...

  6. 将React Native集成至Android原生应用

    将React Native集成至Android原生应用 Android Studio 2.1 Preview 4生成的空项目 react-native 环境 0.22.2 初次编译后apk有1.1M, ...

  7. uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式

    前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官 ...

  8. 拓展 Android 原生 CountDownTimer 倒计时

    拓展 Android 原生 CountDownTimer 倒计时 [TOC] CountDownTimer 在系统的CountDownTimer上进行的修改,主要是拓展了功能,当然也保留了系统默认的模 ...

  9. Android原生json和fastjson的简单使用

    android原生操作json数据 主要是两个类 JSONObject 操作对象     JONSArray操作json数组 对象转json //创建学生对象 Student student=new ...

随机推荐

  1. C# 安装WindowService服务和相关

    https://www.cnblogs.com/charlie-chen2016/p/8031774.html 这是一个备份数据库的服务,逻辑很简单,就是通过定时器实现在特定的时间执行SQL语句备份数 ...

  2. FFmpegInterop 库在 Windows 10 应用中的编译使用

    FFmpegInterop 简介 FFmpegInterop 是微软推出的封装 FFmpeg 的一个开源库,旨在方便在 Windows 10.Windows 8.1 以及 Windows Phone ...

  3. (转载)C#获取当前应用程序所在路径及环境变量

    一.获取当前文件的路径 string str1=Process.GetCurrentProcess().MainModule.FileName;//可获得当前执行的exe的文件名. string st ...

  4. SpringSecurity 3.2入门（4）登录密码加密

    密码admin 进行MD5 32位加密为21232F297A57A5A743894A0E4A801FC3 增加spring-security.xml文件配置如下 <!-- 认证管理器,配置Spr ...

  5. XML深入了解（XML JavaSprint）

    XMLHttpRequest 对象 XMLHttpRequest 对象用于在后台与服务器交换数据. XMLHttpRequest 对象是开发者的梦想,因为您能够: 在不重新加载页面的情况下更新网页 在 ...

  6. SGI STL红黑树中迭代器的边界值分析

    前言 一段程序最容易出错的就是在判断或者是情况分类的边界地方,所以,应该对于许多判断或者是情况分类的边界要格外的注意.下面,就分析下STL中红黑树的迭代器的各种边界情况.(注意:分析中STL使用的版本 ...

  7. java面试题之----String的intern

    When---什么时候需要了解String的intern方法: 面试的时候(蜜汁尴尬)!虽然不想承认,不过面试的时候经常碰到这种高逼格的问题来考察我们是否真正理解了String的不可变性.String ...

  8. 【Leetcode】【Easy】Pascal's Triangle

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5,Retur ...

  9. centos开启IPV6配置方法

    目前国内大部分服务器和PC不支持IPV6地址的,但是服务器上本身是可以正常开启IPV6服务,有部分程序在服务器上运行的时候,需要服务器能监听一个ipv6地址才行,因此本文档指导如何在centos服务器 ...

  10. Python模块 Socket

    一个简单的python socket编程 一.套接字 套接字是为特定网络协议(例如TCP/IP,ICMP/IP,UDP/IP等)套件对上的网络应用程序提供者提供当前可移植标准的对象.它们允许程序接受并 ...