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:
谷粉
Java调用javascript:
private void login(String numebr) {
webView.loadUrl("javascript:javaCallJs("+"'"+numebr+"'"+")");
setContentView(webView);
}
Javascript调用Java
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的布局和实例化控件
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 {
@JavascriptInterface
public void playVideo(int id,String videoUrl,String tile){
//调起系统所有播放器
Intent intent = new Intent();
intent.setDataAndType(Uri.parse(videoUrl),"video
@JavascriptInterface
public void showcontacts() {
// 下面的代码建议在子线程中调用
String json = "[{"name":"阿福", "phone":"18600012345"}]";
// 调用JS中的方法
webView.loadUrl("javascript:show('" + json + "')");
}
}
5_拨打电话代码
class AndroidAndJSInterface {
@JavascriptInterface
public void showcontacts() {
// 下面的代码建议在子线程中调用
String json = "[{"name":"阿福", "phone":"18600012345"}]";
// 调用JS中的方法
webView.loadUrl("javascript:show('" + json + "')");
}
public void call(String phone) {
Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
// startActivity(intent);
}
}
6_h5页面：
Insert title here
| 姓名 | 电话 |
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
