原生Js交互之DSBridge

jemygraw 發布于2019-08-23 12:44 / 3082人閱讀

摘要：傳值給原生通過方法傳值，簡單模擬了點擊事件來傳遞。第一個參數是約定注冊的名稱，與原生接受處方法名一致第二個參數是要傳遞的值第三個參數是接受原生返回的回調。

文章鏈接：https://mp.weixin.qq.com/s/Iqd0dKM-ZW4UwkIgSTnvYg

在上一篇文章「android 記一次富文本加載之路」中介紹了關于android加載富文本的方法，其中提到的加載html 文件的，app拿到后臺的json格式數據，傳到html模板文件里進行渲染交互，如下的一段html代碼

設函數

后的顯示效果

同時還需要與js進行交互，這里選用 DSBridge，支持X5內核。

gradle 關聯

implementation "com.github.wendux:DSBridge-Android:x5-3.0-SNAPSHOT"

使用

html 文件里需要引用這個庫提供的js文件 dsbridge 的相對路徑。
同時加上

適應手機屏幕的大小
準備一個簡單的html文件




    
    Title

div 塊用于展示html代碼的

原生傳遞值給js

通過webView.callHandler() 方法調用
第一個參數是約定注冊的名稱，與js接受處一致；
第二個參數是要傳遞的值，這里將data轉成了 json String 的傳給前端；
第三個參數是接受js返回的回調，可用于js接受成功后，再去通知原生。

HtmlData data = new HtmlData();
data.html = txt;
webView.callHandler("nativeToJs", new Object[]{new Gson().toJson(data)}, new OnReturnValue() {
    @Override
    public void onValue(String o) {
        
    }
});

js接受傳值，直接通過dsBridge.register() 方法接受
第一個參數是上面的注冊名，與原生保持一致；
第二個是js的方法，參數data就是傳遞的值，這里通過JSON.parse() 格式化，方法的return返回值就是傳遞給原生的，對應上面的第三個參數。

js傳值給原生

js通過dsBridge.call() 方法傳值，簡單模擬了點擊事件來傳遞。
第一個參數是約定注冊的名稱，與原生接受處方法名一致；
第二個參數是要傳遞的值；
第三個參數是接受原生返回的回調。

function test(){
    dsBridge.call("jsToNative", "test", function (res) {
        console.log(res)
    });
}

原生接受，通過JavascriptInterface注解，方法名與注冊名一致
第一個參數是傳遞的值；
第二個參數可回調信息給js；

webView.addJavascriptObject(new JsApi(), null);

public class JsApi {

    @JavascriptInterface
    public void jsToNative(Object msg, CompletionHandler handler) {
        handler.complete(msg+"回調給js");
    }
}

這里介紹的是簡單的原生js交互的使用，更多的可以參考github文檔https://github.com/wendux/DSBridge-Android

歡迎關注我的個人博客：https://www.manjiexiang.cn/

更多精彩歡迎關注微信號：春風十里不如認識你
一起學習，一起進步，歡迎上車，有問題隨時聯系，一起解決！！！

GPU云服務器云服務器 DSBridge 原生js 排序原生js js原生動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98970.html

原生Js交互之DSBridge

摘要：傳值給原生通過方法傳值，簡單模擬了點擊事件來傳遞。第一個參數是約定注冊的名稱，與原生接受處方法名一致第二個參數是要傳遞的值第三個參數是接受原生返回的回調。文章鏈接：https://mp.weixin.qq.com/s/Iqd0dKM-ZW4UwkIgSTnvYg 在上一篇文章「android 記一次富文本加載之路」中介紹了關于android加載富文本的方法，其中提到的加載html...

chunquedong 2019-08-02 11:53 評論0 收藏0
一篇文章了解Js Bridge

摘要：安全安全是很重要的，現在有些實現中使用了，而在之前，存在任意代碼執行漏洞，這就會導致嚴重的安全問題。 showImg(https://segmentfault.com/img/bV4k9Q?w=719&h=372); 什么是JS Bridge 在大多數APP開發過程中，都會通過H5來實現部分功能，而Hybird APP基本90%以上都是H5。現在很少有純原生的APP。但是，由于H5頁面...

Karuru 2019-08-22 14:54 評論0 收藏0