web网页和ios、android进行交互

这一篇我们来讲讲web网页和ios、android进行交互

一、原理

1. web调用ios和android

    1. 发送一个假请求，让原生开发去拦截,可以使用window.location.href 或者a标签发送请求
    2. 这个假请求的url需要和ios、android协商，保持一致
    3. 原生开发人员会去构建一个拦截请求类，如果是想要的url，就会被拦截，不会让它发送出去，截取到后面的字符串，
    4. ios中有自己的发布订阅中心，那截取到了字符串就根据字符串去发布对应的事件
    5. 比如说captureImage，原生开发人员就会在webview中去监听发布订阅中心对应的事件，事件中会去调用原生的功能
    6. webview就调用web中写好的方法 
   

2. ios、android调用web网页

    1. 先在网页上准备一个获得结果的回调函数(window上面去挂靠一个方法，比如说onCaptureImageCallback)
    2. 当原生需要传值给网页时，向打开网页的窗口动态插入js代码,这段js代码就是调用回调函数的代码
    3. 网页上接收到了结果，就去做对应的处理
   

代码示例：

<template>
<div id="home" class="page">
  <button @click="btnAction">拍照</button>
  <a href="yuzhenliu://openweixin">打开微信</a>
  <a href="yuzhenliu://scan">扫一扫</a>
  <button @click="btnAction">调用</button>
  <div>
    <h3>image:</h3>
    <p>{{image}}</p>
    <img :src="image" alt="" width="50%">
  </div>
</div>
</template>

<script>
export default {
  data(){
    return {
      image: ''
    }
  },
  methods: {
    btnAction(){
      //发送一个假的请求，触发原生
      window.location.href = 'yuzhenliu://captureImage';
      // 在window设置了一个回调方法
      window.onCaptureImageCallback = (value)=>{
        this.image = value;
      };
    }
  }
}
</script>

二、使用 WebViewJavaScriptBridge 插件

实际工作中不用我们去发送假的请求，我们可以使用插件: WebViewJavaScriptBridge

for ios github 链接
for android github 链接

webview(ios/android) javascript(网页) bridge(通信的桥梁)

那怎么实现这个桥接技术？

1. 就是让android, ios 去下载WebViewJavaScriptBridge这个包，如果android和ios要调用js的方法，我们就往桥上注册方法，让他们去调用，如果我想要调用android和ios的方法，也可以让他们往桥上去实现方法，然后我们使用callHandler，使用android, ios registerHandler注册方法时相同的key值来调用
2. 底层原理就是上面的原理

// Vue 中实例，React 都是类似的使用方法
<template>
<div id="home" class="page">
  <button @click="btn1Action">拍照</button>
  <button @click="btn2Action">打开微信</button>
  <button @click="btn3Action">扫一扫</button>
  <div>
    <h3>image:</h3>
    <p>{{image}}</p>
    <img :src="image" alt="" width="50%">
  </div>

</div>
</template>

<script>
//  webview   javascript   bridge

export default {
  data(){
    return {
      image: ''
    }
  },
  methods: {
    btn1Action(){
      setupWebViewJavascriptBridge((bridge)=>{
        // 调用ios的代码
        bridge.callHandler('captureImage', {'count':9}, (responseData)=>{
          console.log(responseData);
          console.log(this);
          this.image = responseData;
        });
      })

    },
    btn2Action(){
      setupWebViewJavascriptBridge(function(bridge) {
        // 调用ios的代码
        bridge.callHandler('openweixin', null, function responseCallback(responseData) {
          console.log("JS received response:", responseData)
        });
      })
    },
    btn3Action(){
      setupWebViewJavascriptBridge(function(bridge) {
        // 调用ios的代码
        bridge.callHandler('scan', null, function responseCallback(responseData) {
          console.log("JS received response:", responseData)
        });
      })
    }
  }
}
</script>

<style>
#home{
  background: yellow;
}

</style>