H5调用app原生接口
移动端H5调用app原生接口使用JSBridge的方式调用使用需求是在移动端app中跳转至H5页面,需要调用该app的刷脸接口。只是使用过,故在此留下笔记。使用JSBridge的方式调用使用
·
移动端H5调用app原生接口
需求是在移动端app中跳转至H5页面,需要调用该app的刷脸接口。只是使用过,故在此留下笔记。
使用JSBridge的方式调用
以下代码是在jsp文件中。
1. 建立jsbridge链接
var JSBridge = {
isAndroid: navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1,
isiOS: !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
//这是必须要写的,用来创建一些设置
setupWebViewJavascriptBridge(callback) {
//Android使用
if (this.isAndroid) {
if (window.WebViewJavascriptBridge) {
callback(window.WebViewJavascriptBridge);
} else {
document.addEventListener('WebViewJavascriptBridgeReady',function() {
callback(window.WebViewJavascriptBridge);
},false);
}
console.log('tag', '安卓');
sessionStorage.phoneType = 'android';
}
//iOS使用
if (this.isiOS) {
if (window.WebViewJavascriptBridge) {
return callback(window.WebViewJavascriptBridge);
}
if (window.WVJBCallbacks) {
return window.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(function() {
document.documentElement.removeChild(WVJBIframe);
}, 0);
console.log('tag', 'ios');
sessionStorage.phoneType = 'ios';
}
},
//注册回调函数,第一次连接时调用 初始化函数(android需要初始化,ios不用)
init(){
var that = this;
this.setupWebViewJavascriptBridge(function(bridge) {
if (that.isAndroid) {
//初始化
bridge.init(function(message, responseCallback) {
var data = {
'Javascript Responds': 'Wee!'
};
responseCallback(data);
});
}
});
},
// js调APP方法 (参数分别为:app提供的方法名 传给app的数据 回调)
callHandler(name, data, callback) {
this.init(); //初始化
this.setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler(name, data, callback);
});
},
// APP调js方法 (参数分别为:js提供的方法名 回调)
registerHandler(name, callback) {
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler(name, function(data, responseCallback) {
callback(data, responseCallback);
});
});
}
}
2. 使用jsbridge正式调用
JSBridge.callHandler('getAuthCode',{
state: 'STATE',
scope: that.scope,
client_id: that.client_id,
})
直接使用对象调用
以下代码是在vue文件中。
1. 暴露供app调用的回调方法faceVerifyResult
window.faceVerifyResult = function (result){
if(JSON.parse(result).status == 'success'){
if (_this.$route.query.apiType && _this.$route.query.apiType == '3') {
_this.doRequest_V2();
} else {
_this.doRequest();
}
}
}
2. 调用app原生方法
let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
//安卓调用
if(this.$common.isAndroid){
android.FaceVerify();
}
//苹果调用
if(this.$common.isiOS){
// this.$common.callHandler('FaceVerify');
window.webkit.messageHandlers.FaceVerify.postMessage(null);
}
更多推荐
已为社区贡献2条内容
所有评论(0)