跨平臺混合開發之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 [email protected]

初始化

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