项目背景：现有H5项目，要快速完成一个app开发，由于周期紧张只能先用H5套壳完成一版app。在其中，涉及到不同端的交互。
如果业务逻辑比较复杂，比如页面需要获取 IOS 端传回的返回值，或者 IOS 端需要调用 js 方法。可以通过第三方库来实现，我们项目用的是 WebViewJavascriptBridge。
使用WebViewJavaScriptBridge交互封装，统一管理，方便维护。
```
判断不同访问终端
function browserVersion(){
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
一 、什么是webViewjavascripBridge？
WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁，用白话来说就是实现java（ios为oc）和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口，使得我们的开发更加灵活和安全。
二、如何在vue项目中使用
创建 src/utils/bridge.js 文件，用于封装 WebViewJavascriptBridge将以下代码拷贝到 bridge.js 文件中。
function setupWebViewJavascriptBridge (callback) {
if (window.WebViewJavascriptBridge) {
return callback(window.WebViewJavascriptBridge) }
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback) }
window.WVJBCallbacks = [callback]
let WVJBIframe = document.createElement('iframe')
WVJBIframe.style.display = 'none'
WVJBIframe.src = 'https://__bridge_loaded__' document.documentElement.appendChild(WVJBIframe)
setTimeout(() => {
document.documentElement.removeChild(WVJBIframe) }, 0)
}
export default {
callhandler (name, data, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.callHandler(name, data, callback) })
},
registerhandler (name, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler(name, function (data, responseCallback) {
callback(data, responseCallback)
}) }) }}
在 main.js 中引入该文件
import Bridge from './utils/bridge.js'
Vue.prototype.$bridge = Bridge
在需要调用客户端方法的组件中（事先需要与客户端同事约定好方法名）
this.$bridge.callhandler('ObjC Echo', params, (data) => {
// 处理返回数据
})文章来源：https://www.toymoban.com/news/detail-428798.html
当客户端需要调用 js 函数时,事先注册约定好的函数即可
this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {
alert('JS Echo called with:', data) responseCallback(data)
})
链接：https://www.jianshu.com/p/fd4f7230b06a文章来源地址https://www.toymoban.com/news/detail-428798.html
到了这里，关于(转)H5和IOS/安卓通信解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
