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 methodwindow.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 methodwindow.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 methodwindow.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) { }); | 无 | 无 | 无 |
更多相关文章
- android里ksoap2调用WebService
- Android(安卓)Retrofit OkHttp添加Interceptor拦截器设置POST请
- ViewPager用法(一)图片+原点+循环播放
- Android(安卓)开发中的 AsyncTask 的用法记录
- android gpuimage显示的缩放和剪裁模式
- Android(安卓)TableLayout表格布局
- Android(安卓)MediaPlayer研究问题
- 2011.10.18——— android 自定义Animation
- android 将图片通过base64转换为String 将图片String转换为Bitma