腾讯X5内核支持:https://github.com/wendux/DSBridge-Android/tree/x5-3.0
Android studio配置如下:
添加 JitPack repository 到gradle脚本中
allprojects { repositories { ... maven { url 'https://jitpack.io' } } }
dependencies {
compile 'com.github.wendux:DSBridge-Android:x5-3.0-SNAPSHOT'
}
使用事例如下:
(1)native调用js ,js处理完成之后,给native一个回调,通知完成了
1. js端注册一个函数 供native调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>native-call-js</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no"/> <!--require dsbridge init js--> <script src="https://unpkg.com/dsbridge/dist/dsbridge.js"> </script> </head> <body> <div> <h>结果:</h> <div id="result"></div> </div> <script> var result = document.getElementById('result'); dsBridge.register('addValue', function (r, l) { var s=r+l; result.innerHTML=s; return r + l; }) </script> </body> </html>
2.native端调用js中注册的函数,传递目标参数,接受js的回调
/** * JsBridge demo * @author summer * * */ public class MainActivity extends AppCompatActivity implements View.OnClickListener{ private DWebView mDWebView; private Button mBtnAddValue; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initEvent(); initWebView(); } private void initEvent() { mBtnAddValue.setOnClickListener(this); } private <T extends View> T getView(int id){ View view=findViewById(id); return (T) view; } private void initWebView() { DWebView.setWebContentsDebuggingEnabled(true); mDWebView.loadUrl("file:///android_asset/native-call-js.html"); } private void initView() { mDWebView=getView(R.id.webview); mBtnAddValue=getView(R.id.btn_add_value); } @Override public void onClick(View v) { switch (v.getId()){ case R.id.btn_add_value: addValue(); break; } } /** * native 调用js的方法, * js最后在将处理的结果回调给native * * */ private void addValue() { mDWebView.callHandler("addValue", new Object[]{1, 2}, new OnReturnValue<Integer>() { @Override public void onValue(Integer integer) { Toast.makeText(MainActivity.this ,integer+"", Toast.LENGTH_SHORT).show(); } }); } }
测试成功
2.js调用native
同理,在native中注册一个函数供js调用,native处理完成之后,将结果回调个js,通知js本次处理完成
native注册一个函数,供js调用,为了便于管理,将函数封装在一个类中:
/** * native注册函数,供js调用 * @author summer */ public class JsApi { //同步 @JavascriptInterface public String testSyn(Object msg) { return msg + "[syn call]"; } //异步回调 @JavascriptInterface public void testAsyn(Object msg, CompletionHandler<String> handler){ handler.complete(msg+" [ asyn call]"); } }
activity配置:
public class JsCallNativeActivity extends AppCompatActivity { private DWebView mDWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_js_call_native); initView(); initData(); } private void initData() { // set debug mode DWebView.setWebContentsDebuggingEnabled(true); mDWebView.addJavascriptObject(new JsApi(), null); mDWebView.loadUrl("file:///android_asset/js-call-native.html"); } private void initView() { mDWebView=getView(R.id.dwebview); } private <T extends View> T getView(int id){ return (T)findViewById(id); } }
js调用native方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js-call-native</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no"/> <!--require dsbridge init js--> <script src="https://unpkg.com/dsbridge/dist/dsbridge.js"> </script> <style> .btn { text-align: center; background: #d8d8d8; color: #222; padding: 20px; margin: 30px; font-size: 24px; border-radius: 4px; box-shadow: 4px 2px 10px #999; } .btn:active { opacity: .7; box-shadow: 4px 2px 10px #555; } </style> </head> <body> <div class="btn" οnclick="callSyn()">Synchronous call</div> <div class="btn" οnclick="callAsyn()">Asynchronous call</div> <script> function callSyn() { alert(dsBridge.call("testSyn", "testSyn")) } function callAsyn() { dsBridge.call("testAsyn","testAsyn", function (v) { alert(v) }) } </script> </body> </html>
so easy~~~
DsBridge的更多用法,可以参考官方demo.
DsBridge github:
https://github.com/wendux/DSBridge-Android/tree/x5-3.0