Android关于JavaScript与Native方法相互调用

最新推荐文章于 2024-05-11 19:00:05 发布

原创

最新推荐文章于 2024-05-11 19:00:05 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Android

前段时间，阿里的去啊App 5.1.1发布了，这轮发布的热点就是Hybrid混合框架搞定了H5的“无缝秒出”。伴随着H5的发展，Native+HTML5的混合开发模式已经成为一种潮流，著名的框架比如FaceBook的React Native,AngularJS，最近微信发布的应用号也是为混合开发填了一把火。我最近研究了一下关于Native和HTML混合开发的一些基础知识，特发文于一文，与大家分享一下成果。

首先是在布局文件建WebView，并在Activity中获取实例，不赘述。以下为MainActivity代码：

public class MainActivity extends Activity {

    private WebView webView;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //加载页面
        webView = (WebView) findViewById(R.id.webview);
        //允许JavaScript执行
        webView.getSettings().setJavaScriptEnabled(true);
        // 添加一个对象, 让JS可以访问该对象的方法, 该对象中可以调用JS中的方法
        webView.addJavascriptInterface(new Contact(this, webView), "contact");
        webView.getSettings().setDomStorageEnabled(true);// H5页面，开启Dom缓存
        webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        //从网络加载HTML
        webView.loadUrl("http://192.168.4.252:8080/JS_NativeDemo/index.html");
        //加载本地HTML
//        webView.loadUrl("file:///android_asset/index.html");
    }

}

这段代码的作用主要是为webView对象允许JavaScript的执行，并将自己的脚本对象传递给webView，contact对象的具体作用可查看index.html源码中的调用过程。

注意此处是使用web的html界面，需要添加网络请求的相关权限：

<uses-permission android :name=