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="點擊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="點擊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調用javawebView.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); } }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>感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
