JS与原生APP交互传参看一遍就会

最新推荐文章于 2024-07-24 11:23:56 发布

别把代码当饭吃

最新推荐文章于 2024-07-24 11:23:56 发布

阅读量2k

点赞数

文章标签： js交互安卓 ios 穿参

本文链接：https://blog.csdn.net/weixin_38639882/article/details/79315081

版权

在开发过程中，我们经常会用到混合开发的情况，即APP+webview的情况，因此js与APP的交互就成了必修课，本章我们从最简单的例子为大家讲解

首先我们先看一下html页面部分

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<input type="button" value="评论a" onclick="comment()" >

</body>
</html>

很简单，只有一个按钮，绑定一个commit函数

接下来我们看一下js部分，WebViewJavascriptBridge是与APP交互的核心

首先我们封装一个函数setUpBridge，很简单它接收三个参数 funcName：与APP公共方法名 data：传入数据 resultCallback：回调函数

function setUpBridge(funcName,data,resultCallback) {
    var osType = this.getOSType(); //获取系统类型
    //按系统类型 分别执行原生交互
    if (osType == "IOS") {
      //苹果手机交互方式 消息体为字面量对象(json格式)： action 代表执行的动作 data 代表传递的数据
      this.setUpIOSBridge(function(bridge) {
        bridge.callHandler(funcName, data, function(response) {
          if (typeof resultCallback == "function") {
            resultCallback(response);
          }
        });
      });
    } else if (osType == "ANDROID") {
      //安卓手机交互方式
      this.setUpAndroidBridge(function(bridge) {
        bridge.callHandler(funcName, data, function(response) {
          if (typeof resultCallback == "function") {
            resultCallback(response);
          }
        });
      });
    } else {
      //其他类型
    }
  },

下面演示它是如何调用的，注意：示例中sendData是与APP端共同定义好的函数名称，函数名称两端一致才能成功

setUpBridge('sendData',{'name':'张三'},function(data){console.log(data)})

接下来是完整代码

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<input type="button" value="评论a" onclick="comment()">


<script>

function setUpBridge(funcName,data,resultCallback) {
    var osType = this.getOSType(); //获取系统类型
    //按系统类型 分别执行原生交互
    if (osType == "IOS") {
      //苹果手机交互方式 消息体为字面量对象(json格式)： action 代表执行的动作 data 代表传递的数据
      this.setUpIOSBridge(function(bridge) {
        bridge.callHandler(funcName, data, function(response) {
          if (typeof resultCallback == "function") {
            resultCallback(response);
          }
        });
      });
    } else if (osType == "ANDROID") {
      //安卓手机交互方式
      this.setUpAndroidBridge(function(bridge) {
        bridge.callHandler(funcName, data, function(response) {
          if (typeof resultCallback == "function") {
            resultCallback(response);
          }
        });
      });
    } else {
      //其他类型
    }
  }

function commit(){
    setUpBridge('sendData',{'name':'张三'},function(data){console.log(data)})
}
</script>
</body>
</html>

把静态页面托管到服务器上，把访问的网站给到APP端，APP端使用webview调用一下，就可以测试了，不明白的下方留言