h5在线动态页面调用app原生方法
h5初始化代码例子
function connectWebViewJavascriptBridge(callback) {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
if (isAndroid) {
// Android使用
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge);
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function () {
callback(WebViewJavascriptBridge);
},
false
);
}
}
if (isiOS) {
// iOS使用
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);
}
}
connectWebViewJavascriptBridge(function (bridge) {
bridge.init(function (message, responseCallback) {
console.log('JS got a message', message);
var data = {
'Javascript Responds': '测试中文!'
};
if (responseCallback) {
console.log('JS responding with', data);
responseCallback(data);
}
});
bridge.registerHandler("functionInJs", function (data, responseCallback) {
document.getElementById("show").innerHTML = ("data from Java: = " + data);
if (responseCallback) {
var responseData = "Javascript Says Right back aka!";
responseCallback(responseData);
}
});
})采用技术
Android:参考https://github.com/lzyzsd/JsBridge
iOS:参考https://github.com/marcuswestin/WebViewJavascriptBridge
H5与原生交互公共插件
插件方法名前缀以platform开头，后面接上要实现的功能名称，比如platformCamera
| 方法 |
h5调用例子 |
h5入参 |
原生出参 |
备注 |
|---|---|---|---|---|
| 方法 |
h5调用例子 |
h5入参 |
原生出参 |
备注 |
| 蓝牙模块：连接蓝牙 步骤序列：②
|
window.WebViewJavascriptBridge.callHandler( , 'ConnectBleDevice' , {} , function (responseData) { } ); |
无 | //原生返回结果示例： {‘BleConnectResult’ ：0} 参数解释： BleConnectResult：参数名 1：连接成功（会自动进入打开通知操作，会收到通知相关回调返回） 2：连接异常 3：连接超时 |
//callHandler不返回数据 备注：1、H5通过“StarBleScan”方法获取蓝牙连接结果 2、蓝牙意外断开会触发 {‘BleConnectResult’ ：2} （连接异常）
|
| 蓝牙模块：设置需要连接蓝牙名称（必须） |
window.WebViewJavascriptBridge.callHandler( |
//H5调用方法名：SetConnectBleName //H5入参： {'ConnectBleName' : ‘蓝牙设备名称’}
|
无 | 必填：需要填入想要连接的蓝牙才能成功搜索 |
| 蓝牙模块：设置WriteUUID（非必须） |
window.WebViewJavascriptBridge.callHandler( , 'SetBleWriteUUID' , {'BleWriteUUID' : ‘需要输入的参数名’} , function (responseData) { } ); |
//H5调用方法名：SetBleWriteUUID //H5入参： {'BleWriteUUID' : 蓝牙模块的WriteUUID‘’} |
无 | 非必须：已有默认值，有个人需求可修改此值 默认值： 0000fee1-0000-1000-8000-00805f9b34fb
|
| 蓝牙模块：设置ServiceUUID（非必须） |
window.WebViewJavascriptBridge.callHandler( , 'SetBleServiceUUID' , {'BleServiceUUID' : ‘需要输入的参数名’} , function (responseData) { } ); |
//H5调用方法名：SetBleServiceUUID //H5入参： {'BleServiceUUID' : ‘蓝牙模块的ServiceUUID’} |
无 | 非必须：已有默认值，有个人需求可修改此值 默认值： 0000fee0-0000-1000-8000-00805f9b34fb |
| 蓝牙模块：获取蓝牙连接状态 步骤序列：⑥ |
window.WebViewJavascriptBridge.callHandler( , 'GetBleConnectState' , {} , function (responseData) { } ); |
//H5调用方法名：GetBleConnectState
|
//原生返回结果示例： {‘BleConnectState’ ：1} 参数解释： 'BleConnectState'：参数名 1：已连接 2：未连接 |
|
| 蓝牙模块：暂停蓝牙扫描 | window.WebViewJavascriptBridge.callHandler( , 'StopBleScan' , {} , function (responseData) { } ); |
//H5调用方法名：StopBleScan |
//原生返回结果示例： {‘BleScanResult’ ：0} 参数解释： BleScanResult ：参数名 0：设备数量 （0：无扫描到任何设备，1：已扫描到相关设备） |
//callHandler不返回数据 备注：一定要注意！！！ 提供此方法，为了H5触发返回键的时候停止扫描， 同时，原生会返回一次扫描结果，H5触发返回时，应该屏蔽这个结果的接收 |
| 蓝牙模块：断开蓝牙连接 | window.WebViewJavascriptBridge.callHandler( , 'DisconnectBle' , {} , function (responseData) { } ); |
//H5调用方法名：DisconnectBle | 建议 | 建议：H5触发返回时同时调用此方法 |
| 蓝牙模块：接收蓝牙回复 步骤序列：④ 备注：H5接入此方法接受蓝牙设备回复 |
无 | 无 | //原生返回结果示例： {‘BleCallBackMsg’ ：“FF0123”} 参数解释： 'BleCallBackMsg'：参数名 "FF0123"：蓝牙回复指令 |
//callHandler不返回数据 备注：H5通过“BleCallBack”接收蓝牙设备回复 |
| 蓝牙模块：打开通知回调 步骤序列：③ 备注：H5接入此方法收打开蓝牙通知回调 |
无 | 无 | //原生返回结果示例： {‘BleNotifyState’ ：“1”} 参数解释： BleNotifyState：参数名 1：通知打开成功 2：无法发现服务UUID（建议：调用上面方法设置对应UUID） |
//callHandler不返回数据 备注：H5通过“BleNotify”方法获取打开通知结果 |
| 蓝牙模块：启动相机 | window.WebViewJavascriptBridge.callHandler( |
//H5调用方法名：’StarXgzCamera //H5入参解释： 'mode' : ‘需要输入的盖章模式（0/1）’ 0：拍照盖章 1：自由盖章 'surplusFre' : ‘需要输入的剩余可盖章次数 |
//原生返回结果示例： StringBase64字符串 |
//通过这个方法拿回调的图片数据，callHandler不返回数据 备注：H5通过“StarXgzCamera”方法获取拍照的base64编码字符串
|
| 蓝牙模块：启动扫描 步骤序列：① |
window.WebViewJavascriptBridge.callHandler( , 'StarBleScan' , {} , function (responseData) { } ); |
无 | //原生返回结果示例： {‘BleScanResult’ ：0} 参数解释： BleScanResult ：参数名 0：设备数量 （0：无扫描到任何设备，1：已扫描到相关设备） |
//callHandler不返回数据 备注：1、H5通过“StarBleScan”方法获取扫描结果 Android端公章蓝牙参数（有需求可联系开放设置接口）： 1、已设置扫描时长60秒 2、超时时长5秒 3、已取消自动重连 |
| 蓝牙模块：发送指令到蓝牙设备 步骤序列：⑤ |
window.WebViewJavascriptBridge.callHandler( , 'SendMsgToBle' , {‘BleOrder’:"FF123456"} , function (responseData) { } ); |
//H5调用方法名：SendMsgToBle //H5入参： {'BleOrder' : ‘需要发送的蓝牙指令’} |
//原生返回结果示例： {‘BleSendResult’ ：1} 参数解释： 'BleSendResult'：参数名 1：发送成功 |
//callHandler不返回数据 备注：H5通过“SendMsgToBle”方法获取指令发送结果 |
| 获取定位信息 | window.WebViewJavascriptBridge.callHandler(
'location'
, {}
, function (responseData) {
}
); |
无 | {"data":{"address":"广东省佛山市顺德区S43广珠西线高速33号靠近广东西安交通大学研究院","latitude":"22.811488","longitude":"113.332498"}} | address：定位地点 latitude：纬度 longitude：经度 |
| 相册和照相机 | window.WebViewJavascriptBridge.callHandler(
'platformCamera'
, {'maxImageNum': 5}
, function (responseData) {
}
); |
//maxImageNum：最大上传图片张数，最多支持9张 {'maxImageNum': 5} |
//返回一个BASE64字符串 “StringBase64字符串” |
//通过这个方法拿回调的图片数据，callHandler不返回数据，多张图片调用多次
window.WebViewJavascriptBridge.registerHandler('platformCamera', function (data) {
}) |
| 拍摄身份证（正面） | window.WebViewJavascriptBridge.registerHandler('frontPic', function (data) {
document.getElementById("test_img").src = "data:image/jpeg;base64," + data
document.getElementById("show").innerHTML = data
})
//call native method
window.WebViewJavascriptBridge.callHandler(
'frontPic'
, {}
, function (responseData) {
}
); |
无 | //返回一个BASE64字符串 “StringBase64字符串” |
//通过这个方法拿回调的图片数据，callHandler不返回数据 window.WebViewJavascriptBridge.registerHandler('frontPic', function (data) { }) |
| 拍摄身份证（反面） | window.WebViewJavascriptBridge.registerHandler('backPic', function (data) {
document.getElementById("test_img").src = "data:image/jpeg;base64," + data
document.getElementById("show").innerHTML = data
// document.getElementById("show").innerHTML = "收到了原生调js, data = " + data
// console.log("JS Echo called with:", data)
// responseCallback(data)
})
//call native method
window.WebViewJavascriptBridge.callHandler(
'backPic'
, {}
, function (responseData) {
}
); |
无 | //返回一个BASE64字符串 “StringBase64字符串” |
//通过这个方法拿回调的图片数据，callHandler不返回数据 window.WebViewJavascriptBridge.registerHandler('backPic', function (data) { }) |
| 手写签名 | window.WebViewJavascriptBridge.callHandler(
'platformSign'
, {}
, function (responseData) {
document.getElementById("test_img").src = "data:image/jpeg;base64," + responseData
}
); |
无 | //返回一个BASE64字符串 “StringBase64字符串” |
无 |
| 修改原生状态栏颜色 | window.WebViewJavascriptBridge.callHandler(
"platformStatusColor",
{ color: "6067bf" },
function(responseData) {}
); |
//color16进制颜色值
{ color: "6067bf" } |
无 | //这一版本，调用此插件，则原生不显示导航栏，然后状态栏颜色修改为H5传过来的颜色值 |
| 人脸识别 | window.WebViewJavascriptBridge.registerHandler('FaceLiving', function (data) {
document.getElementById("test_img").src = "data:image/jpeg;base64," + data
document.getElementById("show").innerHTML = data
})
//call native method
window.WebViewJavascriptBridge.callHandler(
'FaceLiving'
, {}
, function (responseData) {
}
); |
无 | //返回一个BASE64字符串 “StringBase64字符串” |
//通过这个方法拿回调的图片数据，callHandler不返回数据 window.WebViewJavascriptBridge.registerHandler('FaceLiving', function (data) { }) |
| 二维码 | window.WebViewJavascriptBridge.callHandler(
'QRCode'
, {}
, function (responseData) {
document.getElementById("show").innerHTML = responseData
}
); |
无 | //返回一个字符串 “String” |
无 |
| h5返回原生 | window.WebViewJavascriptBridge.callHandler( 'platformPop ' , {} , function (responseData) { } ); |
无 | 无 | 无 |
| h5 返回上一页 | window.WebViewJavascriptBridge.callHandler(
'platformBack'
, {}
, function (responseData) {
}
); |
无 | 无 | 无 |