Android与JavaScript相互调用(Android和h5交互)

简单的写一个JavaScript和Android原生调用的实现demo,由于方便测试在本地写了一个h5页面(本地页面一般放在assets文件夹下)


第一步:在h5里面写了两个方法:

    callJavaScriptMethod()  javascript调用Android的方法

    androidCallJavaScriptMethod()  Android调用javascript的方法

接下来需要用到WebView,简单介绍下它

WebView介绍

    Android WebView在Android平台上是一个特殊的View, 基于webkit引擎、展现web页面的控件,这个类可以被用来在你的app中仅仅显示一张在线的网页,还可以用来开发浏览器。WebView内部实现是采用渲染引擎来展示view的内容,提供网页前进后退,网页放大,缩小,搜索。Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4后直接使用了Chrome。现在很多APP都内置了Web网页,比如说很多电商平台,淘宝、京东、聚划算等等。WebView比较灵活,不需要升级客户端,只需要修改网页代码即可。一些经常变化的页面可以用WebView这种方式去加载网页。

    Webview功能强大,可以直接使用html文件(本地sdcard/assets目录),还可以直接加载url,使用JavaScript可以html跟原生APP互调。

第二步:配置WebView基本信息

    1. 设置编码 mwebview.setDefaultTextEncodingName("utf-8");

    2. 设置支持调用JavaScript方法 mwebview.setJavaScriptEnabled(true);

    3. 要处理解析,渲染网页等浏览器做的事情 mwebview.setWebChromeClient(new WebChromeClient());

    4. 添加js接口 mwebview.addJavascriptInterface(MainActivity.this,"mainActivity"); 

        * 有这个才能通信 mainActivity统一标识 js与原生标识要一致,js调用Android

    5. 设置加载路径 mwebview.loadUrl("file:///android_asset/demo.html");

第三步:上面WebView基本信息配置完成,接下来先实现js调用Android实现

    我们需要在Android里面实现javascript写的js调用Android的方法callJavaScriptMethod()

@JavascriptInterface
public void jsCallNativeLookThread(String msg){
    Toast.makeText(this,msg,Toast.LENGTH_SHORT).show();
}

好了上述就可以实现javascript调用Android的功能了

第四步:Android调用javascript方法,并且返回参数

  1. 我在Android view里面定义放置了一个button点击触发调用javascript。对应的触发方法是androidCallHavaScriptMethod(),在h5里面定义的方法
androidCallJSBtn.setOnClickListener(new Button.OnClickListener() {  //给button添加事件响应,执行JavaScript的fillContent()方法
    public void onClick(View v) {
        //callJavaScriptMethod是js里面的方法
        mWebView.loadUrl("javascript:androidCallJavaScriptMethod()");
    }
});

    2 window.androidToast.show("Android 调用js成功");根据方法里面的看到我们需要一个show()方法,我们创建一个类,然后在类里面创建这个方法,最后通过addJavascriptInterface()回调回来就完成了。代码如下

//Android调用js
mWebView.addJavascriptInterface(new Info(){

    @JavascriptInterface
    @Override
    public void show(String info) {
        super.show(info);
        Toast.makeText(MainActivity.this,info,Toast.LENGTH_SHORT).show();
    }
},"androidToast");
androidCallJSBtn = (Button) findViewById(R.id.androidCallJSBtn);
androidCallJSBtn.setOnClickListener(new Button.OnClickListener() {  //给button添加事件响应,执行JavaScript的fillContent()方法
    public void onClick(View v) {
        //callJavaScriptMethod是js里面的方法
        mWebView.loadUrl("javascript:androidCallJavaScriptMethod()");
    }
});
可能阐述不是很清晰,可以点击下载源码
阅读更多
个人分类: h5前端 Android
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