前端与原生交互只需要调用安卓和IOS定义号的方法就行了,
安卓要定义一个window全局的mainBridge的类里面写上你这边要调用的方法。ios同理,只是定义方法不一样,调用的方法也有些差距。
"use strict";
/**
* [WebDemo 主方法]
*/
function WebDemo() {
var u = navigator.userAgent; //http请求用户代理头
/**
* propery
* @type {String}
*/
this.name = "webdemo1.0";
this.debug = true; //开启调试
this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //判断Android终端
this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
/**
* function
* @return {[type]} [description]
*/
this.say = function () {
if (this.debug) {
console.log("name:", this.name);
console.log("isandroid:", this.isAndroid);
console.log("isIOS:", this.isIOS);
}
var that = this; //保存引用
/**
* 初始化方法
* 建立bridge
*/
//如果是Android
if (this.isAndroid) {
if (this.debug) {
console.log('setup For ..Android');
}
if (typeof webViewJavascriptBridge != 'undefined') {
this.mainBridge = webViewJavascriptBridge; // android 定义的webview和js通信的bridge
}
}
//如果是IOS
if (this.isIOS) {
if (this.debug) {
console.log('setup For ..IOS');
}
this.mainBridge = undefined;
/*这段代码是固定的,必须要放到js中*/
this.setupWebViewJavascriptBridge = function (callback) {
if (window.WebViewJavascriptBridge) { return callback(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("setupWebViewJavascriptBridge is :", typeof this.setupWebViewJavascriptBridge);
this.mainBridge = undefined; //
/*与OC交互的所有JS方法都要放在此处注册,才能调用通过JS调用OC或者让OC调用这里的JS*/
this.setupWebViewJavascriptBridge(function (bridge) {
console.log('get bridge:', typeof bridge);
that.mainBridge = bridge;
});
}
/**
* 实现的功能
*/
// 获取状态栏高度
this.statusHeight = function () {
if (that.debug) {
console.log('mainBridge type is :', typeof that.mainBridge);
console.log('callback is type :', typeof callback);
}
//android的处理
if (that.isAndroid) {
if (typeof that.mainBridge == "undefined") {
console.log("android未初始化:WebDemo");
} else {
// 调用安卓定义的方法statusHeight(),接收参数并return
return that.mainBridge.statusHeight();
}
}
//ios的处理
if (typeof that.mainBridge == "undefined") {
let iOSInfo = JSON.parse(JSON.stringify(window.iOSInfo));
return iOSInfo.statusHeight;
}
};
// 给原生传递参数
this.setData = function (query) {
if (that.debug) {
console.log('mainBridge type is :', typeof that.mainBridge);
console.log('callback is type :', typeof callback);
}
//android的处理
if (that.isAndroid) {
if (typeof that.mainBridge == "undefined") {
alert("android未初始化:WebDemo");
} else {
// 调用安卓定义的方法setData(res),传递参数
that.mainBridge.setData(query);
}
return; //android不调用,但是需要实现方法..
}
//ios的处理
if (typeof that.mainBridge == "undefined") {
console.log('...................');
console.log(query);
window.webkit.messageHandlers.setData.postMessage(query);
}
}
// 退出登录
this.exit = function () {
if (that.debug) {
console.log('mainBridge type is :', typeof that.mainBridge);
console.log('callback is type :', typeof callback);
}
//android的处理
if (that.isAndroid) {
if (typeof that.mainBridge == "undefined") {
alert("android未初始化:WebDemo");
} else {
// 调用安卓定义的方法exit(),退出APP
that.mainBridge.exit();
}
return; //android不调用,但是需要实现方法..
}
//ios的处理
if (typeof that.mainBridge == "undefined") {
console.log('...................');
console.log(query);
window.webkit.messageHandlers.exit.postMessage();
}
}
};
this.say();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>h5打包APP,与原生交互</title>
</head>
<body>
</body>
<!-- 引入webdemo -->
<script src="./webdemo.js" type="text/javascript"></script>
<script type="text/javascript">
var webdemo = new WebDemo();
webdemo.statusHeight() // 获取原生传递的参数:statusHeight()
webdemo.setData('给安卓传递的参数') // 需要给原生传递参数:setData(res)
webdemo.exit(); // 退出APP,点击事件主动触发:exit()
</script>
</html>