提到的加载html 文件的，app拿到后台的json格式数据，传到html模板文件里进行渲染交互，如下的一段html代码

设函数
    
     
      f
     
     
      
       
        x
       
       
        ,
       
       
        y
       
      
     
     
      =
     
     
      
       
        
         
          x
         
         
          y
         
         
          sin
         
         
          
           1
          
          
           
            
             x
            
            
             2
            
           
           
            +
           
           
            
             y
            
            
             2
            
           
          
         
         
          ,
         
         
           
         
         
           
         
         
           
         
         
          
           x
          
          
           2
          
         
         
          +
         
         
          
           y
          
          
           2
          
         
         
          ≠
         
         
          0
         
         
          ,
         
        
       
       
        
         
          0
         
         
          ,
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
           
         
         
          
           x
          
          
           2
          
         
         
          +
         
         
          
           y
          
          
           2
          
         
         
          =
         
         
          0
         
         
          ,
         
         
           
         
         
           
         
         
           
         
        
       " class="wiris-tex">则
       
        
         f
        
        
         (
        
        
         x
        
        
         ,
        
        
         y
        
        
         )
        " class="wiris-tex">在点
        
         
          (
         
         
          0
         
         
          ,
         
         
          0
         
         
          )
         " class="wiris-tex">处复制代码
        
       
      
     
    

这段代码在部分手机上会显示异常，类似这种

这里使用腾讯的X5WebView ，加上适应屏幕大小

    复制代码

后的显示效果

同时还需要与js进行交互，这里选用 DSBridge，支持X5内核。

gradle 关联

implementation 'com.github.wendux:DSBridge-Android:x5-3.0-SNAPSHOT'复制代码

使用

html 文件里需要引用这个库提供的js文件<script src="dsbridge.js"></script> dsbridge 的相对路径。    同时加上

    复制代码

适应手机屏幕的大小    准备一个简单的html文件

    
            
        
    
复制代码

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