微信,微博,微商,QQ 空间,大量的软件使用内嵌了 H5,这个时候就需要了解 Android 如何更 H5 交互的了;有些外包公司,为了节约成本,采用 Android 内嵌 H5 模式开发,便于在 IOS 上直接复用页面,最终解决成本。 为什么学 android 也要学 h5? Android 很多软件都有内嵌 H5 的, 有什么用处、优势?节约成本,提高开发效率。
本质是: Java 代码和 JavaScript 调用 案例一:Java 与 Js 简单互调 首先,在 Android 代码中加载 H5 页面:
- private void initwebView() {
- webView =newWebView(this);
- WebSettings webSettings = 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:
- <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="点击Android被调用" onclick="window.Android.showToast()"
- />
- </body>
- </html>
Java 调用 javaScript:
- /**
- * Java调用javaScript
- * @paramnumebr
- */
- 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(newAndroidAndJSInterface(),"Android");//html里的点击事件实现:<br>"button"value="点击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{
- privateWebView 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(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";
- 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调用javawebView.addJavascriptInterface(newAndroidAndJSInterface(),"android");
6_Javascript 接口类
- class AndroidAndJSInterface {/**
- * 该方法将被js调用
- * @paramid
- * @paramvideoUrl
- * @paramtile
- */
- @JavascriptInterface
- public void playVideo(intid,String videoUrl,String tile){//调起系统所有播放器Intent intent =newIntent();
- 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 并且配置
- privateWebView 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(newWebViewClient());//设置支持js调用javawebView.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
- 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 +"')");
- }/**
- * 拨打电话
- * @paramphone
- */
- public void call(String phone) {
- Intent intent =newIntent(Intent.ACTION_CALL, Uri.parse("tel:"+ phone));// startActivity(intent);}
- }
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; yvar 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>
来源: http://www.bubuko.com/infodetail-2044328.html