一年好景君须记,最是橙黄橘绿时。这篇文章主要讲述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:
<
html>
<
head>
<
meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<
script type="text/javascript">
function javaCallJs(){
document.getElementById("content").innerHTML +=
"<
br\>
java调用了js无参函数";
}function javaCallJs(arg){
document.getElementById("content").innerHTML =
("欢迎:"+arg );
}function showDialog(){
alert("谷粉们你好,我是来自javascript");
}
<
/script>
<
/head>
<
body>
<
div align="left" id="content">
谷粉<
/div>
<
input type="button" value="https://www.songbingjia.com/android/点击Android被调用" onclick="window.Android.showToast()" />
<
/body>
<
/html>
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里的点击事件实现:<
br>
<
input type="button" value="https://www.songbingjia.com/android/点击Android被调用" onclick="window.Android.showToast()" />
案例二:H5页面调用Android播放视频
了解了简单调用,下面讲的这个也就简单了:
1_JsCallJavaVideoActivity的布局和实例化控件
<
?xml version="1.0" encoding="utf-8"?>
<
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.atguigu.androidandh5.JsCallJavaVideoActivity">
<
WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<
/RelativeLayout>
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布局
<
?xml version="1.0" encoding="utf-8"?>
<
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.atguigu.androidandh5.JsCallJavaVideoActivity">
<
WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<
/RelativeLayout>
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);
}
}
【Android与H5互调】 6_h5页面:
<
html>
<
head>
<
meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<
title>
Insert title here<
/title>
<
script type="text/javascript">
function show(jsondata){
var jsonobjs = eval(jsondata);
var table = document.getElementById("personTable");
for(var y=0;
y<
jsonobjs.length;
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 = "<
a href=‘javascript:Android.call(\""+ jsonobjs[y].phone+ "\")‘>
"+ jsonobjs[y].phone+ "<
/a>
";
}
}<
/script>
<
/head>
<
body onload="javascript:Android.showcontacts()">
<
table border="0" width="100%" id="personTable" cellspacing="0">
<
tr>
<
td width="30%">
姓名<
/td>
<
td align="center">
电话<
/td>
<
/tr>
<
/table>
<
/body>
<
/html>
推荐阅读
- android MPChart图标使用具体解释
- Android 网络图片Url 转 Bitmap
- android奋战的一周
- Android攻城狮四种基础动画
- Android攻城狮基础动画
- Android攻城狮动画组合
- android中实现内容搜索
- Android应用中使用百度地图API之POI
- 一般枢轴点旋转或绕固定点旋转