2. 程式人生 > >【轉】Android與H5互調

【轉】Android與H5互調

阿新 • • 發佈：2019-02-14

原文地址：http://blog.csdn.net/hpc19950723/article/details/70881226

前言

        微信，微博，微商，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);
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

        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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
/**
 * Java呼叫javaScript
 * @param numebr
 */
private void login(String numebr) {
    webView.loadUrl("javascript:javaCallJs("+"'"+numebr+"'"+")");
    setContentView(webView);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

        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()" />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

案例二：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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

        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");

    }

 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

        3_載入頁面

//載入本地資源        webView.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");
  • 1
  • 1

        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';
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

        5_配置Javascript介面

//設定支援js呼叫java
webView.addJavascriptInterface(new AndroidAndJSInterface(),"android");
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

        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);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

案例三：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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

        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");

    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

        3_載入JsCallJavaCallPhone.html頁面

//載入本地資源
//    webView.loadUrl("http://atguigu.com/teacher.shtml");
     webView.loadUrl("file:///android_asset/JsCallJavaCallPhone.html");
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

        4_從java程式碼傳遞json資料給javascript

class AndroidAndJSInterface {
    /**
     * 該方法將被js呼叫,用於載入資料
     */
    @JavascriptInterface
    public void showcontacts() {
        // 下面的程式碼建議在子執行緒中呼叫
        String json = "[{\"name\":\"阿福\", \"phone\":\"18600012345\"}]";
        // 呼叫JS中的方法
        webView.loadUrl("javascript:show('" + json + "')");
    }

 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

        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);
        }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

        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與H5互調

原文地址：http://blog.csdn.net/hpc19950723/article/details/70881226 前言         微信，微博，微商，QQ空間，大量的軟體使用內嵌了H5，這個時候就需要了解Android如何更H5互動的了；有些外包公司，

Android與H5互調（通過實例來了解Hybrid App）

ext 傳感器 顯示 相同 blank show ima 一次 點擊 前些日子，Android原生開發將被取締的吵得火熱，JavaScript是能做一個完全的APP，但只使用JavaScript做出來的APP也不會牛逼到哪裏去。最好的是混合（Hybrid）開發，在需要的

android與h5互調

Java程式碼與H5互調 介面佈局就不說了，一個按鈕 主要是核心程式碼 package com.example.androi_h5; import android.app.Activity; import android.os.Bundle; import andro

WebView詳解與簡單Android與H5互調

為什麼要學習Android與H5互調？ 微信，QQ空間等大量軟體都內嵌了H5，不得不說是一種趨勢。Android與H5互調可以讓我們的實現混合開發，至於混合開發就是在一個App中內嵌一個輕量級的瀏覽器，一部分原生的功能改為Html 5來開發。  優勢：使用H5實現的功能能夠在不升級App的情況下動態更

WebView詳解與簡單實現Android與H5互調

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 為什麼要學習Android與H5互調？ 微信，QQ空間等大量軟體都內嵌了H5，不得不說是一種趨勢。Android與H5互調可以讓我們的實現混合開發，至於混合開發就是在一個App中內嵌

【轉】Android continue、break、return的區別與使用

本文轉自Android continue、break、return的區別與使用 一、continue ：作用是跳過迴圈本中剩餘的語句而強行執行下一次迴圈(即:不再執行迴圈體裡continue後面的語句而是跳到下一個迴圈入口處執行下一個迴圈)。continue語句

【Java】ASCII與字母互轉(程式碼整理)

ASCII（American Standard Code for Information Interchange，美國資訊交換標準程式碼）是基於拉丁字母的一套電腦編碼系統，主要用於顯示現代英語和其他西歐語言。 這是我轉換的程式碼工具類 package test; /**

【轉】Android 4.0 Launcher2源碼分析——啟動過程分析

handler flag 這一 第一次啟動 asynctask pla size ontouch wait Android的應用程序的入口定義在AndroidManifest.xml文件中可以找出：[html] <manifest xmlns:android="htt

【轉】Android:No implementation found for native

stat void for boa bte pre shared int jnienv 解決方法： 1.檢查native c code的定義： JNIEXPORT void Java_com_example_something_MyClass_getMyString(JNI

【轉】Android橫豎屏重力自適應

ron ati lan target 設計 根據 use rpo 適應 通常我們的應用只會設計成橫屏或者豎屏，鎖定橫屏或豎屏的方法是在manifest.xml文件中設定屬性android:screenOrientation為"landscape"或"portrait"：

【轉】 Android路由實現

~~ 下載 bin 一個 setup 自己的路 rul 簡單 sync 本文轉自： http://blog.csdn.net/qibin0506/article/details/53373412 前幾個月有幸參加了CSDN組織的MDCC移動開發者大會, 一天下來我最大的收獲

【轉】Quartz.net開源作業調度框架使用詳解

詳解 des 關於 utc ogg knowledge imp common dem 轉自：http://www.cnblogs.com/knowledgesea/p/4930469.html 前言 quartz.net作業調度框架是偉大組織OpenSymphony開發的q

【轉】Android開發筆記（序）寫在前面的目錄

animator 進程間通信 scrip cst 調用 receiver 手勢 打包 數據庫基礎 原文：http://blog.csdn.net/aqi00/article/details/50012511 知識點分類 一方面寫寫自己走過的彎路掉進去的坑，避免以後

【轉】Android Camera 相機開發詳解

exc troy start 當前 container rac google getconf 對比度 在Android 5.0（SDK 21）中，Google使用Camera2替代了Camera接口。Camera2在接口和架構上做了巨大的變動, 但是基於眾所周知的原因

【轉】innerHTML與jQuery裏的html()區別介紹

word www. 函數 利用 table ber order light syntax http://www.jb51.net/article/31548.htm 1、 2、 innerHTML與jquery裏的html()區別介紹 轉載 2012-10-12 投

【轉】Android Studio打包全攻略---從入門到精通

UC store 類型 安裝文件 public alt url tool 描述 原文地址：http://blog.csdn.net/zivensonice/article/details/51672846 初出茅廬 手動打包 怎麽手動打包 項目寫完了，現在需要把應用上傳

【轉】原因與證明

你們 同學 我只 然而 導致 cal 速度慢 理論 重要 我在 Cornell 的時候經常遇到這樣的問題，那就是教授們一上課就在黑板上寫長篇的“定理證明”，全體同學認認真真在下面抄筆記，就連只有十來個人的小課也是那樣。有些寫字速度慢的人就不得不帶上小型錄音機，把教授的課全都

【轉】AlphaGo與人工智能

aec -o 隔離 大於 革命 image 中國人 其中 mach AlphaGo與人工智能 在之前的一篇文章中我指出，自動駕駛所需要的“視覺識別能力”和“常識判斷能力”，對於機器來說是非常困難的問題。至今沒有任何機器可以在視覺方面達到驢的水平，更不要說和人比。可是最近

【轉】Android性能優化-過度繪制解決方案

裏的 watermark == ++ 深度 getc 像素 多次 但是 轉載請註明出處：http://blog.csdn.net/a740169405/article/details/53896497 過度繪制： 屏幕上某一像素點在一幀中被重復繪制多次，就是過度繪制。

android開發學習 ------- 【轉】 android中的單例模式 （詳解）

lan post tail -- and 使用 href details android開發 https://blog.csdn.net/u011418943/article/details/60139644 這篇文章 前因後果 都說出來了 ，值得學習。 htt