WebView基本演绎法(2)

63 阅读2分钟

Android里面有好多界面是直接内嵌h5页面,这时有好多地方需要注意:

  • 提示框使用Android项目的提示框以保持一致性
  • 页面加载时的加载提示
  • 文件的上传
  • 图片的拍照和选取
  • 发送短信和拨打电话
  • 返回按钮的点击监听
  • 与js的相互使用

布局中添加WebView

    <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scrollbarSize="0dip"
        android:scrollbarStyle="outsideOverlay" >
    </WebView>

基本设置

对没有特殊要求的WebView都要有下面的基本设置:

web.getSettings().setSupportZoom(true);//允许缩放
        web.getSettings().setBuiltInZoomControls(true);// 显示放大缩小 controler
        web.getSettings().setJavaScriptEnabled(true);//语序WebView执行JS
        web.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);//隐藏滚动条
        web.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);//不使用缓存,只用网络加载

加载url

web.loadUrl(/** url地址 **/);

使用Android项目自己的提示框

web.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onReceivedTitle(WebView view, String title) {
            }

            @Override
            public boolean onJsAlert(WebView view, String url,
                    String message, JsResult result) {
                //在这里调用自定义的提示框,message为提示内容
                result.cancel();
                return true;
            }

            @Override
            public boolean onJsConfirm(WebView view, String url,
                    String message, JsResult result) {
                return true;
            }
        });

页面开始加载

web.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                if (url == null || url.length() == 0) {

                } else {

                ※※※※※※※※※※※※※※※※
            /** 处理url,上传文件,图片处理等,通过获取到用户点击的url来判断  **/
            return true;
                }
                // 顺带提一点,WebView的设置WebviewClient时,在shouldoverrideurlloading中只对要拦截处理的url返回true,否则一定要返回false ,这样就能避免重定向问题。
                return false;
            }

            @Override
            public void onPageStarted(WebView view, String url,
                    Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                /** 在这里进行加载开始提示 **/
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                // TODO Auto-generated method stub
                super.onPageFinished(view, url);
                /** 在这里进行加载完成提示 **/
            }
        });
    }

处理用户点击操作

在h5中对一个按钮的点击就是打开一个url地址,是普遍的使用方法。Android中就可以根据截取到的url进行app的操作:
这里有大神提供的一个很好的公共实用方法:

/**
     * 封装链接上的键值对并保存到hashmap
     * 
     * @param url
     * @return HashMap<key,value>
     */
    public static HashMap<String, String> handleUrlParams(String url) {
        HashMap<String, String> hm = new HashMap<String, String>();
        if (url.contains("?") && url.indexOf("?") != url.length() - 1) {
            String params = url.substring(url.indexOf("?") + 1);
            if (params.contains("&")) {
                String[] paramArr = params.split("&");
                for (int i = 0; i < paramArr.length; i++) {
                    String str = paramArr[i];
                    if ((str.split("=")).length > 1) {
                        try {
                            hm.put(str.split("=")[0], URLDecoder.decode(str.split("=")[1], "UTF-8"));
                        } catch (UnsupportedEncodingException e) {
                            DebugHelper.writeLog(e);
                        }
                    }
                }
            } else {
                if (params.contains("=")) {
                    try {
                        hm.put(params.split("=")[0], URLDecoder.decode(params.split("=")[1], "UTF-8"));
                    } catch (UnsupportedEncodingException e) {
                        DebugHelper.writeLog(e);
                    }
                }
            }
        }
        return hm;
    }

然后在上面代码的※※※※※※※※※※※※※※※※中进行操作:

private void handleProtocolUrl(WebView view, String url) {
        HashMap<String, String> hm = handleUrlParams(url);
        Intent intent = null;
        if (url.startsWith(/** 返回的链接 **/)) {//返回按钮点击
            this.finish();
        } else if (url.startsWith(/** 打电话的链接 **/)) {//
            intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"+ hm.get("mobile")));  
        } else if (url.startsWith(/**照片处理的链接 **/)) {
            /** 图片选取或拍照 **/
        } else if (url.startsWith( /** 发送短信的链接 **/)) {
            Uri uri = Uri.parse("smsto:" + hm.get("mobile"));
            intent = new Intent(Intent.ACTION_VIEW, uri);
            intent.putExtra("sms_body", hm.get("msg"));
        } else {
            view.loadUrl(url);
        }
        if (intent !=null) {
            startActivity(intent);
        }
    }

这些链接都是根据h5页面的具体链接写的。

对返回监听的处理

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && web.canGoBack()) {
            // 如果可以回退
            web.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }