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不返回数据
window.WebViewJavascriptBridge.registerHandler('ConnectBleDevice', function (data) {
})

备注:1、H5通过“StarBleScan”方法获取蓝牙连接结果

           2、蓝牙意外断开会触发 {‘BleConnectResult’ :2} (连接异常)

 

蓝牙模块:设置需要连接蓝牙名称(必须)

window.WebViewJavascriptBridge.callHandler(
        , 'SetConnectBleName'
        , {'ConnectBleName' : ‘需要输入的参数名’}
        , function (responseData) {           
        }
);

//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不返回数据
window.WebViewJavascriptBridge.registerHandler('StarBleScan', function (data) {
})

备注:一定要注意!!!

提供此方法,为了H5触发返回键的时候停止扫描,

同时,原生会返回一次扫描结果,H5触发返回时,应该屏蔽这个结果的接收

蓝牙模块:断开蓝牙连接 window.WebViewJavascriptBridge.callHandler(
        , 'DisconnectBle'
        , {}
        , function (responseData) {           
        }
);
//H5调用方法名:DisconnectBle 建议 建议:H5触发返回时同时调用此方法

蓝牙模块:接收蓝牙回复

步骤序列:④

备注:H5接入此方法接受蓝牙设备回复

//原生返回结果示例:  {‘BleCallBackMsg’ :“FF0123”}

参数解释:

'BleCallBackMsg':参数名

"FF0123":蓝牙回复指令

//callHandler不返回数据
window.WebViewJavascriptBridge.registerHandler('BleCallBack', function (data) {
})

备注:H5通过“BleCallBack”接收蓝牙设备回复

蓝牙模块:打开通知回调

步骤序列:③

备注:H5接入此方法收打开蓝牙通知回调

//原生返回结果示例:  {‘BleNotifyState’ :“1”}

参数解释:

BleNotifyState:参数名

1:通知打开成功

2:无法发现服务UUID(建议:调用上面方法设置对应UUID)

//callHandler不返回数据
window.WebViewJavascriptBridge.registerHandler('BleNotify', function (data) {
})

备注:H5通过“BleNotify”方法获取打开通知结果

蓝牙模块:启动相机

window.WebViewJavascriptBridge.callHandler(
        , ’StarXgzCamera‘
        , {'mode' : ‘需要输入的盖章模式(0/1)’,'surplusFre' : ‘需要输入的剩余可盖章次数’}
        , function (responseData) {           
        }
);

//H5调用方法名:’StarXgzCamera

//H5入参解释:

'mode' : ‘需要输入的盖章模式(0/1)’

0:拍照盖章

1:自由盖章

'surplusFre' : ‘需要输入的剩余可盖章次数

//原生返回结果示例: 

StringBase64字符串

//通过这个方法拿回调的图片数据,callHandler不返回数据
window.WebViewJavascriptBridge.registerHandler('StarXgzCamera', function (data) {
})

备注:H5通过“StarXgzCamera”方法获取拍照的base64编码字符串

 

蓝牙模块:启动扫描

步骤序列:①

window.WebViewJavascriptBridge.callHandler(
        , 'StarBleScan'
        , {}
        , function (responseData) {           
        }
);

//原生返回结果示例:  {‘BleScanResult’ :0}

参数解释:

BleScanResult :参数名

0:设备数量 (0:无扫描到任何设备,1:已扫描到相关设备)

//callHandler不返回数据
window.WebViewJavascriptBridge.registerHandler('StarBleScan', function (data) {
})

备注: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不返回数据
window.WebViewJavascriptBridge.registerHandler('SendMsgToBle', function (data) {
})

备注: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) {    });

更多相关文章

  1. android里ksoap2调用WebService
  2. Android(安卓)Retrofit OkHttp添加Interceptor拦截器设置POST请
  3. ViewPager用法(一)图片+原点+循环播放
  4. Android(安卓)开发中的  AsyncTask 的用法记录
  5. android gpuimage显示的缩放和剪裁模式
  6. Android(安卓)TableLayout表格布局
  7. Android(安卓)MediaPlayer研究问题
  8. 2011.10.18——— android 自定义Animation
  9. android 将图片通过base64转换为String 将图片String转换为Bitma

随机推荐

  1. android:gravity 和 android:layout_Grav
  2. android 电容屏(三):驱动调试之驱动程序分析
  3. 跟我学Android(安卓)NDK开发(一)
  4. Android菜单详解(二)——创建并响应选项菜
  5. Android和PHP开发最佳实践
  6. android的测试工具CTS
  7. UI布局参数(持续更新)
  8. Android(安卓)SDK中 tools 工具介绍
  9. Android窗口治理机制
  10. Android应用资源总结二:Android的问号?和@