Android與H5互調

請注明出處http://blog.csdn.net/qq_23179075/article/details/65940411

298978.jpg

——現在主流的APP微信，微博，微商，QQ空間等大量的軟件都使用了內嵌H5頁面的開發方式,如果一個牛逼的公司都在用這些，這個時候我們就需要跟上他們的腳步了，了解Android如何跟H5交互。現在有些外包公司，也是直接采用Android內嵌H5模式開發，便于在IOS上直接復用頁面，最終解決成本，和提高開發效率。

本文主要通過下面幾個例子來講述如何使用Android與H5的互調

（要使用H5肯定要用到Android中的WebView組件，如何使用WebView請自行百度、Google）

1.Android代碼與Js代碼互調：

首先準備HTML文件（文件需要放在assets文件夾下）：
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        #content{
            color:#FF4567;
            font-size:40px;
        }
    </style>
    <script type="text/javascript">
    function javaCallJs(arg){
         document.getElementById("content").innerHTML =
             ("歡迎："+arg );
    }
    </script>
</head>
<body>
<div align="left" id="content"></div>
<div align="left">這是H5頁面</div>
<p><img width="240" height="320"
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490433744477&di=62977511a6e3e7d076629e2114005b0a&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F6f061d950a7b0208e95284e160d9f2d3572cc813.jpg">
</p>
<!--調用Android原生代碼:
    onclick = "window.+Android傳過來的對象名.+對象中的方法"
-->
<input type="button" value="點擊Android被調用" onclick="window.Android.showToast()"/>
</body>
</html>

1.1 Android中調用Js代碼：

我們這里使用一個登錄的例子(布局文件很簡單，這里就不上代碼了，直接看java代碼吧！)

JavaAndJsCall.java

public class JavaAndJsCall extends AppCompatActivity implements View.OnClickListener {
    private EditText etname;
    private EditText etpassword;
    private Button btnlogin;
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_java_and_js_call);
        initViews();
        initListener();
    }

    /**
     * 初始化界面
     */
    private void initViews() {
        this.btnlogin = (Button) findViewById(R.id.btn_login);
        this.etpassword = (EditText) findViewById(R.id.et_password);
        this.etname = (EditText) findViewById(R.id.et_name);
        //初始化WebView
        initWebView();
    }

    /**
     * 初始化監聽器
     */
    private void initListener() {
        btnlogin.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        login();
    }

    /**
     * 登錄
     */
    private void login() {
        String name = etname.getText().toString().trim();
        String password = etpassword.getText().toString().trim();
        if (TextUtils.isEmpty(name) || TextUtils.isEmpty(password)) {//輸入框判空
            Toast.makeText(this, "用戶或密碼不能為空!", Toast.LENGTH_SHORT).show();
        } else {
            loginSuccess(name);
        }
    }

    /**
     * 登錄成功后調用
     * @param name
     */
    private void loginSuccess(String name) {
       /**
         * 關鍵代碼：
         * 我們要調用H5頁面的Js代碼(其實就是調用JS中的方法)
         * 就是通過這種形式：javascript:Js文件中的方法名(參數) 
         * 下面的javaCallJs();必須是JS代碼中方法
         * 如果參數是變量,就使用拼接字符串方式傳參:如下↓↓↓
         */
        webView.loadUrl("javascript:javaCallJs('" + name + "')");
        //登錄成功后將H5頁面加載到本界面
        setContentView(webView);
    }
    @SuppressLint({"SetJavaScriptEnabled"})
    private void initWebView() {
        webView = new WebView(this);
        WebSettings settings = webView.getSettings();
        //設置支持javaScript腳步語言
        settings.setJavaScriptEnabled(true);
        //支持雙擊-前提是頁面要支持才顯示
        settings.setUseWideViewPort(true);
        //支持縮放按鈕-前提是頁面要支持才顯示
        settings.setBuiltInZoomControls(true);
        //設置客戶端-不跳轉到默認瀏覽器中
        webView.setWebViewClient(new WebViewClient());
        //加載網頁地址
        webView.loadUrl("file:///android_asset/index.html");
    }
}
上面代碼中需要使用到的本地Html頁面:(要加載本地HTML文件，文件需要放在assets文件夾下，然后通過webView.loadUrl("file:///android_asset/index.html");加載！)，注釋很詳細，其他的就直接看注釋吧！

運行效果：

AndroidCallJs.gif
上圖可以看到我登錄的用戶名通過Java代碼傳入到了H5頁面并且顯示出來!

1.2 H5頁面調用Android原生代碼:

