android DSBridge混合开发交互利器

最新推荐文章于 2024-07-01 12:48:53 发布

oneblue123

最新推荐文章于 2024-07-01 12:48:53 发布

阅读量2.6k

点赞数

分类专栏： android 文章标签： native js 交互混合开发 hybrid

本文链接：https://blog.csdn.net/oneblue123/article/details/79399028

版权

android 专栏收录该内容

87 篇文章 1 订阅

订阅专栏

腾讯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

oneblue123

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
android DSBridge混合开发交互利器

腾讯X5内核支持：https://github.com/wendux/DSBridge-Android/tree/x5-3.0Android studio配置如下：添加 JitPack repository 到gradle脚本中allprojects { repositories { ... maven { url 'https://jitpack.io' } }}2.dep...
复制链接

扫一扫

专栏目录