自定义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)

基础交互就是这样了