精选文章 js与native的交互

js与native的交互

作者:辛苦的码农20200609 时间: 2020-08-05 09:48:25
辛苦的码农20200609 2020-08-05 09:48:25

WebView与Javascript交互(Android):

   WebView与Javascript交互是双向的数据传递,1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数,具体实现以下面例子为主:

1.)mainfest.xml中加入网络权限

2.)WebView开启支持JavaScript

  mWebView.getSettings().setJavaScriptEnabled(true);  

3.)简单的H5网页实现,主要实现actionFromNative()、actionFromNativeWithParam(String str),放在assets文件下

js与native的交互1


    
    


WebView与Javascript交互



调用打印信息
js与native的交互2

4.)Native实现与JS交互函数:actionFromJs()、actionFromJsWithParam()

js与native的交互3
public class MainActivity extends Activity {
    private WebView mWebView;
    private TextView logTextView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mWebView = (WebView) findViewById(R.id.webview);
        // 启用javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 从assets目录下面的加载html
        mWebView.loadUrl("file:///android_asset/wx.html");
        mWebView.addJavascriptInterface(this, "wx");
        logTextView = (TextView) findViewById(R.id.text);
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new Button.OnClickListener() {
            public void onClick(View v) {
                // 无参数调用
                mWebView.loadUrl("javascript:actionFromNative()");
                // 传递参数调用
                mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");
            }
        });

    }

    @android.webkit.JavascriptInterface
    public void actionFromJs() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "js调用了Native函数", Toast.LENGTH_SHORT).show();
                String text = logTextView.getText() + "\njs调用了Native函数";
                logTextView.setText(text);
            }
        });
    }

    @android.webkit.JavascriptInterface
    public void actionFromJsWithParam(final String str) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "js调用了Native函数传递参数:" + str, Toast.LENGTH_SHORT).show();
                String text = logTextView.getText() +  "\njs调用了Native函数传递参数:" + str;
                logTextView.setText(text);
            }
        });

    }
}
js与native的交互4

mWebView.addJavascriptInterface(this, "wx");相当于添加一个js回调接口,然后给这个起一个别名,我这里起的名字wx(微信哈哈)。@android.webkit.JavascriptInterface为了解决addJavascriptInterface漏洞的,在4.2以后才有的。

5.)布局文件实现

js与native的交互5



    

    

    

6.)代码简单解说

(1.)js(HTML)访问Android(Java)端代码是通过jsObj对象实现的,调用jsObj对象中的函数,如: window.jsObj.actionFromJs(),这里的jsObj就是Native中添加接口的别名

(2.)Android(Java)访问js(HTML)端代码是通过loadUrl函数实现的,访问格式如:mWebView.loadUrl("javascript:actionFromNative()");

demo运行截图:

js与native的交互7

 

Objective-C与JavaScript交互(ios)

http://www.cocoachina.com/ios/20160127/15105.html

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:hive避免进行MapReduce过程的几种情形

下一篇:采用油猴插件来进行观看课程

您可能感兴趣

  • JS设计模式之发布订阅者模式

    (本篇文章是我在早高峰上班地铁上刷到了一篇公众号发布的文章,感觉讲的非常好,特分享给大家。每天坚持学习,感谢公众号大佬的分享,公众号:nodejs全栈开发) 首先我们用一个示例来演示一下什么是观察者模式,有这样一个场景,在一个院子里,有一个小偷,和若干条狗,小偷只要一行动,狗就会叫,狗叫的动作是依赖小偷的,如果小偷不行动,狗是不会叫的,也就是说狗的叫的状态依赖小偷的行动,小偷的行动状态发生变...

  • 如何基于 Electron 开发跨终端的应用

    自我介绍 欢迎大家来到今天的早早聊跨端跨栈专场,今天我分享的主题是《如何基于 Electron 开发跨终端的应用》。先做一下自我介绍,我叫逯子洋,17 年加入政采云,目前主要负责政采云前端工程化平台敦煌以及政采云电子招投标客户端的建设。这边是我们团队的微信公众号,大家如果想对我们团队有更多的了解,可以关注一下我们的公众号。 首先我们分享的第一块叫端的延展。不知道大家对这张图熟不熟悉,前段时间...

  • Node学习总结-基础篇

    1、谈谈js中的变量类型有哪些? 答:值类型:字符串(string)、数值(number)、布尔值(boolean)、undefined、null、symbol(es6) 引用类型:对象(Object)、数组(Array)、函数(Function) 2、谈谈null和undefined的区别? 答:null是一个表示 "无" 的对象,转为数值时为 0;undefined是一个表示 "无" 的...

  • 后端开发的技巧总结

    模块化设计 根据业务场景,将业务抽离成独立模块,对外通过接口提供服务,减少系统复杂度和耦合度,实现可复用,易维护,易拓展 项目中实践例子: Before: 在返还购APP里有个【我的红包】的功能,用户的红包数据来自多个业务,如:邀请新用户注册领取100元红包,大促活动双倍红包,等各种活动红包,多个活动业务都实现了一套不同规则的红包领取和红包奖励发放的机制,导致红包不可管理,不能复用,难维护难...

  • 浏览器扩展程序插件兼容谷歌、360浏览器

    先写一个最简单入门级的扩展程序,我们后面会继续介绍扩展程序与目标网页的交互、数据绑定等功能。 首先创建一个文件夹,名称自己命名。在创建的文件夹下面创建一个文件,命名为 manifest.json,内容如下(注意:manifest.json文件中不要使用空格,使用tab缩放,不然扩展程序会报错): { "manifest_version": 2, "name": "扩展程序", "versio...

  • java 高并发解决方案总结

    如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了。而并发问题是绝大部分的程序员头疼的问题, 但话又说回来了,既然逃避不掉,那我们就坦然面对吧~今天就让我们一起来研究一下常见的并发和同步吧。 为了更好的理解并发和同步,我们需要先明白两个重要的概念:同步和异步 1、同步和异步的区别和联系 所谓同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是出于阻...

  • 面试题(一)JVM常见面试题

    JVM 面试题 一. Java 类加载过程? Java 类加载需要经历一下 7 个过程: 1. 加载 加载是类加载的第一个过程,在这个阶段,将完成一下三件事情: • 通过一个类的全限定名获取该类的二进制流。 • 将该二进制流中的静态存储结构转化为方法去运行时数据结 构。 • 在内存中生成该类的 Class 对象,作为该类的数据访问入口。 2. 验证 验证的目的是为了确保 Class 文件的字...

  • vue知识点总结

    # 1.ES6新增? *1、变量的改变* *let:代码块内有效;不能重复声明;不存在变量提升* *const:只读变量,声明之后不允许改变。意味着,一旦声明必须初始化,否则会报错。;* *2、模版字符串(``)* *3、函数* **1、箭头函数 (sender) => { } 箭头函数最直观的三个特点。 不需要function关键字 可以省略return关键字 继承当前上下文的this关键...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。