Native与html5交互

前言

目前主流的移动端开发是混合开发Hybrid
- 什么是HybridAPP？

它指的是半原半Web的混合类App，需要下载安装，看上去类似Native App，但只有很少的UI Web View，它极力打造类似原生的App。

Hybrid App简单的说就是一个WebView+HTML

学习目标

学习Native和html5交互，我们要学两点：
1. 怎么把一个html5界面当作控件一样显示在界面中。
2. 怎么和html5进行数据交互。

开始学习

首先解一下Android与HTML的交互

两种情况：

Android调用HTMl代码（Android调用HTML的脚本语言javascript）；
HTML调用Android；

Android调用HTML代码，无非是用到webView，其中注意webView加载html文件的加载url地址填写：

以下是加载html的几种情况。
打开本包内asset目录下的index.html文件

webView.loadUrl("file:///android_asset/index.html");

打开本地sd卡内的index.html文件

webView.loadUrl("content://com.android.htmlfileprovider/sdcard/index.html")

打开指定URL的html文件

webView.loadUrl("http://www.baidu.com")

互相调用具体的内容步骤如下：

1、设置允许执行JS脚本：

getSettings().setJavaScriptEnabled(true);

2、添加通信接口
第一个参数就是我们需要自己建的一个类，里面添加一些方法，第二个参数是我们在html中需要调用Android中方法的名字

webView.addJavascriptInterface(Interface,"InterfaceName")

3、JS调用Android

InterfaceName.MethodName

4、Android调用JS

webView.loadUrl("javascript:functionName("这里可以添加参数拼接")")

上代码具体实践操作

WebSettings settings = mWebView_ware_detal.getSettings();
        settings.setJavaScriptEnabled(true);
        //这个参数要改为false，不然加载图文的时候会发生阻塞的
        settings.setBlockNetworkImage(false);
        //允许有缓存，可以查询api文档了解里面的参数
        settings.setAppCacheEnabled(true);
        mWebView_ware_detal.loadUrl("http://内容自己填写.html");
        webappinterface = new WebAppInterface(this);
        //appInterface这里一定要和前端人员保持一致，这个是一个规范，协商一份文档和接口
        mWebView_ware_detal.addJavascriptInterface(webappinterface, "appInterface");
        //设置监听
        mWebView_ware_detal.setWebViewClient(new WC());

     /**
     * **一个Android和html通讯的接口**
     */
    class WebAppInterface {
        private Context context;

        public WebAppInterface(Context context) {
            this.context = context;
        }

        //javascript调用Android本地的方法还有很多很多需要我们去理解,
        //比如调用我们手机的相机，调用本地相册，打电话，位置信息，存储数据等等

        /**
         *    javascript调用本地的
         */
        @JavascriptInterface
        public void buy(long id) {
            Toast.makeText(context, "选择购买商品", Toast.LENGTH_LONG).show();
        }

        /**
         *    javascript调用本地的
         */
        @JavascriptInterface
        public void addFavorites(long id) {
            Toast.makeText(context, "添加喜爱", Toast.LENGTH_LONG).show();
        }

        /**
         * Android调用javascript代码要在主线程里面
         */
        @JavascriptInterface
        private void showDetail() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    mWebView_ware_detal.loadUrl("javascript:showDetail(" + ware.getId() + ")");
                }
            });
        }
    }
    /**
     *设置监听器
     * 监听器监听页面加载完，使用Android调用javascript中的方法
     * ,要注意的是一定要先刷新完页面在调用javascript的方法传递数据
     */
    class WC extends WebViewClient {
        //WebViewClient
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            return super.shouldOverrideUrlLoading(view, request);
            //可以根据协议进行判断执行某些事件,
            //if (request.equals("gang://"))
        }

        //页面加载完触发的方法，进行界面的时候有一个load效果
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            if (mDialog != null && mDialog.isShowing()) {
                mDialog.cancel();
                webappinterface.showDetail();
            }

        }
    }