android混合開發，webview的java與js互操作

android原生應用，用webview加載應用中的網頁，並且java代碼與js代碼可以互相操作。

這是混合開發的基石，最基本也最重要的東西，實驗代碼在這里。

概括說說——

java調js：調用webView.load("javascript:someFunction()");

這樣可以調用webView里頁面上的全局方法。這不是什么新鮮東西，你在網頁中也可以這么做，試試在瀏覽器地址欄輸入javascript:alert("427studio");也可以在瀏覽器地址欄里調用全局方法。

js調java：調用webView.addJavascriptInterface(somePOJO, "varName");

讓一個java對象成為webview里面網頁的window對象的varName屬性，就好像執行了window.varName = somePOJO一樣，因為window是全局上下文，js即可以用訪問全局變量的方式訪問這個java對象了，然后調用這個對象的函數即可，如果somePOJO這個對象有個public void doIt()方法，則可以這樣調用它：someButton.onclick=function(){varName.doIt();}

具體的代碼：看這里和這里，都非常基本，簡要列出如下：

1.activity，調js方法那里手癢癢抽了個方法，圖簡單直接拼"javascript:jsDoIt('" + xx + "');"也沒啥。

對了，loadUrl時，加載安卓程序assets包里的資源，以file:///android_asset/開頭，如file:///android_asset/index.html表示要加載assets包里的index.html文件。

package com.example.testhybrid;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.Fragment;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

public class MainActivity extends Activity {

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

        if (savedInstanceState == null) {
            getFragmentManager().beginTransaction()
                    .add(R.id.container, new PlaceholderFragment())
                    .commit();
        }
    }
}

class PlaceholderFragment extends Fragment {

    WebView webView;
    
    public PlaceholderFragment() {
    }

    @SuppressLint("SetJavaScriptEnabled") @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);
        
        webView = (WebView)rootView.findViewById(R.id.webView1);

        webView.getSettings().setJavaScriptEnabled(true);
        
        Handler handler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                String str = msg.getData().getString("str");
                doJs("jsDoIt", str.replaceAll("\\d", ""));
            }
        };
        webView.addJavascriptInterface(new MyJavascriptInterface(webView, handler), "javaObject");
        
        webView.loadUrl("file:///android_asset/webviews/index.html");
        
        return rootView;
    }
    
    //調用js方法，第一個參數是js方法名，后面的參數是js方法的參數列表
    void doJs(String function, Object... params){
        StringBuilder result = new StringBuilder();
        result.append("javascript:").append(function).append("(");
        for(int i = 0; i < params.length; i++){
            result.append("'").append(params[i].toString()).append("'");
            if(i < params.length - 1){
                result.append(",");
            }
        }
        result.append(")");
        String jsStr = result.toString();
        webView.loadUrl(jsStr);
    }
}

//要用來被js調用的java對象
class MyJavascriptInterface{
    
    MyJavascriptInterface(WebView wv, Handler h){
        this.theWebView = wv;
        this.handler = h;
    }
    
    WebView theWebView;
    Handler handler;
    
    //要用來被js調用的java方法
    @JavascriptInterface
    public void javaDoIt(final String str){
        Message msg = new Message();
        Bundle bundle = new Bundle();
        bundle.putString("str", str);
        msg.setData(bundle);
        handler.sendMessage(msg);
    }

}

網頁結構不贅，javascript代碼：

//html按鈕點擊觸發
function theBtnOnClicked(){
    //調用java方法
    javaObject.javaDoIt("427studio");
}

//要用來被java程序調用的js方法
function jsDoIt(str){
    document.getElementById('theBtn').innerText += str;
}

長期歡迎項目合作機會介紹，項目收入10%用於酬謝介紹人。新浪微博： @冷鏡，QQ： 908789432。