安卓混合開發——原生Java和H5互動，保證你一看就懂！

??ndroid寮???涓?锛?瓒??ヨ?澶?????涓?椤圭??浣跨?ㄤ?Android?????т歡涓?WebView杩?琛?娣峰??寮???锛?褰??朵?浠?浠?灏辨???劇ず涓?涓?WebView?ｄ?绠???锛????跺??杩???瑕?????ava浠ｇ??涓?HTML涓???JavaScript杩?琛?浜や?锛?Android涔?瀵逛氦浜???浜?寰?濂界??灏?瑁?锛???浠ュ?瀹規??瀹??頒?濡?锛??瑰?葷?椤典腑??????Android璋??ㄥ????瀵矽??妗?锛??瑰?葷?椤典腑???佃???風??璋???ndroid?ㄥ??PP??杩?绡?缁?澶у?朵?缁?涓?濡?浣?瀹???ndroid涓?HTML+JS??浜や???

??绡???涓昏????界?癸?

1??webView濡?浣???杞?5椤甸?? 2??Android濡?浣?璋???5涓????規?

3??H5濡?浣?璋???ndroid涓????規?

1??webview濡?浣???杞?5椤甸?? ??浠??界?ラ????ndroid涓?????杩?webView?ュ??杞?tml椤甸?㈢??锛??規??HTML??浠舵???ㄧ??浣?缃?涓?????娉?涔?涓???锛?

*//??杞?ssets??浠跺す涓???test.html椤甸?????浠舵???懼???*
*mWebView.loadUrl("file:///android_asset/test.html");*
*//??杞界?椤?
*mWebView.loadUrl("http://www.baidu.com");*

安卓混合開發——原生Java和H5互動，保證你一看就懂！

??锛???杞芥????ssets????test.html??浠舵????

2??Android濡?浣?璋???5涓????規?**

?寵?璋???s?規??ｄ?灏卞?椤昏??ebView????

*WebSettings webSettings = mWebView.getSettings();*
*//璁劇疆涓哄??璋???s?規?*
*webSettings.setJavaScriptEnabled(true);*

濡?浣?璋????

Android璋???5涓????規?锛??跺??寰?绠???锛??存?ヨ??ㄥ氨??浠ヤ?锛?涓???瑕?棰?澶?????浣???

??璋???5涓???????杩????肩???規?***

?存?ュ??浠ヨ???WebView.loadUrl("JavaScript:show()");??涓?5涓?show锛?锛??規???*

**mWebView.loadUrl("JavaScript:show()");**

安卓混合開發——原生Java和H5互動，保證你一看就懂！

??锛?android 璋???5涓??????版??杩????肩???規?锛????句負H5涓????規?

?¤???5涓?甯?????肩???規?***

??浠ヨ???WebView.evaluateJavascript()?規?锛?璇ユ?規????ㄥ????4.4浠ヤ????????????涓?ndroid璋???5涓?甯?????肩???規???

*mWebView.evaluateJavascript("sum(1,2)",new ValueCallback() {        *
*       @Override*
*       public void on ReceiveValue(String value) {           *
*            Log.e(TAG,"onReceiveValue value=" + value);       *
*       }   *
* });*

安卓混合開發——原生Java和H5互動，保證你一看就懂！

??锛?瀹???璋???5涓?甯?????肩???規?

?㈣???5涓?甯????扮???規?***

褰?璋???5涓?甯????扮???規??訛??垮?瑕?浼??ヤ?涓?瀛?绗?覆锛?褰?浼??ュ?哄??瀛?绗?覆?訛??ㄥ??寮??鋒??璧鋒?ュ?沖??锛?褰?浼??ュ???????訛???瑕??ㄥ?拌漿涔?绗??杩?????涔????辮垂??涓?灏??舵????????锛??垮?匡???涓ょ????典唬??锛??????ㄤ??㈣創?猴?搴??ㄦ???懼?????

mWebView.loadUrl("javascript:alertMessage('????')");

*String  content="9880";*
mWebView.loadUrl(  "javascript:alertMessage(\" "     +content+     "\")"      );

安卓混合開發——原生Java和H5互動，保證你一看就懂！

??锛?Android璋???5涓?甯????扮???規?

3??H5濡?浣?璋???ndroid涓????規?

*** *H5璋???ndroid?????規?锛??稿?瑰???涓?浜?锛????瑰?蜂???浣?濡?涓?锛?

