android和h5的交互(一)

其实之前也没怎么接触这块,第一是自己开发的时间并不长,第二是公司开发的项目基本上都是原生的。快过年了,觉得有必要对今年的一些东西做一些总结,就以此作为一个开篇吧。

一、js方法中调用android的方法

首先,我们新建一个项目,然后在启动的activity里面(此处为MainActivity)就写一个按钮,


布局文件就一个button就不贴了,代码也很简单,就是让他跳转一个WebActiviy,如下图:

其中H5_DIR为我存放静态html的路径(WebActivity中会用到,其实可以不要写在Activity里面,当时随手写了,就不改了,请知悉),下图为文件的目录结构:


WebActivity的页面很简单,就是一个返回按钮,一个显示按钮,还有一个WebView用来加载上图所展示的first.html,如下图:


加载webview的代码如下图,


如上上图中展示的返回箭头是html中所在,这时如果想要点击此箭头返回上一个activity那就要js调用android的本地方法,

首先,我们通常会封装一个类,用来做交互,话不多说,直接贴代码,


接下来,WebActivity中直接调用,

webView.addJavascriptInterface(new JavaScriptInterface(this),"Android");

当然,你js中也要有相应的方法,


注意的是此处你的Android其实就是webView.addJavascriptInterface(new JavaScriptInterface(this),"Android")这个方法中最后定义的这个Android,两者保持一直即可,如此,便完成了js调用android本地方法

二、android方法中调用js的方法

我了解的主要分两种情况吧,一种是调用无返回参数的,比如我点击我WebActivity中的返回按钮可以调用js中的back()方法,而其实我现在back()方法其实调用了android本地的finish()方法,所以也可以完成页面的返回,调用方法如下:findViewById(R.id.btnBack).setOnClickListener(new View.OnClickListener() {

@Override

    public void onClick(View v) {

webView.loadUrl("javascript:back()");

}

});

还有一种是调用有返回参数的,首先在我的first.html中添加一个简单的方法,比如:function num(){

return 10;

}

然后我们在WebActivity中的调用如下:

findViewById(R.id.btnShow).setOnClickListener(new View.OnClickListener() {

@RequiresApi(api = Build.VERSION_CODES.KITKAT)

@Override

    public void onClick(View v) {

webView.evaluateJavascript("num()",new ValueCallback() {

@Override

            public void onReceiveValue(String value) {

Toast.makeText(WebActivity.this, value, Toast.LENGTH_SHORT).show();

}

});

}

});

直接可以用土司弹出10,如此便完成了android对js方法的调用。

第一次写,写的有点乱,多多见谅!需要源码或者有什么问题的可以在下面留言,大家互相交流,我的开发时间也很短,希望大家可以共同进步!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,866评论 25 708
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,497评论 0 17
  • 一、WebView 谷歌提供的系统组件,用来加载和展现html网页,其采用webkit内核驱动,来实现网页浏览功能...
    闲庭阅读 7,010评论 2 12
  • 提升自己,取悅自己,這樣以後才能掌握主动權。 獨立的人格,享受平等的待遇,這樣才能谈好一場戀愛。讓對方產生依賴感,...
    貓grace阅读 188评论 0 0
  • ES6规范清晰的定义了对象的类别 普通对象 具有JavaScript对象所有的默认内部行为 特异对象 具有某些与默...
    前端小兵阅读 248评论 0 0