web网页和ios、android进行交互

这一篇我们来讲讲WEB网页和iOS、Android进行交互

一、原理

web调用ios和android

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

ios、android调用web网页

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

代码示例：

  拍照
  打开微信
  扫一扫
  调用
  
    
image:
    
{{image}}
    
  

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

二、使用 WebViewJavaScriptBridge 插件

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

for ios GitHub 链接
for android github 链接

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

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

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

// Vue 中实例，React 都是类似的使用方法

  拍照
  打开微信
  扫一扫
  
    
image:
    
{{image}}
    
  

//  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)
        });
      })
    }
  }
}
#home{
  background: yellow;
}

作者：yuzhenliuMe