这一篇我们来讲讲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 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>