Android混合開發之WebView與Javascript互動

總李寫程式碼發表於2016-10-21
AndroidWebViewJavaScript

前言：

   最近公司的App為了加快開發效率選擇了一部分功能採用H5開發，從目前市面的大部分App來講，大致分成Native App、Web App、Hybrid App三種方式，個人覺得目前以Hybrid App居多，單純的資料展示我們直接採用WebView來渲染就可以了，但是有時候可能會用到兩者之間傳遞引數的情況，今天就來總結一下兩者之間如何互相呼叫。本篇主要介紹WebView與Javascript互動資料，關於如何將H5網頁呈現在WebView上可以參考這篇部落格：Android總結之WebView使用總結。

混合開發相關部落格：

WebView與Javascript互動：

   WebView與Javascript互動是雙向的資料傳遞，1.H5網頁的JS函式呼叫Native函式 2.Native函式呼叫JS函式，具體實現以下面例子為主：

1.）mainfest.xml中加入網路許可權

<uses-permission android:name="android.permission.INTERNET"/>

2.）WebView開啟支援JavaScript

  mWebView.getSettings().setJavaScriptEnabled(true);

3.）簡單的H5網頁實現，主要實現actionFromNative()、actionFromNativeWithParam(String str)，放在assets檔案下

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript">
    function actionFromNative(){
         document.getElementById("log_msg").innerHTML +=
             "<br\>Native呼叫了js函式";
    }

    function actionFromNativeWithParam(arg){
         document.getElementById("log_msg").innerHTML +=
             ("<br\>Native呼叫了js函式並傳遞引數："+arg);
    }

    </script>
</head>
<body>
<p>WebView與Javascript互動</p>
<div>
    <button onClick="window.wx.actionFromJs()">點選呼叫Native程式碼</button>
</div>
<br/>
<div>
    <button onClick="window.wx.actionFromJsWithParam('come from Js')">點選呼叫Native程式碼並傳遞引數</button>
</div>
<br/>
<div id="log_msg">呼叫列印資訊</div>
</body>
</html>

4.）Native實現與JS互動函式：actionFromJs()、actionFromJsWithParam()

public class MainActivity extends Activity {
    private WebView mWebView;
    private TextView logTextView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mWebView = (WebView) findViewById(R.id.webview);
        // 啟用javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 從assets目錄下面的載入html
        mWebView.loadUrl("file:///android_asset/wx.html");
        mWebView.addJavascriptInterface(this, "wx");
        logTextView = (TextView) findViewById(R.id.text);
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new Button.OnClickListener() {
            public void onClick(View v) {
                // 無引數呼叫
                mWebView.loadUrl("javascript:actionFromNative()");
                // 傳遞引數呼叫
                mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");
            }
        });

    }

    @android.webkit.JavascriptInterface
    public void actionFromJs() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "js呼叫了Native函式", Toast.LENGTH_SHORT).show();
                String text = logTextView.getText() + "\njs呼叫了Native函式";
                logTextView.setText(text);
            }
        });
    }

    @android.webkit.JavascriptInterface
    public void actionFromJsWithParam(final String str) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "js呼叫了Native函式傳遞引數：" + str, Toast.LENGTH_SHORT).show();
                String text = logTextView.getText() +  "\njs呼叫了Native函式傳遞引數：" + str;
                logTextView.setText(text);
            }
        });

    }
}

mWebView.addJavascriptInterface(this, "wx");相當於新增一個js回撥介面，然後給這個起一個別名，我這裡起的名字wx（微信哈哈）。@android.webkit.JavascriptInterface為了解決addJavascriptInterface漏洞的，在4.2以後才有的。

5.）佈局檔案實現

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

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <TextView android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Native呼叫js函式"/>

</LinearLayout>

6.）程式碼簡單解說

（1.）js（HTML）訪問Android（Java）端程式碼是通過jsObj物件實現的，呼叫jsObj物件中的函式，如： window.jsObj.actionFromJs()，這裡的jsObj就是Native中新增介面的別名

（2.）Android（Java）訪問js（HTML）端程式碼是通過loadUrl函式實現的，訪問格式如：mWebView.loadUrl("javascript:actionFromNative()");

demo執行截圖：

總結：

   這裡簡單的實現了Js與Native的互動，後期會抽空看下WebViewJavascriptBridge這個開源框架。

 

   

相關文章