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（）

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

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

第四步：Android调用javascript方法，并且返回参数

我在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调用jsmWebView.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()");    }});

可能阐述不是很清晰，可以点击下载源码

WebView介绍

更多相关文章

随机推荐