文章链接：https://mp.weixin.qq.com/s/Iqd0dKM-ZW4UwkIgSTnvYg
在上一篇文章「android 记一次富文本加载之路」中 介绍了关于android加载富文本的方法，其中提到的加载html 文件的，app拿到后台的json格式数据，传到html模板文件里进行渲染交互，如下的一段html代码
这段代码在部分手机上会显示异常，类似这种
image
这里使用腾讯的X5WebView ，加上适应屏幕大小
后的显示效果
image
同时还需要与js进行交互，这里选用DSBridge，支持X5内核。
gradle 关联
implementation'com.github.wendux:DSBridge-Android:x5-3.0-SNAPSHOT'
使用
html 文件里需要引用这个库提供的js文件<script src="dsbridge.js"></script>dsbridge 的相对路径。
同时加上
适应手机屏幕的大小
准备一个简单的html文件
<!DOCTYPE html>Title
div 块用于展示html代码的
原生传递值给js
通过webView.callHandler() 方法调用
第一个参数是约定注册的名称，与js接受处一致；
第二个参数是要传递的值，这里将data转成了 json String 的传给前端；
第三个参数是接受js返回的回调，可用于js接受成功后，再去通知原生。
HtmlData data =newHtmlData();data.html = txt;webView.callHandler("nativeToJs",newObject[]{newGson().toJson(data)},newOnReturnValue() {@OverridepublicvoidonValue(String o){ }});
js接受传值，直接通过dsBridge.register() 方法接受
第一个参数是上面的注册名，与原生保持一致；
第二个是js的方法，参数data就是 传递的值，这里通过JSON.parse() 格式化，方法的return返回值就是传递给原生的，对应上面的第三个参数。
dsBridge.register('nativeToJs',function(data){varvalue =JSON.parse(data);document.getElementById("test").innerHTML = value.html;return"success"});
js传值给原生
js通过dsBridge.call() 方法传值，简单模拟了点击事件来传递。
第一个参数是约定注册的名称，与原生接受处方法名一致；
第二个参数是要传递的值；
第三个参数是接受原生返回的回调。
functiontest(){ dsBridge.call("jsToNative","test",function(res){console.log(res) });}
原生接受，通过JavascriptInterface注解，方法名与注册名一致
第一个参数是传递的值；
第二个参数可回调信息给js；
webView.addJavascriptObject(newJsApi(),null);publicclassJsApi{@JavascriptInterfacepublicvoidjsToNative(Object msg, CompletionHandler<String> handler){ handler.complete(msg+"回调给js"); }}
这里介绍的是简单的原生js交互的使用，更多的可以参考github文档https://github.com/wendux/DSBridge-Android
网友评论