Android Native App与WebView交互技巧

这次项目中有一个主页面�完全是H5的页面,要求H5调用Native,js交互传值,看起来貌似很简单,网上教程一大堆,但是在实际开发过程中还是遇到很多问题,在这里记录一下。

  1. 首先,设置user agent,使前端可区分请求来自APP ,这里我设置的是"android_app/1.0.0",名称加版本号,具体设置什么大家可随意。
WebSettings settings = webView.getSettings();
String ua = settings.getUserAgentString();
settings.setUserAgentString(ua + "; android_app/1.0.0");

2.H5页面的登录,因为我们的应用不需要登录也能浏览,H5的页面有些也是不需要登陆的,所以点击H5页面需要登录的地方,要跳转到Native的页面登录,登录成功刷新H5页面,设置cookie,使WebView页面保持登录状态,具体代码如下:
注:WebSettings的一些设置一定要放到设置cookie前面执行。
设置cookie要注意作用域的问题,以及setCookie的时候最好分步设置,大家可以看下面的代码,我setCookie()了四次,不要把所有字符串拼接起来再一次setCookie,一次setCookie可能只会设置成功第一个分号前的cookie值。


public void synCookies(Context context, String host, String cookies) {
        try {

            CookieSyncManager.createInstance(context);
            CookieManager cookieManager = CookieManager.getInstance();
            // 5.0以上版本的webview做了较大的改动,如:同步cookie的操作已经可以自动同步、但前提是我们必须开启第三方cookie的支持。
            // cookieManager.setAcceptThirdPartyCookies(webView, true);//5.0以下的手机崩溃
            cookieManager.setAcceptCookie(true);
            cookieManager.removeSessionCookie();//移除
            cookieManager.removeAllCookie();

            //base64加密
//            String base64Cookies = Base64Utils.encodeStr(getCookies());
            //根据RFC822规定,BASE64Encoder编码每76个字符,还需要加上一个回车换行。
            //使用 commons-codec-1.10.jar 不会换行而且效率更高
            //这里我使用的是sun.misc.BASE64Decoder.jar,每76个字符会换行,所以下面去掉换行,为什么不用上面的呢,使用commons-codec-1.10.jar,Android Studio编译提示方法重复,没找到解决办法。
//            base64Cookies = base64Cookies.replace("\n", "");

//            Log.i("base64Cookies:", base64Cookies);
            Calendar calendar = Calendar.getInstance();
            calendar.add(Calendar.DAY_OF_MONTH, 7);
            String expiresTime = calendar.getTime().toGMTString();
            Log.i("expiresTime =", expiresTime);


            //分开设置,不然只会设置第一个分号之前的cookie
//            cookieManager.setCookie(host, "Token=" + base64Cookies);
            //不加密
            cookieManager.setCookie(host, "Token=" + cookies);
            //注意host的值,类似于这个网址:http://www.jianshu.com/writer#/notebooks/2498434/notes/4304102/preview,host可以取:www.jianshu.com或者.jianshu.com,注意作用域,不要把整个url都放上了。
            cookieManager.setCookie(host, "Domain=" + host);
            cookieManager.setCookie(host, "Path=/");

            // Expires变量是一个只写变量,它确定了Cookie有效终止日期。该属性值DATE必须以特定的格式来书写:
            // 星期几,DD-MM-YY HH:MM:SS GMT,GMT表示这是格林尼治时间。反之,不以这样的格式来书写,系统将无法识别。
            // 该变量可省,如果缺省时,则Cookie的属性值不会保存在用户的硬盘中,而仅仅保存在内存当中,Cookie文件将随着浏览器的关闭而自动消失。
            cookieManager.setCookie(host, "Expires=" + expiresTime);

            CookieSyncManager.getInstance().sync();
            String newCookie = cookieManager.getCookie(host);

            if (newCookie != null) {
                Log.i("getCookie:", newCookie);
            }
           

        } catch (Exception e) {
            Log.e("failedCookie=%s", e.toString());
        }

    }

3.自定义scheme、js交互传值、调用js方法及document对象

例如:登录scheme为 �goto://just/loginref=http://www.baidu.com&callback=loginWeb

  webView.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                //1.登录scheme    url = �goto://just/login?callback=loginWeb

                if (url.startsWith("goto://just/login")) {
                    //登录,跳转到native得LoginActivity

                    //成功后在onActivityResult()方法中执行js的回调方法loginWeb传toekn值给H5

                    return true;

                    //2.跳转新activity scheme    url = �goto://just/newweb?ref=http://www.baidu.com
                } else if (url.startsWith("goto://just/newweb")) {

                    //页面加载不在本页webview加载,而是新打开此MainActivity(标准模式,为了循环复用)
                    String ref = "http://www.baidu.com";
                    Intent intent = new Intent(MainActivity.this, MainActivity.class);
                    intent.putExtra("webUrl", ref);
                    startActivity(intent);


                    return true;

                }

                return super.shouldOverrideUrlLoading(view, url);
            }

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                //页面错误
                llError.setVisibility(View.VISIBLE);
            }

            public void onPageFinished(WebView view, String url) {


                Log.d("WebView", "onPageFinished ");
                //获取整个页面的Html
                view.loadUrl("javascript:window.weixinObj.getHtml('<head>'+" +
                        "document.getElementsByTagName('html')[0].innerHTML+'</head>');");
                //通过document.title 获取页面的title
                view.loadUrl("javascript:window.weixinObj.getTitle(document.title)");


                //此方法也可以通过document.title 获取标题,但是需要Api19才能使用
//                view.evaluateJavascript("document.title", new ValueCallback<String>() {
//                    @Override
//                    public void onReceiveValue(String title) {
//
//                    }
//                });


                super.onPageFinished(view, url);
            }

        });

 @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        //登录页返回后执行

        String callback = "loginWeb";

        synCookies(this, host, cookies);

        webView.loadUrl("javascript:" + callback + "('" + cookies + "')");
        webView.reload();
    }


 private class InterfaceObject {

        @JavascriptInterface
        public void getHtml(String html) {
            //获取html的内容

        }

        @JavascriptInterface
        public void getTitle(String title) {
            //获取标题

        }


    }

4.以上是我在项目中使用到的一些交互,经过测试是可用的,其实上面写的这些网上有很多,但是比较分散,我就自己总结了一下,例子无法运行的(没有调试,可能有些逻辑错误),因为没有网页测试,如果使用本地html的也不好模拟网络上环境,所以只写了一些逻辑,需要大家自行写h5测试。

资源:Example下载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容