Maison interface Web tutoriel HTML Android Native App与WebView交互技巧_html/css_WEB-ITnose

Android Native App与WebView交互技巧_html/css_WEB-ITnose

Jun 21, 2016 am 08:46 AM

这次项目中有一个主页面完全是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");
Copier après la connexion

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());        }    }
Copier après la connexion

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) {            //获取标题        }    }
Copier après la connexion

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

资源:Example下载

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Mar 12, 2025 pm 04:05 PM

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

See all articles