DSBridge is currently the easiest cross-platform (IOS/Android) javascript bridge (native and JS bridge) on the planet to use and support synchronous invocation. DSBridge 2.0 update supports “native multiple returns”. This greatly facilitates the scenario where NATvie needs to return data to JS for many times when JS calls native methods.

Post the DSBridge Github address first

DSBridge-IOS:github.com/wendux/DSBr…

DSBridge – Android: [github.com/wendux/DSBr…

What is “multiple returns”?

Normally, calling a method returns a result, one to one. Now, consider the following scenario:

There is a web page embedded in the app that displays a list of documents to download. Click the download button corresponding to the corresponding file in the web page to start downloading the file, and display the download progress at the bottom of the file display item.

Thinking: We implement the function of file download in Natvie. When clicking on an item on the web page, we call Native’s download method through JS. During the download process, Native keeps returning the progress to JS, and then JS updates the progress bar on the web page. The feature of such call is one js call, corresponding to native’s “multiple return”. Considering that many time-consuming tasks of Native may be returned multiple times (such as return progress), DSBridge 2.0 supports “multiple return”. Using DSBridge can be very convenient to deal with this kind of case.

The sample

Let’s simulate a function that calls a timer:

Native: provides a countdown API named callProgress. Its function is to start a timer, count down 10 seconds, and output the remaining time to JS every second.

JS: Call the countdown API provided by Native to update the remaining time (seconds) to the web page.

Let’s see what happens when you click:

The countdown

Web side:

<div class="btn" onclick="callProgress()"> Multiple callback <span id='progress'></span></div>

 function callProgress(){
      // Call the callProgress provided by Native
       dsBridge.call("callProgress".function (value) {
             // Displays the remaining time
             document.getElementById("progress").innerText=value
      })
 }Copy the code

Natvie side:

Android

@JavascriptInterface
public void callProgress(JSONObject jsonObject, final CompletionHandler handler) throws JSONException {

        new CountDownTimer(11000.1000) {
            int i=10;
            @Override
            public void onTick(long millisUntilFinished) {
               // Returns the remaining time, which will be called multiple times
                handler.setProgressData((i--)+"");
            }
            @Override
            public void onFinish(a) {
                // End the call
                handler.complete("");
            }
        }.start();
 }Copy the code

Note: setProgressData can be called multiple times, and each time it is called, the JS side receives data once. If complete is called, the call ends, the handler is invalidated, and setProgressData cannot be called after complete is called.

IOS

- (void)callProgress (NSDictionary *) args (void (^)(NSString * _Nullable result,BOOL complete))completionHandler { value=10; // Save handler hanlder=completionHandler; / / start the timer timer = [NSTimer scheduledTimerWithTimeInterval: 1.0 target: self selector: @ the selector (the userInfo onTimer) : nil repeats:YES]; } -(void)onTimer:t{ if(value! Hanlder ([NSString stringWithFormat:@"%d",value--],NO); }else{// End call hanlder(@"",YES); [timer invalidate]; }}...Copy the code

Handler (NSString * _Nullable result,BOOL complete)

Result: Data returned to JS.

Complete: indicates whether the call ends. Complete is YES, and after the call, the call ends and the handler becomes invalid.

For a complete example, see the demo that comes with DSBridge:

DSBridge-IOS:github.com/wendux/DSBr…

DSBridge-Android:github.com/wendux/DSBr…

The last

If you like DSBridge, welcome star!