Android与H5互调详细介绍

微信，微博，微商，QQ空间，大量的软件使用内嵌了H5，这个时候就需要了解Android如何更H5交互的了；有些外包公司，为了节约成本，采用Android内嵌H5模式开发，便于在iOS上直接复用页面，最终解决成本。

为什么学android也要学h5？

Android很多软件都有内嵌H5的,有什么用处、优势？节约成本，提高开发效率。

实现的原理是什么？

本质是:Java代码和JavaScript调用

案例一：Java与Js简单互调

首先，在Android代码中加载H5页面：

private void initWebView() {

webView = new WebView(this);

WebSettings webSettings = webView.getSettings();

//设置支持javaScript脚步语言

webSettings.setJavaScriptEnabled(true);

//支持双击-前提是页面要支持才显示

webSettings.setUseWideViewPort(true);

//支持缩放按钮-前提是页面要支持才显示

webSettings.setBuiltInZoomControls(true);

//设置客户端-不跳转到默认浏览器中

webView.setWebViewClient(new WebViewClient());

//加载网络资源

//webView.loadUrl("http://atguigu.com/teacher.shtml");

webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");

//显示页面

setContentView(webView);

}

JavaAndJavaScriptCall.html:

function javaCallJs(){

document.getElementById("content").innerHTML +=

"
java调用了js无参函数";

}

function javaCallJs(arg){

document.getElementById("content").innerHTML =

("欢迎："+arg );

}

function showDialog(){

alert("谷粉们你好,我是来自javascript");

}

Java调用javaScript:

/**

* Java调用javaScript

* @param numebr

*/

private void login(String numebr) {

webView.loadUrl("javascript:javaCallJs("+"'"+numebr+"'"+")");

setContentView(webView);

}

JavaScript调用Java

/**

* js可以调用该类的方法

*/

class AndroidAndJSInterface{

@JavascriptInterface

public void showToast(){

Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();

}

}

//与此同时需要在webview当中注册，后面的“Android”与html中的对应：

webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");

//html里的点击事件实现：

案例二：H5页面调用Android播放视频

了解了简单调用，下面讲的这个也就简单了:

1_JsCallJavaVideoActivity的布局和实例化控件

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.atguigu.androidandh5.JsCallJavaVideoActivity">

android:id="@+id/webview"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

2_实例化控件并且配置

public class JsCallJavaVideoActivity extends Activity {

private WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_js_call_java_video);

webView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = webView.getSettings();

//设置支持javaScript脚步语言

webSettings.setJavaScriptEnabled(true);

//支持双击-前提是页面要支持才显示

// webSettings.setUseWideViewPort(true);

//支持缩放按钮-前提是页面要支持才显示

webSettings.setBuiltInZoomControls(true);

//设置客户端-不跳转到默认浏览器中

webView.setWebViewClient(new WebViewClient());

//加载网络资源

// webView.loadUrl("http://atguigu.com/teacher.shtml");

webView.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");

}

}

3_加载页面

//加载本地资源

webView.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");

4_参照js代码写Java被调用代码

url = "/mobiles/interActive/65411";

var videourl = "http://10.0.2.2:8080/yellow.mp4";

var itemid = "65411";

var itemdesc = "1级单杀小龙，5级单杀峡谷先锋！";

var itempic = "http://avatar.anzogame.com/pic_v1/lol/news/20160507/spic65411h572d6eaf.jpg";

var itemtitle = "6.9玛尔扎哈OP套路教程";

var obj_play = document.getElementById('play');

var obj_download = document.getElementById('download');

if(obj_play != null) {

obj_play.ontouchstart = function() {

this.className = 'inter_click';

javascript:android.playVideo(itemid, videourl, itemtitle);

ajaxrequest('/stat/item', "POST", true, {type:'play', id:itemid});

}

obj_play.ontouchend = function() {

this.className = 'inter';

}

}

5_配置Javascript接口

//设置支持js调用java

webView.addJavascriptInterface(new AndroidAndJSInterface(),"android");

6_Javascript接口类

class AndroidAndJSInterface {

/**

* 该方法将被js调用

* @param id

* @param videoUrl

* @param tile

*/

@JavascriptInterface

public void playVideo(int id,String videoUrl,String tile){

//调起系统所有播放器

Intent intent = new Intent();

intent.setDataAndType(Uri.parse(videoUrl),"video/*");

startActivity(intent);

}

}

案例三：H5页面调用Android拨打电话

1_JsCallJavaCallPhoneActivity布局

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.atguigu.androidandh5.JsCallJavaVideoActivity">

android:id="@+id/webview"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

2_初始化WebView并且配置

private WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_js_call_java_video);

webView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = webView.getSettings();

//设置支持javaScript脚步语言

webSettings.setJavaScriptEnabled(true);

//支持双击-前提是页面要支持才显示

// webSettings.setUseWideViewPort(true);

//支持缩放按钮-前提是页面要支持才显示

webSettings.setBuiltInZoomControls(true);

//设置客户端-不跳转到默认浏览器中

webView.setWebViewClient(new WebViewClient());

//设置支持js调用java

webView.addJavascriptInterface(new AndroidAndJSInterface(), "Android");

//加载本地资源

// webView.loadUrl("http://atguigu.com/teacher.shtml");

webView.loadUrl("file:///android_asset/JsCallJavaCallPhone.html");

}

3_加载JsCallJavaCallPhone.html页面

//加载本地资源

// webView.loadUrl("http://atguigu.com/teacher.shtml");

webView.loadUrl(file:///android_asset/JsCallJavaCallPhone.html);

4_从java代码传递json数据给javascript

class AndroidAndJSInterface {

/**

* 该方法将被js调用,用于加载数据

*/

@JavascriptInterface

public void showcontacts() {

// 下面的代码建议在子线程中调用

String json = "[{\"name\":\"阿福\", \"phone\":\"18600012345\"}]";

// 调用JS中的方法

webView.loadUrl("javascript:show('" + json + "')");

}

}

5_拨打电话代码

class AndroidAndJSInterface {

/**

* 该方法将被js调用,用于加载数据

*/

@JavascriptInterface

public void showcontacts() {

// 下面的代码建议在子线程中调用

String json = "[{\"name\":\"阿福\", \"phone\":\"18600012345\"}]";

// 调用JS中的方法

webView.loadUrl("javascript:show('" + json + "')");

}

/**

* 拨打电话

* @param phone

*/

public void call(String phone) {

Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));

// startActivity(intent);

}

}

6_h5页面：

Insert title here

function show(jsondata){

var jsonobjs = eval(jsondata);

var table = document.getElementById("personTable");

for(var y=0; y

var tr = table.insertRow(table.rows.length);

var td1 = tr.insertCell(0);

var td2 = tr.insertCell(1);

td2.align = "center";

td1.innerHTML = jsonobjs[y].name;

td2.innerHTML = ""+ jsonobjs[y].phone+ "";

}

}

姓名

电话

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！