DSBridge混合开发中利器，链接ios,andriod不再麻烦。

优点：

跨平台，同时支持ios和android
无论是natvie还是前端，使用都非常简单，极大的降低集成／学习成本
不仅支持异步调用，而且页支持同步调用（dsbridge是唯一一个支持同步调用的javascript bridge）]
支持进度回调，多次返回（常用于文件下载进度、计时器等）
支持腾讯x5内核

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

https://github.com/wendux/DSBridge-Android

iso和andriod怎么集成我就不懂了，我知道这是桥梁，我作为前端，知道怎么调用就行了，上代码。（源码里有这个文件）

<!DOCTYPE html>
<html>
<head lang="zh-cmn-Hans">
  <meta charset="UTF-8">
  <title>DSBridge Test</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://cdn.jsdelivr.net/npm/dsbridge/dist/dsbridge.js"> </script>
</head>
<style>
  .btn {
    text-align: center;
    background: #eee;
    color: #000;
    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>
<body>
<script type="text/javascript">
  document.write("<p>UserAgent: ")
  document.write(navigator.userAgent + "</p>")
</script>
<div class="btn" onclick="saveImage()">save image</div>
<div class="btn" onclick="callSyn()">Synchronous call</div>
<div class="btn" onclick="callAsyn()">Asynchronous call</div>
<div class="btn" onclick="callSynSwift()">Syn call (swift)</div>
<div class="btn" onclick="callAsynSwift()">Async call(swift)</div>
<div class="btn" onclick="callNoArgSyn()">Sync call without argument</div>
<div class="btn" onclick="callNoArgAsyn()">Async call without argument</div>
<div class="btn" onclick="echoSyn()">echo.syn</div>
<div class="btn" onclick="echoAsyn()">echo.asyn</div>
<div class="btn" onclick="callAsyn_()">Stress test，2K times consecutive asynchronous API calls</div>
<div class="btn" onclick="callNever()">Never call because without @JavascriptInterface
  annotation<br/>( This test is
  just for Android ,should be ignored in IOS )
</div>
<div class="btn" onclick="callProgress()">call progress <span id='progress'></span></div>
<div class="btn" onclick="hasNativeMethod('xx')">hasNativeMethod("xx")</div>
<div class="btn" onclick="hasNativeMethod('testSyn')">hasNativeMethod("testSyn")</div>



<script>

  function saveImage() {
    dsBridge.call("saveImagexxxxx","{\"imageData\":\"base64Image\"}", function (v) {
      alert(v)
    })

  }
  function callSyn() {
    alert(dsBridge.call("testSyn", "Hello"))
  }

  function callAsyn() {
    dsBridge.call("testAsyn","hello", function (v) {
      alert(v)
    })
  }

  function callSynSwift() {
    alert(dsBridge.call("swift.testSyn", "hello"))
  }

  function callAsynSwift() {
    dsBridge.call("swift.testAsyn","hello", function (v) {
      alert(v)
    })
  }

  function callAsyn_() {
    for (var i = 0; i < 2000; i++) {
      dsBridge.call("testAsyn",  "js+" + i, function (v) {
        if (v == "js+1999 [ asyn call]") {
          alert("All tasks completed!")
        }
      })
    }
  }

  function callNoArgSyn() {
    alert(dsBridge.call("testNoArgSyn"));
  }

  function callNoArgAsyn() {
    dsBridge.call("testNoArgAsyn", function (v) {
      alert(v)
    });
  }

  function callNever() {
    alert(dsBridge.call("testNever", {msg: "testSyn"}))
  }

  function echoSyn() {
    // call function with namespace
    var ret=dsBridge.call("echo.syn",{msg:" I am echoSyn call", tag:1});
    alert(JSON.stringify(ret))
  }

  function echoAsyn() {
    // call function with namespace
    dsBridge.call("echo.asyn",{msg:" I am echoAsyn call",tag:2},function (ret) {
      alert(JSON.stringify(ret));
    })
  }

  function callProgress() {
    dsBridge.call("callProgress", function (value) {
      if(value==0) value="";
      document.getElementById("progress").innerText = value
    })
  }

  function hasNativeMethod(name) {
    alert(dsBridge.hasNativeMethod(name))
  }


  dsBridge.register('addValue', function (r, l) {
    return r + l;
  })

  dsBridge.registerAsyn('append', function (arg1, arg2, arg3, responseCallback) {
    responseCallback(arg1 + " " + arg2 + " " + arg3);
  })

  dsBridge.registerAsyn('startTimer', function (responseCallback) {
    var t = 0;
    var timer = setInterval(function () {
      if (t == 5) {
        responseCallback(t)
        clearInterval(timer)
      } else {
        // if the 2nd argument is false,  the java callback handler will be not removed!
        responseCallback(t++, false)
      }
    }, 1000)

  })

  // namespace test for syn functions
  dsBridge.register("syn", {
    tag: "syn",
    addValue:function (r,l) {
      return r+l;
    },
    getInfo: function () {
      return {tag: this.tag, value:8}
    }
  })

  // namespace test for asyn functions
  dsBridge.registerAsyn("asyn", {
    tag: "asyn",
    addValue:function (r,l, responseCallback) {
      responseCallback(r+l);
    },
    getInfo: function (responseCallback) {
      responseCallback({tag: this.tag, value:8})
    }
  })

</script>
</body>
</html>

解释一下：

//  dsBridge是全局变量，调用他就可以调取原生方法，这里的saveImagexxxxx就是前后端互相定义的值了
// 第二个参数就是要传到app的数据格式了。后边函数就是回调了。就这么简单、
dsBridge.call("saveImagexxxxx","{\"imageData\":\"base64Image\"}", function (v) {
     alert(v)
})
              
// 还提供了一个是否是原生方法的函数
dsBridge.hasNativeMethod(name) 返回true或者false这种了。利用这个判断是不是在原生app内。
// 在谷歌浏览器里调试没问题，在火狐或者safir会吓跳，说什么地址不存在，手机端就不存在问题了。。

DSBridge混合开发中利器，链接ios,andriod不再麻烦。

推荐阅读