跨平台混合开发之DSBridge

DSBridge

简介

DSBridge是一个三端易用的现代跨平台 Javascript bridge， 通过它，你可以在Javascript和原生之间同步或异步的调用彼此的函数。

特性：

1. Android、IOS、Javascript 三端易用，轻量且强大、安全且健壮。

2. 同时支持同步调用和异步调用

3. 支持以类的方式集中统一管理API

4. 支持API命名空间

5. 支持调试模式

6. 支持API存在性检测

7. 支持进度回调：一次调用，多次返回

8. 支持Javascript关闭页面事件回调

9. 支持Javascript 模态/非模态对话框

10. 支持腾讯X5内核

 

更多详细用法，见文档：https://github.com/wendux/DSBridge-Android

 

各端接入

Android

1、安装与依赖

方式1、远程依赖

(1). 添加 JitPack repository 到gradle脚本中

allprojects {
  repositories {
   ...
   maven { url 'https://jitpack.io' }
  }
}

(2). 添加依赖

dependencies {
    //compile 'com.github.wendux:DSBridge-Android:3.0-SNAPSHOT'
    //support the x5 browser core of tencent
    //compile 'com.github.wendux:DSBridge-Android:x5-3.0-SNAPSHOT'
}

方式2、本地依赖

将文件路径为 https://github.com/wendux/DSBridge-Android/tree/master/dsbridge 复制出来，去掉npm，作为module引入项目中。

2、使用

新建JsApi类（方法被前端调用）

public class JsApi{
    //同步API
    @JavascriptInterface
    public String testSyn(Object msg)  {
        return msg + "［syn call］";
    }
​
    //异步API
    @JavascriptInterface
    public void testAsyn(Object msg, CompletionHandler<String> handler) {
        handler.complete(msg+" [ asyn call]");
    }
}

添加API类实例到 DWebView

import wendu.dsbridge.DWebView
...
DWebView dwebView= (DWebView) findViewById(R.id.dwebview);
dwebView.addJavascriptObject(new JsApi(), null);

在Java中调用 Javascript API（调用前端方法）

//无命名空间时
dwebView.callHandler("方法名",new Object[]{3,4},new OnReturnValue<Integer>(){
     @Override
     public void onValue(Integer retValue) {
        Log.d("jsbridge","call succeed,return value is "+retValue);
     }
});
//有命名空间时
dwebView.callHandler("命名空间名.方法名",new Object[]{3,4},new OnReturnValue<Integer>(){
     @Override
     public void onValue(Integer retValue) {
        Log.d("jsbridge","call succeed,return value is "+retValue);
     }
});

前端

安装

npm install dsbridge@3.1.3

初始化

var dsBridge=require("dsbridge")

JS注册API

//同步调用
var str=dsBridge.call("testSyn","testSyn");
​
//异步调用
dsBridge.call("testAsyn","testAsyn", function (v) {
  alert(v);
})
​
//注册 javascript API 
 dsBridge.register('addValue',function(l,r){
     return l+r;
 })

以上为在js中的写法。

 

在Vue中全局调用写法如下：

安装之后，新建一个dsbridge.js

var dsBridge = require("dsbridge");
export default {
  callmethod (name, data, callback) {
    callback(dsBridge.call(name, data, {msg: "callSyn"}));
  },
  registermethod (tag, callback) {
    dsBridge.register(tag, callback);
  }
}

在main.js中全局注册

import Bridge from '@/common/dsbridge.js'
Vue.prototype.$bridge = Bridge

然后就可以全局调用

this.$bridge.callmethod("方法名", value, (data) => {
   //do something
});
​
this.$bridge.registermethod("方法名", (data) => {
  //do something
});

注意！这里要使用箭头函数，不然可能会调用失败，接收不到data！

 

IOS

见文档地址：https://github.com/wendux/DSBridge-IOS