*** Android??瑕???浠?涔????锛?锛?锛?锛?***

璇寸?戒?灏辨???闆緩涓?涓?绫夥????㈠????渚?缁?H5??浣????規?锛?骞惰?瀹???????杩??????闆緩??class涓?sInteration,?規?涓?ack(),瑙?瀹???????涓?ndroid????璐存???撅???璐翠唬????*

安卓混合開發——原生Java和H5互動，保證你一看就懂！

??锛?H5璋???ndroid?????規?锛?Android??瑕?????浣?

?ㄥ????4.2浠ヤ???浠ョ?存?ヤ嬌??JavascriptInterface娉ㄨВ?ュ０??锛?涓??㈡???ㄤ?涓?????ava?規?

public  class  JsInteration  {
      @JavascriptInterface
      public  String  back() {
             return "hello world";   
       }
}

瀹?涔?瀹?杩?涓??規?????璋???WebView.addJavascriptInterface()?規?锛?

mWebView.addJavascriptInterface(newJsInteration(),"android");

??5涓???涔??ヨ??ㄥ???

璋??ㄦ?煎?涓?window.????.android涓????規???(parameter Values) 锛?姝ょず渚?涓???浠??ㄧ??????涓?ndroid锛??規???涓?ack锛?锛????????撅???璐翠唬????

安卓混合開發——原生Java和H5互動，保證你一看就懂！

??锛?H5璋???ndroid?????規?锛?Android??瑕?????浣?

H5浠ｇ??濡?涓?锛?***

*function s() {*
      var result=window.android.back();
      document.getElementById("p").innerHTML=result;
}

浠ヤ?灏辨??Android璋???5?規?浠ュ??H5璋???ndroid?規???瀹??頒氦浜??瑰?涓???涓?绉???涓??㈢??哄???翠唬??锛?

MainActivity浠ｇ??锛?***

package com.e_valmont.javaandjsinteractivedemo;

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity{

    private static final String TAG = "MainActivity";
    private WebView mWebView;

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.loadUrl("file:///android_asset/js_java_interaction.html");//??杞芥????sset涓??㈢??js_java_interaction.html??浠?        //mWebView.loadUrl("https://www.baidu.com/");//??杞芥????ssets涓??㈢??js_java_interaction.html??浠?
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);//??寮?js????
        /**
         * ??寮?js?ュ?ｇ鄲H5璋????????涓烘???扮被??锛?????涓哄????锛?h5??indow.????.绫誨???????規??????借??ㄦ?規????㈢????瀹癸?渚?濡?锛?window.android.back();
         * */
        mWebView.addJavascriptInterface(new JsInteration(), "android");
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.setWebChromeClient(new WebChromeClient());
    }

    /**
     * ??宸卞??涓?涓?绫夥????㈡????渚?缁?H5璁塊?????規?
     * */
    public class JsInteration {

        @JavascriptInterface//涓?瀹?瑕???锛?涓???5璋?涓??拌?涓??規?
        public String back() {
            return "????java?????規?杩?????;
        }
    }

    //?瑰?繪????锛?璁塊??H5??甯?????肩???規?
    @TargetApi(Build.VERSION_CODES.KITKAT)
    public void onClick(View v) {
        Log.e("TAG", "onClick: ");

//        mWebView.loadUrl("JavaScript:show()");//?存?ヨ?塊??H5??涓?甯?????肩???規?锛?show()涓?5?????規?


        //浼??哄??瀛?绗?覆??浠ョ?存?ョ?ㄥ??寮??鋒??璧鋒??        mWebView.loadUrl("javascript:alertMessage('????')");//璁塊??H5??甯????扮???規?锛?alertMessage(message)涓?5?????規?

        //褰??哄?ュ???????訛???瑕??ㄨ漿涔?绗???寮?
        String content="9880";
        mWebView.loadUrl("javascript:alertMessage(\""   +content+   "\")"   );


        //Android璋??ㄦ??杩?????s?規?锛?瀹???4.4浠ヤ????界?ㄨ?涓??規?
        mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                Log.d(TAG, "js杩?????缁???涓?" + value);
                Toast.makeText(MainActivity.this,"js杩?????缁???涓?" + value,Toast.LENGTH_LONG).show();
            }
        });
    }
}

activiy_main.xml浠ｇ??锛?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="9"
         />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="?瑰?昏???s涓????規?"/>


</LinearLayout>

