WebView与APP交互实战记录

myeveryheart 发布于2019-08-23 15:19 / 837人阅读

摘要：调用安卓后回调不成功，收不到返回的消息这个问题其实上有，这是安卓版本没有解决的问题，最新的代码已经解决了。解决办法是安卓需要引入最新的的代码，而不要使用版本的代码。

WebView与APP交互

WebView与APP交互，即网页通过JSBrige调用APP的功能，APP也可以通过JSBrige调用网页提供的方法。最近刚好接触到这一块，记录一下前端侧的实际操作过程,这篇文章适合还没接触过这一块的同学们，这里不讲原理，直接开始实战的过程。

准备工作

与客户端同学沟通好使用的JSBrige库，我这里使用的是下面这两个库：

iOS(1.1w+ Star): https://github.com/marcuswestin/WebViewJavascriptBridge

Android(6k+ Star): https://github.com/lzyzsd/JsBridge

Star数量比较高，使用的企业也比较多，所以还是比较可靠的，可以在它们的文档中示例代码。

注意： github上有很多这样的库，但最好配套使用，即iOS和Android注入的jsBrige名称一致，我们前端使用时比较方便统一。

开发步骤 1. 统一封装APP注入的JSBrige

ios和android注入的jsbrige可能会有些差异，所以在使用前我们需要抹平不同客户端的差异。
如果app的同学使用了上面说的库，安卓和iOS会在WebView中的window下注入一个WebViewJavascriptBridge的对象，iOS有可能是注入WVJBCallbacks的数组，也有可能需要通过iframe来注入。iOS的文档中给出了一个兼容的示例代码：

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 = "https://__bridge_loaded__";
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

我们可以直接使用上面的代码，为了使用方便，在页面onload后，我们将这个函数挂在window下：

window.onload = function () {
  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 = "https://__bridge_loaded__";
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
  }
  window.setupWebViewJavascriptBridge = setupWebViewJavascriptBridge
}

window.setupWebViewJavascriptBridge这个函数，就是我们所说的JSBridge,即WebView与APP交互的桥梁。

2. JS调用APP的方法

APP端的同学需要先用库提供的方法在APP端实现一个方法，方法名比如：playMusic(musicId)，可以传递参数musicId,表示让APP开始播放某一首音乐。js调用时如：

window.setupWebViewJavascriptBridge(function (bridge) {
        bridge.callHandler("playMusic", { musicId: 1 }, function (data) {
          console.log("app触发成功了，音乐正在播放。。。APP回调返回的数据：", data)
        })
      })

上面相当于向app发起了一个playMusic请求，app收到请求后，执行相关的动作，然后可以callback，网页可以拿到回调并继续做相关动作（需要的话）。

3. APP调JS提供的方法

同样的道理，若想APP能调用JS提供的方法，JS中要先注册这个方法，方法名比如stateChange(state)，JS注册方法：

window.setupWebViewJavascriptBridge(function (bridge) {
  bridge.registerHandler("stateChange", function (data, responseCallback) {
    console.log("收到APP请求stateChange事件，请求的数据是：", data)
    // 可以返回给app一个回调
    responseCallback("朕已经收到APP爱卿的请求了，且退下！")
  })
})

到这里，WebView与app的交互其实就完成了，就是这么简单。

注意事项 1. window.onload时就callHandler可能不成功

一般在Android中会出现这个问题，这是因为APP注入的WebViewJavascriptBridge还不存在，JS就调用其中的方法了，所以就会没有效果。而Android的库也给出了这个注意事项，所以得这样写：

window.onload = function () {
  function registerAppEvent () {
    window.setupWebViewJavascriptBridge(function (bridge) {
      bridge.registerHandler("stateChange", function (data, responseCallback) {
        console.log("收到APP请求，请求的数据是：", data)
        // 可以返回给app一个回调
        responseCallback("朕已经收到APP爱卿的请求了，且退下！")
      })
    })
  }

  // 兼容写法 
  if (window.WebViewJavascriptBridge) {
    registerAppEvent()
  } else {
    document.addEventListener(
        "WebViewJavascriptBridgeReady"
        , function() {
            registerAppEvent()
        },
        false
    )
  }
}

