WebViewJavascriptBridge

1.html调用ios的方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $(function () {
        //iOS用于js交互必备代码：
        function setupWebViewJavascriptBridge(callback) {
          if (window.WebViewJavascriptBridge) {
            return callback(WebViewJavascriptBridge);
          }
          if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
          }
          window.WVJBCallbacks = [callback];
          var WVJBIframe = document.createElement('iframe');
          WVJBIframe.style.display = 'none';
          WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
          document.documentElement.appendChild(WVJBIframe);
          setTimeout(function () {
            document.documentElement.removeChild(WVJBIframe)
          }, 0)
        }

        // setupWebViewJavascriptBridge(function(bridge) {
        //     // native调用js
        //   // bridge.registerHandler('jsHandlerName', function(data, responseCallback) {
        //   //     // data为ObjC传递给JS的数据
        //   //     console.log("JS Echo called with:", data)
        //   //     // js返回数据给Objc
        //   //     responseCallback('返回一个字符串，告诉ObjC：我已收到数据data')
        //   // })
        //   // js调用native的方法
        //   bridge.callHandler('getUserCoorCallback', '获取用户位置信息经纬度的回调', function responseCallback(res) {
        //       // responseData返回的数据
        //       alert(res)
        //   })
        // })

        function getData(name,data){
          setupWebViewJavascriptBridge(function(bridge) {
            // native调用js
            // bridge.registerHandler('jsHandlerName', function(data, responseCallback) {
            //     // data为ObjC传递给JS的数据
            //     console.log("JS Echo called with:", data)
            //     // js返回数据给Objc
            //     responseCallback('返回一个字符串，告诉ObjC：我已收到数据data')
            // })
            // js调用native的方法
            bridge.callHandler(name,data, function responseCallback(res) {
                // responseData返回的数据
                alert('位置信息：'+res)
            })
          })
        }
        alert('执行1')
        getData('getUserCoorCallback', '获取用户位置信息经纬度的回调')
        alert('执行2')

    })
  </script>
</body>

</html>

打印结果

//执行1

//执行2

//位置信息： 22.581529；113971377

注意：setupWebViewJavascriptBridge是异步的，首先执行同步任务，再执行异步任务

$(function () {

  //iOS用于js交互必备代码：
  function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
      return callback(WebViewJavascriptBridge);
    }
    if (window.WVJBCallbacks) {
      return window.WVJBCallbacks.push(callback);
    }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function () {
      document.documentElement.removeChild(WVJBIframe)
    }, 0)
  }

  //native调用js
  setupWebViewJavascriptBridge(function (bridge) {
    bridge.registerHandler('articleDetailViewInit', function (data, responseCallback) {
      //字符串分割成一个数组
      responseCallback('文章详情界面初始化成功');
    })
  })

  //js调用native
  function rewardBtnClickCallback(uid) {
    WebViewJavascriptBridge.callHandler('rewardBtnClickCallback', uid, function (response) {
      alert('native被调用:' + response);
    });
  }

}）

做个测试看看执行顺序

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $(function () {
        //iOS用于js交互必备代码：
        function setupWebViewJavascriptBridge(callback) {
          alert('1')
          if (window.WebViewJavascriptBridge) {
            alert('7')
            return callback(WebViewJavascriptBridge);
          }
          if (window.WVJBCallbacks) {
            alert('8')
            return window.WVJBCallbacks.push(callback);
          }
          window.WVJBCallbacks = [callback];
          alert('2')
          var WVJBIframe = document.createElement('iframe');
          WVJBIframe.style.display = 'none';
          WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
          document.documentElement.appendChild(WVJBIframe);
          alert('3')
          setTimeout(function () {
            alert('4')
            document.documentElement.removeChild(WVJBIframe)
          }, 0)
        }

        function getData(name,data){
          setupWebViewJavascriptBridge(function(bridge) {
            alert(5)
            bridge.callHandler(name,data,function responseCallback(res) {
                alert(6)
                alert(res)
            })
          })
        }
        getData('getUserCoorCallback', '获取用户位置信息经纬度的回调')
    })
  </script>
</body>

</html>

执行顺序会按照alert 1-6 依次执行，不执行 7和8

