自定義android混合框架開發實踐1：實現基礎andorid和webview交互

1. 本地web資源

1.構建assets/web文件夾
2.建立index.html

你的html代碼

3.使用本地web資源

WebView mv = findViewById(...);
mv.loadUrl("file:///android_asset/web/index.html")

2.實現基礎的android和js交互

(1). 實現js調用andorid方法

1. 在Acitivity內構建一個function

@JavascriptInterface
public void test(){
    Log.e("測試","====");
}

@JavascriptInterface 在新版本的api內必須 不然無效果

1. 將android對象轉js對象供js調用

WebView mv = findViewById(...);
mv.addJavascriptInterface(this,"activity")
mv.loadUrl("file:///android_asset/web/index.html")

1. js調用

window.activity.test()

(2). android 調用 js方法

WebView mv = findViewById(...);
mv.getSettings().setJavaScriptEnabled(true);
mv.loadUrl("javascript:alert('test')");

(3). js傳參回調函數給android觸發

1. 注入一個js對象，存儲回調函數

js對象

var callbacks = {
    fns:[],
    add(fn){this.fns.push(fn);return this.fns.length-1;},
    get(id){return this.fns[id];}
}

注入方式

WebView vc = findViewById(...);
vc.getSettings().setJavaScriptEnabled(true);
vc.setWebViewClient(new WebViewClient(){
    @Override
    public void onPageFinished(WebView view, String url)
    {
        super.onPageFinished(view, url);
        vc.loadUrl("javascript:js代碼");
    }
});

1. android 回調方法

@JavascriptInterface
    public void callback(String msg,int callback_id){
        mHandler.post(new Runnable() {
            @Override
            public void run() {
                WebView vc = findViewById(...);
                vc.getSettings().setJavaScriptEnabled(true);
                vc.loadUrl("javascript:callbacks.get("+callback_id+")('"+msg+"')");
            }
        });
    }

1. js端調用

var callback_id = callbacks.add(function(msg){
    alert(msg)
});
window.activity.callback("測試",callback_id)

基礎交互就是這樣了