h5使用android原生组件,H5和安卓原生进行交互的操作流程记录

本人只是一个前端，第一次接触和移动端的混合开发，遇到了一些问题，现在记录下，以免以后踩坑

1、首先，百度H5和安卓原生交互的方式很多，但是我觉得百度的都没讲清楚或者是我太小白没看懂，以及里面涉及一些安卓或java所以我不太看得懂

2、如果安卓比较厉害的话，大概安卓也会告诉你他用了什么库，或者什么方法，然后前端按那一套对应的东西来就可以了，特别要注意安卓使用的库不同的话，可能我以下的方法就会失效

3、前端框架是vue

// 1、vue引入jsbridge.js

// 2、在原型上绑定

// 3、调用时使用 this.$bridge进行调用

jsbridge.js

let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;

let isiOS= !!navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);//这是必须要写的，用来创建一些设置

functionsetupWebViewJavascriptBridge(callback) {//Android使用

if(isAndroid) {if(window.WebViewJavascriptBridge) {

callback(window.WebViewJavascriptBridge);

}else{

document.addEventListener('WebViewJavascriptBridgeReady',

()=>{

callback(window.WebViewJavascriptBridge);

},false);

}

console.log('tag', '安卓');

sessionStorage.phoneType= 'android';

}//iOS使用

if(isiOS) {if(window.WebViewJavascriptBridge) {returncallback(window.WebViewJavascriptBridge);

}if(window.WVJBCallbacks) {returnwindow.WVJBCallbacks.push(callback);

}

window.WVJBCallbacks=[callback];var WVJBIframe = document.createElement('iframe');

WVJBIframe.style.display= 'none';

WVJBIframe.src= 'wvjbscheme://__BRIDGE_LOADED__';

document.documentElement.appendChild(WVJBIframe);

setTimeout(()=>{

document.documentElement.removeChild(WVJBIframe);

},0);

console.log('tag', 'ios');

sessionStorage.phoneType= 'ios';

}

}//注册回调函数，第一次连接时调用 初始化函数(android需要初始化,ios不用)

setupWebViewJavascriptBridge((bridge) =>{if(isAndroid) {//初始化

bridge.init((message, responseCallback) =>{var data ={'Javascript Responds': 'Wee!'};

responseCallback(data);

});

}

});

exportdefault{//js调APP方法 (参数分别为:app提供的方法名 传给app的数据 回调)

callHandler(name, data, callback) {

setupWebViewJavascriptBridge((bridge)=>{

bridge.callHandler(name, data, callback);

});

},//APP调js方法 (参数分别为:js提供的方法名 回调)

registerHandler(name, callback) {

setupWebViewJavascriptBridge((bridge)=>{

bridge.registerHandler(name, (data, responseCallback)=>{

callback(data, responseCallback);

});

});

}

};

调用：

//app调h5和h5调用app我都是用的callhandler方法

mounted() {//this.submit2()

//this.getappData()

let msg = 'go'

this.$bridge.callHandler("getName", msg, data =>{

alert('传出数据:' +data)

})

},

其中：getName是跟安卓定义好的方法， msg是h5给安卓传的数据，data是安卓给h5传的数据，但要注意的是，无论是h5调安卓，还是安卓调用h5的方法，也都是安卓端显示，h5是什么都不显示，至于jsBridge.js的原理，还是得深入慢慢看看