Html頁面還是之前那個頁面,頁面中有這樣一句代碼:
<!--調用Android原生代碼:
    onclick = "window.+Android傳過來的對象名.+對象中的方法"
-->
<input type="button" value="點擊Android被調用" onclick="window.Android.showToast()"/>
在JS中要調用Android原生代碼,只需要在初始化WebView時加上下面的代碼:
        /**
         * Js中調用Android原生代碼核心代碼:
         * 該方法傳入兩個參數:1.被調用的類;2.JS中被調用類的實例對象名字
         * 對象名可以隨意取,但是必須和H5頁面中onclick的名字對應
         */
        webView.addJavascriptInterface(new AndroidAndJsInterface(), "Android");
然后創建被調用的類AndroidAndJsInterface;
    /**
     * Js中調用的類
     */
    private class AndroidAndJsInterface {
        /**
         * Js中調用的方法
         */
        @JavascriptInterface
        public void showToast() {
            Toast.makeText(JavaAndJsCall.this, "我是原生代碼!", Toast.LENGTH_SHORT).show();
        }
    }

注意了!注意了!注意了: 如果要讓類中的方法被JS調用需要在方法上加上注解: "@JavascriptInterface" 請仔細看上面代碼↑↑↑

(如果不想加注解,也可以把你的目標SDK設置為16 targetSdkVersion = 16,但是不推薦這樣使用)

完整代碼(三個點是省略代碼跟上面相同):

public class JavaAndJsCall extends AppCompatActivity implements View.OnClickListener {
    ...
    ...
    ...
    @SuppressLint({"AddJavascriptInterface", "SetJavaScriptEnabled"})
    private void initWebView() {
        ...
        ...
        ...
        /**
         * Js中調用Android原生代碼核心代碼:
         * 該方法傳入兩個參數:1.被調用的類;2.JS中被調用類的實例對象名字
         */
        webView.addJavascriptInterface(new AndroidAndJsInterface(), "Android");
        webView.loadUrl("file:///android_asset/index.html");
    }
    /**
     * Js中調用的類
     */
    private class AndroidAndJsInterface {
        /**
         * Js中調用的方法
         */
        @JavascriptInterface
        public void showToast() {
            Toast.makeText(JavaAndJsCall.this, "我是原生代碼!", Toast.LENGTH_SHORT).show();
        }
    }
}

運行效果:

JsCallAndroid.gif

2.下面看一個實例:通過H5頁面調用視頻播放器

H5頁面代碼:video.html
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        #playVideo{
            color:#FF4567;
            font-size:40px;
        }
    </style>
    <script>
        var play = function (){
            var videoId = "65411";
            var title = "神偷奶爸3預告片";
            var videoUrl = "http://vfx.mtime.cn/Video/2017/03/15/mp4/170315003647537910.mp4";
            javascript:android.playVideo(videoId,title,videoUrl);
        }
    </script>
</head>
<body>
<div align="center">這是H5頁面</div>
<!--調用Android原生代碼:
    onclick = "window.+Android傳過來的對象名.+對象中的方法"
-->
<input id="playVideo" type="button" value="點擊播放視頻" onclick="play()"/>
</body>
</html>
布局文件:activity_js_call_java_video.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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.androidandh5.JsCallJavaVideoActivity">
    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

java代碼:JsCallJavaVideoActivity.java

public class JsCallJavaVideoActivity extends AppCompatActivity {
    private WebView webview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_js_call_java_video);
        initViews();
    }
    @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
    private void initViews() {
        this.webview = (WebView) findViewById(R.id.web_view);
        WebSettings settings = this.webview.getSettings();
        settings.setJavaScriptEnabled(true);
        //設置客戶端-不跳轉到默認瀏覽器中
        this.webview.setWebViewClient(new WebViewClient());
        /**
         * Js中調用Android原生代碼核心代碼:
         * 該方法傳入兩個參數:1.被調用的類;2.JS中被調用類的實例對象名字
         */
        this.webview.addJavascriptInterface(new PlayVideoInterface(),"android");
        //加載本地H5頁面
        this.webview.loadUrl("file:///android_asset/video.html");
    }
    private class PlayVideoInterface {
        /**
         * 播放視頻
         * @param id 視頻ID
         * @param title 視頻標題
         * @param videoUrl 視頻url地址
         */
        @JavascriptInterface
        public void playVideo(int id,String title,String videoUrl){
            Intent intent = new Intent();
            intent.setDataAndType(Uri.parse(videoUrl),"video/*");
            startActivity(intent);
        }
    }
}

運行效果:

JsCallAndroidVideo.gif

起始原生Android中與H5互調 本質是：Java代碼和JavaScript的相互調!

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容