Android 和 H5 交互 - 基础篇

阅读 6131
收藏 565
2016-12-07
原文链接:www.jianshu.com
hybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的?

1、webView加载页面

我们都知道在Android中是通过webView来加载html页面的,根据HTML文件所在的位置不同写法也不同:

//例如:加载assets文件夹下的test.html页面
mWebView.loadUrl("file:///android_asset/test.html")
//例如:加载网页
mWebView.loadUrl("http://www.baidu.com")

如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时,页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话,那么就得设置setWebViewClient:

mWebView.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
                mWebView.loadUrl(url);
                return true;
            }
        }
    });
2、Android本地通过Java调用HTML页面中的JavaScript方法

想要调用js方法那么就必须让webView支持

    WebSettings webSettings = mWebView.getSettings();
    //设置为可调用js方法
    webSettings.setJavaScriptEnabled(true);

若调用的js方法没有返回值,则直接可以调用mWebView.loadUrl("javascript:do()");其中do是js中的方法;若有返回值时我们可以调用mWebView.evaluateJavascript()方法:

 mWebView.evaluateJavascript("sum(1,2)", new ValueCallback() {
        @Override
        public void onReceiveValue(String value) {
            Log.e(TAG, "onReceiveValue value=" + value);
        }
    });

js代码如下:


2、js调用Android本地Java方法

在Android4.2以上可以直接使用@JavascriptInterface注解来声明,下面是在一个本地Java方法

 public class JsInteration {
    @JavascriptInterface
    public String back() {
        return "hello world";
    }
}

定义完这个方法后再调用mWebView.addJavascriptInterface()方法:

 mWebView.addJavascriptInterface(new JsInteration(), "android");

那么在js中怎么来调用呢?


4、拦截HTML页面中的点击事件
mWebView.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            //判断url拦截事件
            if (url.equals("file:///android_asset/test2.html")) {
                Log.e(TAG, "shouldOverrideUrlLoading: " + url);
                startActivity(new Intent(MainActivity.this,Main2Activity.class));
                return true;
            } else {
                mWebView.loadUrl(url);
                return false;
            }
        }
    });
以上就是Java调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码:
mainActivity
public class MainActivity extends AppCompatActivity {
public static final String TAG = "MainActivity";
private WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mWebView = (WebView) findViewById(R.id.webView);
    mWebView.loadUrl("file:///android_asset/test.html");
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    mWebView.addJavascriptInterface(new JsInteration(), "android");
    mWebView.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if (url.equals("file:///android_asset/test2.html")) {
                Log.e(TAG, "shouldOverrideUrlLoading: " + url);
                startActivity(new Intent(MainActivity.this,Main2Activity.class));
                return true;
            } else {
                mWebView.loadUrl(url);
                return false;
            }
        }
    });
}
//Android调用有返回值js方法
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View v) {

    mWebView.evaluateJavascript("sum(1,2)", new ValueCallback() {
        @Override
        public void onReceiveValue(String value) {
            Log.e(TAG, "onReceiveValue value=" + value);
        }
    });
}
public class JsInteration {

    @JavascriptInterface
    public String back() {
        return "hello world";
    }
}
}
test.html








点击

评论