js_java_interaction.html浠ｇ??锛?

<html>
    <head>
        <!--浠?assert涓???杞界??涓???缃?椤典??虹?頒貢??锛?瑙ｅ?沖??娉?灏辨??缁?html??瀹?缂???-->
        <meta http-equiv="content-type" content="text/html;charset=gb2312">
        <title>
        </title>


    </head>
    <body>
        杩???html椤甸??<br/>
        <button onclick="s()">?瑰?昏??ㄦ???版?規?</button>
        <a href="file:///android_asset/js_java_interaction.html" target="_blank" rel="external nofollow" >?瑰?昏煩杞??闆????椤甸??lt;/a>
        <p id="p"></p>

        <script type="text/javascript">

            //??????杩????肩???規?
            function sum(a,b) {
                <!--gygguuuiu-->
                return a+b;
            }

            //??????杩????肩???規?
            function alertMessage(message) {
                alert(message);
            }

            //??????杩????肩???規?
            function show(){
                //?劇ずhello world
                document.getElementById("p").innerHTML="hello world";
            }

            function s() {
                //璋??ㄥ???????規?锛?android涓虹害瀹???????锛?back()涓哄???????規?
                var result=window.android.back();
                //灏?杩???缁????劇ず??d涓????т歡涓?
                document.getElementById("p").innerHTML=result;
            }
        </script>
    </body>
</html>

娉ㄦ??浜?椤癸?***

1??褰???宸卞??html??浠舵?訛????戒??虹?版?劇ず涔辯??锛???浠???瑕???瀹??煎?

安卓混合開發——原生Java和H5互動，保證你一看就懂！

???句負Html?劇ず涔辯??锛???瑕??ц?????浣?

2??褰?H5璋??ㄦ??浠????規??訛???浠???瑕???瑙?瀹???????浼?缁?H5锛???璁頒?瀹?涓??介??锛?锛???涓???浠?瑕??ㄨ??宸辯???規????ц?H5?寵?????浣???

安卓混合開發——原生Java和H5互動，保證你一看就懂！

???句腑??????????瑕???浠?浼?缁?H5??

3??缁?H5璋??ㄧ???規?涓?瀹?瑕???@JavascriptInterface锛?涓???5璋?涓??版??浠????規?

安卓混合開發——原生Java和H5互動，保證你一看就懂！

@JavascriptInterface涓?瀹?瑕???

4?? 璋???s?????版??杩????肩???芥?版?訛?????瀹???4.4浠ヤ????界??ebView.evaluateJavascript?規??存?ユ?垮?拌????鹼?褰?????浣?浜?4.4???跺??锛?甯哥?ㄧ????璺??? java璋???s?規?锛?js?規??ц?瀹?姣?锛???娆¤???ava浠ｇ??灏??艱?????

??.Java璋???s浠ｇ??

String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);

??js?芥?闆???锛?骞跺?缁?????杩?璋???ava?規?杩???

function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
}

??Java?ㄥ??璋??規?涓??峰??js?芥?拌?????

@JavascriptInterface
public void onSumResult(int result) {
  Log.i(LOGTAG, "onSumResult result=" + result);
}

5????杞芥????ssets????H5?????瑕?????android_asset,??涓???assets锛?涓??跺??杞戒???

安卓混合開發——原生Java和H5互動，保證你一看就懂！

娉ㄦ???煎?

??????绔?锛? Android??H5涔??寸??浜や?

webView??h5浜や?

安卓混合開發——原生Java和H5互動，保證你一看就懂！

繼續閱讀

ERROR: Could not find com.android.support:design:25.4.0.

Could not find any version that matches com.android.support:appcompat-v7:XX

Yandex浏覽器 - 可以在手機上安裝chrome插件的浏覽器

Android下載下傳安裝Apk

中秋節公司發了這個（結尾分享紅包）

Android開發初體驗一、搭建工程二、開發初體驗三、應用的運作

安卓學習筆記（2）----LinearLayoutLinearLayout

安卓學習筆記（九）網絡程式設計網絡程式設計

安卓學習筆記（一） Activity篇

安卓學習筆記（十）服務Service服務（Service）

安卓學習筆記（3）------RelativeLayoutRelativeLayout參考文獻

貝殼找房FEED流曝光政策

android動态布局

Android ----------UI控件和布局

Android序列槽程式設計--開關燈Demo（附源碼）

Android記事本（附apk和源碼）