但这里没有考虑到iOS的情况，在最新的iOS中WebViewJavascriptBridge可能是不存在的，所以上面写法registerAppEvent()在iOS可能无法执行。为了避免多次注入事件，我这里用了setTimeout，兼容两端的流程：

  let isInitBridgeEvent = false // 作为是否已注册过事件的标记
  if (window.WebViewJavascriptBridge) {
    registerAppEvent()
    isInitBridgeEvent = true
  } else {
    document.addEventListener(
      "WebViewJavascriptBridgeReady",
      function () {
        registerAppEvent()
        isInitBridgeEvent = true
      },
      false
    )
    // 如果还没注册则再注册一次
    setTimeout(() => {
      if (!isInitBridgeEvent) {
        registerAppEvent()
        isInitBridgeEvent = true
      }
    }, 100)

这坨代码写的很挫，让我尴尬癌都犯了，有没有热心的小伙伴帮我优化下写法[送花花]。

2. js调用安卓后callback回调不成功，js收不到app返回的消息

这个问题其实github上有issue，这是安卓1.0.4版本没有解决的问题，最新的代码已经解决了。
解决办法是：安卓需要引入最新的master的代码，而不要使用1.0.4版本的代码。

云服务器服务器托管 webview与js交互跳转 app交互设计 webrtc入门与实战 tensorflow入门与实战

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101855.html

android必读文 - 收藏集 - 掘金

摘要：如何签名掘金签名是阻碍开发者集成最大的绊脚石，这里主要针对签名的生成和使用进行讲解，高级开发者可忽略。但是当我们需要去做权限管理及其封装掘金前言出来很久了，都快发布了，尽管如此还是要整理一下这块。给所有开发者的 React Native 详细入门指南（第一阶段） - Android - 掘金本文已授权微信公众号：：鸿洋（hongyangAndroid）原创首发本文为Marno原创，...

Simon_Zhou 2019-06-25 11:31 评论0 收藏0
Android学习路线

摘要：这是网上抄的一篇学习路径，希望记录下来以供自己随时的学习，所有的博客也基本按照里面的知识点来发散。这是网上抄的一篇Android学习路径，希望记录下来以供自己随时的学习，所有的博客也基本按照里面的知识点来发散。 1Java 基础 Java Object类方法 HashMap原理，Hash冲突，并发集合，线程安全集合及实现原理 HashMap 和 HashTable 区别 ...

paulquei 2019-04-23 15:20 评论0 收藏0
Android 技能图谱学习路线

摘要：这里是在网上找到的一片学习路线，希望记录下来供以后学习基础类方法原理，冲突，并发集合，线程安全集合及实现原理和区别作用，如何重载方法与区别与联系机制反射机制，代理模式泛型原理实现原理方法锁对象锁类锁的意义和区别线程同步的方法分析锁的种类这里是在网上找到的一片Android学习路线，希望记录下来供以后学习 1Java 基础 Java Object类方法 HashMap原理，Ha...

Wildcard 2019-04-23 15:20 评论0 收藏0
H5与Native交互之JSBridge技术

摘要：一原理篇下面分别介绍和与的底层交互原理在讲解原理之前，首先来了解下的组件，先来看一下苹果官方的介绍上面的意思是说是一个可加载网页的对象，它有浏览记录功能，且对加载的网页内容是可编程的。做过混合开发的很多人都知道Ionic和PhoneGap之类的框架，这些框架在web基础上包了一层Native，然后通过Bridge技术使得js可以调用视频、位置、音频等功能。本文就是介绍这层Bridge...

zacklee 2019-08-20 18:19 评论0 收藏0
Android中WebView页面交互

摘要：代码在内打开一个网页的时候，有时我们会要求与网页有一些交互。而这些交互是在基于的基础上。那么我们来学习一下如何与网页进行交互。传值给在网页代码中可以看到的点击事件添加了来回传一个串给页面，即通过以上的方法调用了的方法。代码在android内打开一个网页的时候，有时我们会要求与网页有一些交互。而这些交互是在基于javaScript的基础上。那么我们来学习一下android如何与网页进...

csRyan 2019-06-24 19:11 评论0 收藏0