Android与H5互调详细介绍

2024-02-24 19:17:03 136

Android与H5互调详细介绍

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

为什么学android也要学h5？

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

实现的原理是什么？

本质是:Java代码和JavaScript调用

案例一：Java与Js简单互调

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

privatevoidinitWebView(){
webView=newWebView(this);
WebSettingswebSettings=webView.getSettings();
//设置支持javaScript脚步语言
webSettings.setJavaScriptEnabled(true);

//支持双击-前提是页面要支持才显示
webSettings.setUseWideViewPort(true);

//支持缩放按钮-前提是页面要支持才显示
webSettings.setBuiltInZoomControls(true);

//设置客户端-不跳转到默认浏览器中
webView.setWebViewClient(newWebViewClient());

//加载网络资源
//webView.loadUrl("http://atguigu.com/teacher.shtml");
webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");

//显示页面
setContentView(webView);
}

JavaAndJavaScriptCall.html:






functionjavaCallJs(){
document.getElementById("content").innerHTML+=
"java调用了js无参函数";
}

functionjavaCallJs(arg){
document.getElementById("content").innerHTML=
("欢迎："+arg);
}


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



谷粉

Java调用javaScript:

/**
*Java调用javaScript
*@paramnumebr
*/
privatevoidlogin(Stringnumebr){
webView.loadUrl("javascript:javaCallJs("+"'"+numebr+"'"+")");
setContentView(webView);
}

JavaScript调用Java

/**
*js可以调用该类的方法
*/
classAndroidAndJSInterface{
@JavascriptInterface
publicvoidshowToast(){
Toast.makeText(JavaAndJSActivity.this,"我被js调用了",Toast.LENGTH_SHORT).show();
}
}
//与此同时需要在webview当中注册，后面的“Android”与html中的对应：
webView.addJavascriptInterface(newAndroidAndJSInterface(),"Android");
//html里的点击事件实现：

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

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

1_JsCallJavaVideoActivity的布局和实例化控件

2_实例化控件并且配置

publicclassJsCallJavaVideoActivityextendsActivity{

privateWebViewwebView;

@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_js_call_java_video);
webView=(WebView)findViewById(R.id.webview);
WebSettingswebSettings=webView.getSettings();
//设置支持javaScript脚步语言
webSettings.setJavaScriptEnabled(true);

//支持双击-前提是页面要支持才显示
//webSettings.setUseWideViewPort(true);

//支持缩放按钮-前提是页面要支持才显示
webSettings.setBuiltInZoomControls(true);

//设置客户端-不跳转到默认浏览器中
webView.setWebViewClient(newWebViewClient());

//加载网络资源
//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";
varvideourl="http://10.0.2.2:8080/yellow.mp4";
varitemid="65411";
varitemdesc="1级单杀小龙，5级单杀峡谷先锋！";
varitempic="http://avatar.anzogame.com/pic_v1/lol/news/20160507/spic65411h572d6eaf.jpg";
varitemtitle="6.9玛尔扎哈OP套路教程";
varobj_play=document.getElementById('play');
varobj_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(newAndroidAndJSInterface(),"android");

6_Javascript接口类

classAndroidAndJSInterface{
/**
*该方法将被js调用
*@paramid
*@paramvideoUrl
*@paramtile
*/
@JavascriptInterface
publicvoidplayVideo(intid,StringvideoUrl,Stringtile){
//调起系统所有播放器
Intentintent=newIntent();
intent.setDataAndType(Uri.parse(videoUrl),"video/*");
startActivity(intent);
}
}

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

1_JsCallJavaCallPhoneActivity布局

2_初始化WebView并且配置

privateWebViewwebView;

@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_js_call_java_video);
webView=(WebView)findViewById(R.id.webview);
WebSettingswebSettings=webView.getSettings();
//设置支持javaScript脚步语言
webSettings.setJavaScriptEnabled(true);

//支持双击-前提是页面要支持才显示
//webSettings.setUseWideViewPort(true);

//支持缩放按钮-前提是页面要支持才显示
webSettings.setBuiltInZoomControls(true);

//设置客户端-不跳转到默认浏览器中
webView.setWebViewClient(newWebViewClient());

//设置支持js调用java
webView.addJavascriptInterface(newAndroidAndJSInterface(),"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

classAndroidAndJSInterface{
/**
*该方法将被js调用,用于加载数据
*/
@JavascriptInterface
publicvoidshowcontacts(){
//下面的代码建议在子线程中调用
Stringjson="[{\"name\":\"阿福\",\"phone\":\"18600012345\"}]";
//调用JS中的方法
webView.loadUrl("javascript:show('"+json+"')");
}

}

5_拨打电话代码

classAndroidAndJSInterface{
/**
*该方法将被js调用,用于加载数据
*/
@JavascriptInterface
publicvoidshowcontacts(){
//下面的代码建议在子线程中调用
Stringjson="[{\"name\":\"阿福\",\"phone\":\"18600012345\"}]";
//调用JS中的方法
webView.loadUrl("javascript:show('"+json+"')");
}
/**
*拨打电话
*@paramphone
*/
publicvoidcall(Stringphone){
Intentintent=newIntent(Intent.ACTION_CALL,Uri.parse("tel:"+phone));
//startActivity(intent);
}
}

6_h5页面：




Inserttitlehere

functionshow(jsondata){
varjsonobjs=eval(jsondata);
vartable=document.getElementById("personTable");
for(vary=0;y"+jsonobjs[y].phone+"";
}
}







姓名
电话

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

Android与H5互调详细介绍

热门推荐

随机推荐