再做测试执行两次

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $(function () {
        //iOS用于js交互必备代码：
        function setupWebViewJavascriptBridge(callback) {
          alert('1')
          if (window.WebViewJavascriptBridge) {
            alert('7')
            return callback(WebViewJavascriptBridge);
          }
          if (window.WVJBCallbacks) {
            alert('8')
            return window.WVJBCallbacks.push(callback);
          }
          window.WVJBCallbacks = [callback];
          alert('2')
          var WVJBIframe = document.createElement('iframe');
          WVJBIframe.style.display = 'none';
          WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
          document.documentElement.appendChild(WVJBIframe);
          alert('3')
          setTimeout(function () {
            alert('4')
            document.documentElement.removeChild(WVJBIframe)
          }, 0)
        }

        function getData(name,data){
          setupWebViewJavascriptBridge(function(bridge) {
            alert(5)
            bridge.callHandler(name,data,function responseCallback(res) {
                alert(6)
                alert(res)
            })
          })
        }
        getData('getUserCoorCallback', '获取用户位置信息经纬度的回调')
        getData('getUserCoorCallback', '获取用户位置信息经纬度的回调')

        // 执行顺序1 2 3 1 8 4  5 5 6 经纬度 6 经纬度
    })
  </script>
</body>

</html>

执行顺序按照1 2 3 1 8 4 5 5 6 经纬度 6 经纬度

2.vue调用ios的方法

步骤1.新建bridge.js文件

在src下新建lib目录新建 bridge.js文件也可以把文件放在config目录下

function setupWebViewJavascriptBridge (callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge)
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback)
  }
  window.WVJBCallbacks = [callback]
  var WVJBIframe = document.createElement('iframe')
  WVJBIframe.style.display = 'none'
  WVJBIframe.src = 'https://__bridge_loaded__'
  document.documentElement.appendChild(WVJBIframe)
  setTimeout(function () {
    document.documentElement.removeChild(WVJBIframe)
  }, 0)
}

export default {
  callhandler (name, data, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler(name, data, callback)
    })
  },
  registerhandler (name, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.registerHandler(name, function (data, responseCallback) {
        callback(data, responseCallback)
      })
    })
  }
}

步骤2.引入bridge.js文件

方式1：全局引入

//main.js文件

//bridge.js放在lib目录下
// import Bridge from '../src/lib/bridge'
Vue.prototype.$bridge = Bridge

//bridge.js放在config目录下
import Bridge from '../config/bridge'
Vue.prototype.$bridge = Bridge

方式2：局部引入

在组件内

<script>//对应bridge.js的路径
import Bridge from '../lib/bridge'
//或者
import Bridge from '../../config/bridge'export default{

}<script>

步骤3.使用

全局引入的方式

    //全局引入调用 对应步骤2的方式1
      this.$bridge.callhandler('getUserCoorCallback', "获取用户位置信息经纬度的回调", (data) => {
      // 处理返回数据
        alert(data)
       })

    //局部引入调用  对应步骤2的方式2
      Bridge.callhandler('getUserCoorCallback', "获取用户位置信息经纬度的回调", (data) => {
      // 处理返回数据
        alert(data)
      })

但是按照网上的方法以上步骤都无法获取到WebViewJavascriptBridge对象，

本人尝试在vue 根目录下的index.html文件上加上，然后马上执行setupWebViewJavascriptBridge()，才终于获取到WebViewJavascriptBridge对象，原因不明。有知道原因的朋友请解答一下。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>活动</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
    setupWebViewJavascriptBridge()
  </script>
</html>

补充：

第一次交互的时候，alert(this.$bridge)为Object

当我们尝试看看WebViewJavascriptBridge，alert(WebViewJavascriptBridge) 或 alert(window.WebViewJavascriptBridge)都是undefined，

本人马大哈，把方法名callhandler打callHandler了。因为export default导出的是一个对象，他有两个方法。1是callhandler(name,data,callback)，2是registerhandler(name,callback)。

当一开始执行的时候WebViewJavascriptBridge是undefined，因为没有执行callhandler方法来执行 setupWebViewJavascriptBridge ，所以alert(WebViewJavascriptBridge) 是undefined。

执行完setupWebViewJavascriptBridge后，我们才能在ios中获取到WebViewJavascriptBridge对象，从而实现html与ios的交互。

    //错误
      this.$bridge.callHandler('getUserCoorCallback', "获取用户位置信息经纬度的回调", (data) => {
      // 处理返回数据
         alert(data)
       })
    //正确
       this.$bridge.callhandler('getUserCoorCallback', "获取用户位置信息经纬度的回调", (data) => {
      // 处理返回数据
         alert(data)
       })

html与ios交互方法 WebViewJavascriptBridge的更多相关文章

