简体中文文档

JDBridge JS

引入

1//npm install jdhybrid_jdbridge
2var JDBridge = require("jdhybrid_jdbridge")

Use APIs in the JDBridge object to communicate with native

Call Native Plugin

JS Call Native Plugin1 (callback only once)

1// call function
2var callback = function (result) {
3	showLog('Received result from MyNativePlugin, result = ' + result)
4}
5// NativePluginName 
6// action type:string
7// params type:string,json
8JDBridge.callNative('NativePlugin', {action: 'MyAction', params: params, success: callback})

JS Call Native Plugin2（Callback Continuouslly）

1var successCallback = function (result) {
2	showLog('Received success from MySequenceNativePlugin, result = ' + result)
3}
4var progressCallback = function (result, response) {
5	showLog('Received progress from MySequenceNativePlugin, complete = ' + response.complete + ', msg = ' + response.msg + ', result = ' + result)
6}
7
8JDBridge.callNative({name: 'NativePlugin', params: params, success: successCallback, progress: progressCallback})

JS Call Default Plugin

JS will call a default plugin if no plugin name specify clearly

1var callback = function (result, response) {
2	showLog('Received result from native, complete = ' + response.complete + ', msg = ' + response.msg + ', result = ' + result)
3}
4JDBridge.callNative({params: params, success: callback})

Register JSPlugin

Callback Only Once

1//JsPluginName
2//Sync return
3JDBridge.registerPlugin('JsPluginName', function (params) {
4  showLog('MySyncJsPlugin invoked by native, params = ' + JSON.stringify(params))
5  return JSON.stringify(result)
6})
7
8//Async return
9JDBridge.registerPlugin('JsPluginName', function (params, callback) {
10  showLog('MyAsyncJsPlugin invoked by native, params = ' + JSON.stringify(params))
11  callback(JSON.stringify(result))
12})
13
14//may fail
15JDBridge.registerPlugin('JsPluginName', function (params, callback) {
16  showLog('MyAsyncJsPlugin invoked by native, params = ' + JSON.stringify(params))
17  var isSuccess = true;//false
18  callback(JSON.stringify(result), isSuccess)
19})

Callback Continuouslly

1//JsPluginName
2//callback，complete indicates finished or not
3JDBridge.registerPlugin('JsPluginName', function (params, callback) {
4  showLog('MySequenceJsPlugin invoked by native, params = ' + JSON.stringify(params))
5  var isSuccess = true;//false
6  var time = 0
7  var timer = setInterval(function () {
8    var complete = false
9    time++
10    if (time == 10) {
11      clearInterval(timer)
12      complete = true
13    }
14    callback((time * 10) + '%, MySequenceJsPlugin returns ' + JSON.stringify(result), isSuccess, complete)
15  }, 500)
16})

Remove JSPlugin

1JDBridge.unregisterPlugin('JsPluginName')

Default JSPlugin

JS can register a default plugin that native can call without plugin name

1JDBridge.registerDefaultPlugin(function (params, callback) {
2  showLog('Default JS plugin invoked by native, params = ' + JSON.stringify(params))
3  callback('Default JS plugin returns ' + JSON.stringify(params))
4})

JS Initial

Please use all js functions after JDBridge is initialized. You can use following code to get called after initialized.

1function connectJDBridge(callback) {
2  if (window.JDBridge) {
3  	callback(JDBridge)
4  } else {
5  	window.addEventListener(
6  		'JDBridgeReady',
7  		function () {
8  			callback(JDBridge)
9  		},
10  		false
11  	);
12  }
13}
14
15//run this function
16connectJDBridge(function (bridge) {
17  showLog('JDBridge is ready.')
18  //do your work with JDBridge
19})

Debug Mode

By default, JDBridge will not show logs. You can enable debug mode to show them.

1JDBridge.setDebug(true);

WebView Event

We defined webview event mechanism with a friendly way ----- window.addEventListener

XWebView Default Event

• webView visible

1    window.addEventListener('ContainerShow', function(event){
2        alert(event);
3    }, false);
4    window.addEventListener('ContainerHide', function(event){
5        alert(event);
6    }, false);

• App enter foreground/background(only iOS)

1    window.addEventListener('AppShow', function(event){
2        alert(event);
3    }, false);
4    window.addEventListener('AppHide', function(event){
5        alert(event);
6    }, false);

Listen Custom Event

1window.addEventListener('customEvent', function(event){
2	alert(JSON.parse(event.params));
3}, false);