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. 网页上接收到了结果，就去做对应的处理

代码示例：

<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(通信的桥梁)

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

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

// 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   bridgeexport 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>

更多相关文章

随机推荐