Android WebView:私はJavaScriptとどうやって打ち合わせましたか?

9947 ワード

今React Nativeはもう一年以上も燃えています.今はまだWebViewとJavaScriptのようなものがありますか?ははは、物事はいつも順を追って漸進して、その上今これはまだ主流の処理の方案でしょう、みんなはやはり理解する必要があって、文章はとても基礎、達人は軽く噴きます.
デモ
動図鎮楼、デモンストレーションの機能点の順序は:5-1-3-4
機能点動画のデモ
私たちが必要なHTMLページはどうやって作成しますか?
WebViewとJavaScriptの相互作用のスキルをゲットした時、この問題に対してめちゃくちゃに迫られました.彼のお母さんの私はフロントエンドではありません.すぐに自分の欲しいHTMLページを書くべきです.妾は本当にできません.
w 3 schoolは何ですか?
何ですか?どうして注文しないで入ってみますか?
私たちが必要なHTMLページ
w 3 schoolの簡単な教程によって、私達は私達の必要なページをかき集めることができます.
私たちが必要なHTMLページ
私たちが実現したい5つの機能

Android Native端末は、HTMLのjavascriptスクリプト

を呼び出します.

Android Native端末は、HTMLのjavascriptスクリプトを呼び出し、パラメータ

を伝達する.

HTMLのjavascriptスクリプトはAndroid Native端の関数

を呼び出します.

HTMLのjavascriptスクリプトはAndroid Native端の関数を呼び出し、パラメータ

を伝達する.

HTMLのjavascriptスクリプトとAndroid NativeのJavaコードの完全なインタラクションフロー

Android NativeからHTMLのjsスクリプトを呼び出します.
この例ではAndroid Native端のjavaコードはHTMLページのjsスクリプトを直接呼び出し、HTMLページのsubtitleを変更する機能を実現します.Android Nativeのコードは以下の通りです.

 mCallJsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("Native  WebView   JS  ");
            mWebView.loadUrl("javascript:changeDemoSubtitle()");
        }
    });

HTML対応のjs方法は:

function changeDemoSubtitle(){
document.getElementById("subtitle").innerHTML="     ";

)
Android NativeからHTMLのjsスクリプトを呼び出してパラメータを転送します.
Android Nativeのコードは以下の通りです.

mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("   ：" + showDevInfo());
            showDevInfoToH5();
        }
    });
    private String showDevInfo() {
    return "showDevInfo('    :" + android.os.Build.MODEL +
            ",SDK  :" + android.os.Build.VERSION.SDK +
            ",    :" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
    mWebView.loadUrl("javascript:" + showDevInfo());
}

HTML対応のjs方法は:

function showDevInfo(info){
document.getElementById("subtitle").innerHTML=info;

)
HTMLのjavascriptスクリプトはAndroid Native端の関数を呼び出します.
HTML対応のjs方法は:

function disp_confirm(){
    confirm();
}

Android Nativeのコードは以下の通りです.

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
            }
            result.confirm();
            return true;
        }
    });

HTMLのjavascriptスクリプトはAndroid Native端の関数を呼び出してパラメータを伝えます.
HTML対応のjs方法は:

function disp_confirm_with_args(message){
    confirm(message);
    }

Android Nativeのコードは以下の通りです.

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            Toast.makeText(MainActivity2.this, "Android_Native_Toast!      message：" + message, Toast.LENGTH_SHORT).show();
            }
            result.confirm();
            return true;
        }
    });

HTMLのjavascriptスクリプトとAndroid NativeエンドのJavaコードの完全なインタラクションの流れ
HTML対応のjs方法は:

function disp_confirm_with_args(message){
    confirm(message);
    }

Android Nativeのコードは以下の通りです.

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            if ("getDevInfo".equals(message)) {
                showDevInfoToH5();
            } 
            }
            result.confirm();
            return true;
        }
    });
    private String showDevInfo() {
    return "showDevInfo('    :" + android.os.Build.MODEL +
            ",SDK  :" + android.os.Build.VERSION.SDK +
            ",    :" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
    mWebView.loadUrl("javascript:" + showDevInfo());
}

Android Nativeエンドコードの完全な展示:
Activityコード:

package cn.mtalks.jsbridgedemo;
import android.app.Activity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity2 extends Activity {

private WebView mWebView;
private Button mCallJsBtn;
private Button mCallJsWithArgsBtn;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_2);
    initView();
    initWebView();
}

private void initView() {
    mWebView = (WebView) findViewById(R.id.webview);
    mCallJsBtn = (Button) findViewById(R.id.call_js_without_args_btn);
    mCallJsWithArgsBtn = (Button) findViewById(R.id.call_js_with_args_btn);

    mCallJsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("Native  WebView   JS  ");
            mWebView.loadUrl("javascript:changeDemoSubtitle()");
        }
    });

    mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("   ：" + showDevInfo());
            showDevInfoToH5();
        }
    });
}

private void initWebView() {
    //  JavaScript  
    mWebView.getSettings().setJavaScriptEnabled(true);
    //    html
    mWebView.loadUrl("file:///android_asset/JsDemo.html");

    mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            if ("getDevInfo".equals(message)) {
                showDevInfoToH5();
            } else if (TextUtils.isEmpty(message)) {
                Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(MainActivity2.this, "Android_Native_Toast!      message：" + message, Toast.LENGTH_SHORT).show();
            }
            //    H5         ，          
            result.confirm();
            //  true，     H5   confirm  。
            return true;
        }
    });
}

private String showDevInfo() {
    return "showDevInfo('    :" + android.os.Build.MODEL +
            ",SDK  :" + android.os.Build.VERSION.SDK +
            ",    :" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
        mWebView.loadUrl("javascript:" + showDevInfo());
    }
}

XMLコード

AndroidManifest 文件

友情のヒント
実はJavaScriptでJavaローカルメソッドを呼び出して、Googleの公式の実現方法はJavascript Interface方式を使うべきです.しかし、この方式はAndroid 4.2バージョンの前にセキュリティ・ホールがあり、興味を持ってここを見てください.Android 4.2バージョンの後に@Javascript Interfaceの注釈を入れて解決しました.Androidバージョンの破片化が深刻であることを考慮して、Javascript Interfaceを使うのは適していません.これも前の文章で効率の比較に入れていない原因です.
以上は完全なWebViewとJavaScriptの相互作用の例です.前の記事で紹介したShuldIntercept Request方式を自分で試してこの例を実現してみてください.
次の予告
Webviewページは最適化を展示しています.HTMLページの自分の最適化を除いて、Android Native端でロード速度のために何か最適化ができますか?次の文章は答えをあげます.例えば、公共Js方法の抽出は地元、JS、CSS、画像資源のプリロードなどです.

JavaScriptモジュール化開発——AMD仕様