Androidハイブリッド開発のWebViewとJavascriptはインタラクティブです.

14024 ワード

前言:
最近会社のAppは開発効率を速めるために一部の機能を採用してH 5開発しました.現在の市場の大部分のAppから言えば、Native App、Web App、Hyrid Appの3つの方式に大別しています.しかし、時には両者の間でパラメータを伝える場合があります.今日は両者の間でどうやって相互に呼応するかをまとめます.この記事は主にWebViewとJavascriptのインタラクティブデータを紹介します.H 5ページをWebViewにどうやって表示するかについては、このブログを参照してください.
ハイブリッド関連ブログ:

Androidハイブリッド開発のWebView使用総括

Androidハイブリッド開発のWebViewとJavascriptの対話

WebViewとJavascriptの対話:
WebViewとJavascriptの相互作用は双方向のデータ伝達であり、1.H 5ページのJS関数はNative関数2.Native関数を呼び出してJS関数を呼び出す.具体的な実現は以下の例を主とする.
1.manfest.xmlにネットワーク権限を追加する

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

2.WebViewオープンサポートJavaScript

  mWebView.getSettings().setJavaScriptEnabled(true);

3.簡単なH 5ページを実現し、主にactionFroom Native()、actionFroom NativeWithParam(String str)を実現し、asetsファイルの下に置く.

<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相互作用関数:actionFroomJs()、actionFroomJs WithParam()

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() + "
js   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() +  "
js   Native      ：" + str;
                logTextView.setText(text);
            }
        });

    }
}

mWebView.addJavascript Interface(this、「wx」)jsフィードバックインターフェースを追加して、これに別名をつけてください.ここからつけた名前はwxです.android.webkit.Javascript InterfaceはaddJavascript Interfaceの脆弱性を解決するために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.actionFroomJs()ここのjsObjはNativeにインターフェースを追加する別名です.
(2)Android(Java)アクセスjs(HTML)エンドコードはloadUrl関数によって実現され、アクセスフォーマットは:mWebView.loadUrl(「javascript:actionFroom Native()」);
デモ運行のスクリーンショット:
まとめ:
ここではJsとNativeの相互作用を簡単に実現しました.後期は時間を割いてWebView JavascriptBridgeというオープンソースフレームを見ます.

javascript関数functionの前の1元のオペレータ、感嘆符、小さい括弧、1元のオペレータ!()+-12464;124