iOS与HTML5交互方法总结（转）
今天小编在找技术文章的时候,发现这样一个标题:iOS与HTML5交互方法总结,怎么看着这么熟悉呢? 还以为是刚哥用了别的文章,点进去一看,原来是刚哥自己写的文章,他们转载的,而且还上了Dev St ...
iOS与HTML5交互方法总结(修正)
摘要看了不少别人写的博客或者论坛,关于iOS与HTML5交互方法大概主要有5种方式: 1. 利用WKWebView进行交互(系统API) 2. 利用UIWebView进行交互(系统API) 3. 苹 ...
Unity3D与iOS消息交互方法(1)--iOS接收Unity3D发出的消息
跨平台这种事情不管多NB, 总要有些与原生系统交互的方法, 比如 Unity3D与iOS消息交互方法. 一: 建立一个空的Unity工程. File --> New Project 二: 编 ...
OC与JS交互之WebViewJavascriptBridge
上一篇文章介绍了通过UIWebView实现了OC与JS交互的可能性及实现的原理,并且简单的实现了一个小的示例DEMO,当然也有一部分遗留问题,使用原生实现过程比较繁琐,代码难以维护.这篇文章主要介绍下 ...
h5与安卓、ios交互
1.安卓交互 h5调用安卓方法 window.webview.xxx() 安卓调用h5方法, 方法需要在全局注册 window['showUnreadMsg'] = () => { this.$ ...
UNITY3D与iOS交互解决方案
原地址:http://bbs.18183.com/thread-456979-1-1.html 本帖最后由啊,将进酒于 2014-2-27 11:17 编辑 “授人以鱼,不如授人以渔”,以UNIT ...
Unity与IOS交互
Unity IOS交互 @By 广州小龙 QQ群:63438968 环境:Mac os 10.9.2 Unity 4.2.1f4 Xcode 5.0.2 Unity IOS的交互我写过一个教程 ...
js和android及ios交互
Android中Java和JavaScript交互这种交互,Hybrid App 会用的比较多一点, 本文将介绍如何实现Java代码和Javascript代码的相互调用. Android提供了一个很 ...
Unity与安卓IOS交互
记录下安卓与Unity交互中跳坑找到的资料. <1>建立交互 http://blog.csdn.net/lizhengwei1989/article/details/54631 ...

随机推荐

Redis常用数据类型和事物以及并发
Redis数据类型基本类型(String int): 如 set key value .get key 等所有命令都是按照 key value keys * 可以将全部数据列出,其中后面的 &qu ...
Java基础重要知识点-反射
反射,如何把.java文件转化为.class文件 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信 ...
java中的int与byte的转化
java中的int与byte的转化 1.基础准备 1.1.原码就是二进制码,最高位为符号位,0表示正数,1表示负数,剩余部分表示真值 1.2.反码在原码的基础上,正数反码就是他本身,负数除符号位之 ...
一个比Spring Boot快44倍的Java框架！
最近栈长看到一个框架,官方号称可以比 Spring Boot 快 44 倍,居然这么牛逼,有这么神奇吗?今天带大家来认识一下. 这个框架名叫:light-4j. 官网简介:A fast, lightw ...
基于Cisco packet tracer的AAA认证
---恢复内容开始--- 1.Topology Diagram拓扑图 2.配置ip地址 3.路由互通 pc1--pc2 pc1--pc3 pc2--pc3 4.指令文件 R1: R1(config)# ...
3.Flask-SQLAlchemy
(1)安装 pip install flask_sqlalchemy (2)数据库连接 from flask import Flask # 1.导入 from flask_sqlalchemy imp ...
springcloud~配置中心的使用
配置中心作为springcloud里最底层的框架,所发挥的意思是举足轻重的,所以的组件的配置信息都可以通过springcloud config来管理,它会把配置信息分布式的存储到git上,所以信息安全 ...
OA发展史：由点到生态
在当今无边界组织的商业背景下,企业与员工关系已经转化为联盟关系,以往通过工作场所.劳动合同等约束的形式已经逐步弱化,管理行为空前复杂,OA正是将一个个散点整合起来的看不见的手.那么,推动OA发展的核心 ...
Python：os 模块常用方法简介
返回当前工作目录 os.getcwd() 返回 path 的绝对路径 os.path.abspath(path) os.path.abspath('.') 相当于 os.getcwd() 分割目录和文 ...
python学习第九讲,python中的数据类型,字符串的使用与介绍
目录 python学习第九讲,python中的数据类型,字符串的使用与介绍一丶字符串 1.字符串的定义 2.字符串的常见操作 3.字符串操作 len count index操作 4.判断空白字符,判 ...

html与ios交互方法 WebViewJavascriptBridge

WebViewJavascriptBridge

html与ios交互方法 WebViewJavascriptBridge的更多相关文章

随机推荐

热门专题