摘要：傳值給原生通過(guò)方法傳值，簡(jiǎn)單模擬了點(diǎn)擊事件來(lái)傳遞。第一個(gè)參數(shù)是約定注冊(cè)的名稱，與原生接受處方法名一致第二個(gè)參數(shù)是要傳遞的值第三個(gè)參數(shù)是接受原生返回的回調(diào)。

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

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

設(shè)函數(shù)

后的顯示效果

同時(shí)還需要與js進(jìn)行交互，這里選用 DSBridge，支持X5內(nèi)核。

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

html 文件里需要引用這個(gè)庫(kù)提供的js文件 dsbridge 的相對(duì)路徑。
同時(shí)加上

適應(yīng)手機(jī)屏幕的大小
準(zhǔn)備一個(gè)簡(jiǎn)單的html文件

div 塊用于展示html代碼的

通過(guò)webView.callHandler() 方法調(diào)用
第一個(gè)參數(shù)是約定注冊(cè)的名稱，與js接受處一致；
第二個(gè)參數(shù)是要傳遞的值，這里將data轉(zhuǎn)成了 json String 的傳給前端；
第三個(gè)參數(shù)是接受js返回的回調(diào)，可用于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接受傳值，直接通過(guò)dsBridge.register() 方法接受
第一個(gè)參數(shù)是上面的注冊(cè)名，與原生保持一致；
第二個(gè)是js的方法，參數(shù)data就是 傳遞的值，這里通過(guò)JSON.parse() 格式化，方法的return返回值就是傳遞給原生的，對(duì)應(yīng)上面的第三個(gè)參數(shù)。

js通過(guò)dsBridge.call() 方法傳值，簡(jiǎn)單模擬了點(diǎn)擊事件來(lái)傳遞。
第一個(gè)參數(shù)是約定注冊(cè)的名稱，與原生接受處方法名一致；
第二個(gè)參數(shù)是要傳遞的值；
第三個(gè)參數(shù)是接受原生返回的回調(diào)。

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

原生接受，通過(guò)JavascriptInterface注解，方法名與注冊(cè)名一致
第一個(gè)參數(shù)是傳遞的值；
第二個(gè)參數(shù)可回調(diào)信息給js；

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

public class JsApi {

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

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

歡迎關(guān)注我的個(gè)人博客：https://www.manjiexiang.cn/

更多精彩歡迎關(guān)注微信號(hào)：春風(fēng)十里不如認(rèn)識(shí)你
一起學(xué)習(xí)，一起進(jìn)步，歡迎上車，有問(wèn)題隨時(shí)聯(lián)系，一起解決！?。?/p>