webview和h5的交互

原创 2016年08月31日 11:41:28
现在APP中经常会发现很多很多的H5页面,所以webview与js的交互显得非常重要:
一.理论:
     在交互这块我们会涉及到两个场景:一种是h5直接调用原生的,这个时候在原生这边登录成功后,我们会执行一段协商好的js代码,callback传递一些参数返回给h5;另外一种是原生登录成功后,服务端会返回给我们cookie,并利用框架的属性把这个cookie进行持久化,这样下次请求的时候则自带用户cookie,在请求url的时候我们在链接中拼接uid和token。
二.实例:
   1. android中的java代码调用webview里面的js脚本:
          要点:只需调用webview的loadUrl方法即可

- // 启用javascript
- contentWebView.getSettings().setJavaScriptEnabled(true);
- // 从assets目录下面的加载htmlb
- contentWebView.loadUrl("file:///android_asset/wst.html");
-
-               // 无参数调用
-        contentWebView.loadUrl("javascript:javacalljs()");
     
     2.webview中的js脚本调用本地的java代码:
要点:先对webview绑定javascriptInterface,js脚本通过这个接口来调用java代码,javainterface实际就是一个普通的java类,里面是我们本地的java代码,
           将object传递给webview,并指定别名,这样js脚本就可以通过我们给的这个别名来调用我们的方法,在上面的代码中,this是一个实例化的对象,wst是这个对象在js中的别名。

          - contentWebView.addJavascriptInterface(this, "wst");
       
     3.java代码调用JS并传递参数:
               要点:只需在待用js函数的时候加入参数即可,在传递一个参数的时候,需注意的是str类型在传递的时候参数要用单引号括起来
               
          mWebView.loadUrl("javascript:test('" + aa+ "')"); //aa是js的函数test()的参数
         
     4.JS调用java并传递参数:
               要点:java函数正常书写,在js脚本中调用的时候需要参数统一

          - <div id='b'><a onclick="window.wst.clickOnAndroid(2)">b.c</a></div>

其中值得注意的是各个参数均需要相互对应,这个例子的协议是:window.wst.clickOnAndroid(....),如果在代码中实现了clickOnAndroid(...)方法
看下例子:
        WebViewActivity.class  
      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            contentWebView = (WebView) findViewById(R.id.webview);
            msgView = (TextView) findViewById(R.id.msg);
            // 启用javascript
            contentWebView.getSettings().setJavaScriptEnabled(true);
            // 从assets目录下面的加载html
            contentWebView.loadUrl("file:///android_asset/wst.html");

            Button button = (Button) findViewById(R.id.button1);
            button.setOnClickListener(btnClickListener);
            contentWebView.addJavascriptInterface(this, "wst");
      }

      OnClickListener btnClickListener = new Button.OnClickListener() {
            public void onClick(View v) {
                  // 无参数调用
                  contentWebView.loadUrl("javascript:javacalljs()");
                  // 传递参数调用
                  contentWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");
            }
      };

      public void startFunction() {
            Toast.makeText(this, "js调用了java函数", Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {

                  @Override
                  public void run() {
                        msgView.setText(msgView.getText() + "\njs调用了java函数");

                  }
            });
      }

      public void startFunction(final String str) {
            Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {

                  @Override
                  public void run() {
                        msgView.setText(msgView.getText() + "\njs调用了java函数传递参数:" + str);

                  }
            });
      }
          
wst.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <script type="text/javascript">
function javacalljs(){
       document.getElementById("content").innerHTML +=
         "<br\>java调用了js函数";
}

function javacalljswithargs(arg){
       document.getElementById("content").innerHTML +=
         ("<br\>"+arg);
}

    </script>
</head>
<body>
this is my html <br/>
<a onClick="window.wst.startFunction()">点击调用java代码</a><br/>
<a onClick="window.wst.startFunction('hello world')">点击调用java代码并传递参数</a>
<br/>
<div id="content">内容显示</div>
</body>
</html>

以上这个例子的协议是:window.wst.startFunction()

关于webview最详细讲解(包含 h5 和android 交互)

http://blog.csdn.net/qq_24530405/article/details/52067474 为什么要学习Android与H5互调? 微信,QQ空间等大量软件都内嵌了...
  • u014045181
  • u014045181
  • 2016年11月23日 17:56
  • 8639

HTML5+规范:Webview(管理应用窗口界面)

一、知识点   Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。 1、方法 1.1、all: 获取所有Webview窗口     ...
  • qq_27626333
  • qq_27626333
  • 2016年07月02日 17:20
  • 20012

webview与h5交互

android webview与H5的交互 有时方法无响应
  • menglele1314
  • menglele1314
  • 2015年05月14日 10:42
  • 4037

WebView和H5的那点事

在iOS开发中好多时候,原生的app会很大的限制,也会有好多难以实现的东西。那就需要与H5进行混合开发,那就使用到了webView。 一、首先简单介绍一下webView: 1、三种加载方式:- (...
  • qq_34195670
  • qq_34195670
  • 2016年11月23日 16:00
  • 2510

WebView详解与简单实现Android与H5互调

原文链接:http://blog.csdn.net/qq_24530405/article/details/52067474 为什么要学习Android与H5互调?微信,QQ空间等大量软件都内嵌了H5...
  • xiaxiazaizai01
  • xiaxiazaizai01
  • 2016年11月16日 18:16
  • 4200

Android中使用WebView加载H5页面的方法

1、AndroidManifest.xml中必须加权限,否则会出Web page not available错误。 2、如果访问的页面中有Javascript,则webview必须设置支持J...
  • wpj1119245135
  • wpj1119245135
  • 2016年04月14日 15:03
  • 3218

WebView适配问题集锦

Android 4.0以上的系统设置中的开发人员设置中有一项是“强制使用GPU渲染”。当这个开启时,可能会引起WebView的稳定,如页面加载后一闪而过又变成空白等。好在这一项默认是关闭的。 不过硬件...
  • a345017062
  • a345017062
  • 2013年03月07日 20:13
  • 25363

关于微信小程序webview的使用

小程序 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了,本...
  • rolan1993
  • rolan1993
  • 2017年12月04日 14:30
  • 4809

微信小程序与内嵌网页交互实现支付功能

上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓。 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过...
  • rolan1993
  • rolan1993
  • 2017年12月21日 14:17
  • 3472

微信小程序和H5的秘密

如何使微信小程序解析 H5文件前段时间,终于千呼万唤出来的微信小程序,可谓是坑苦了广大程序猿了.下面将就我所遇到的问题做一个总结由于微信的编写文件不再是html格式,所以也无法解析 html代码,这...
  • ALSNEI
  • ALSNEI
  • 2017年01月13日 18:16
  • 3894
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webview和h5的交互
举报原因:
原因补充:

(最多只允许输入30个字)