Android中 简洁优秀的AgentWeb框架基本使用

A）、依赖：

        implementation 'com.just.agentweb:agentweb-androidx:4.1.4'
        implementation 'com.just.agentweb:filechooser-androidx:4.1.4'
        implementation 'com.download.library:downloader-androidx:4.1.4'

B）、基本用法：

	@BindView(R.id.wb_orl)
    ConstraintLayout wbOrl;
		...
		
				AgentWeb.with(WbActivity.this)
                .setAgentWebParent(wbOrl, new ConstraintLayout.LayoutParams(-1, -1)) //-1是指父布局
                .useDefaultIndicator() //默认进度条 可带颜色 例如 0xffffff
                .createAgentWeb()
                .ready()
                .go("file:///android_asset/agent.html"); //本地html文件

1）、JAVA调用JS（数据都是虚拟生成的哦）

1.搭建实体类

public class WebAgentBean {

    private int id; 
    private String desc; //描述
    private List<String> tagNames; //标签名字
    private int[] topTemp; //最高气温
    private int[] minTemp; //最低气温
    
    }

2.准备数据源

 public String webAgentBeanToJsonString() {

        WebAgentBean webAgentBean = new WebAgentBean();
        webAgentBean.setId(101);
        webAgentBean.setDesc("AgentWeb 中实现JAVA与JS互调");
        List<String> weekList = new ArrayList<>();

        for (int position = 0; position < 7; position++) {
            weekList.add("星期" + (position + 1));
        }
        webAgentBean.setTagNames(weekList);
        int[] topTemp = new int[7];
        for (int i = 0; i < 7; i++) {
            topTemp[i] = (int) (Math.random() * 10 + 1);
        }
        webAgentBean.setTopTemp(topTemp);

        int[] minTemp = new int[7];
        Random random = new Random();
        float flag = 0f; //定义标志
        for (int i = 0; i < 7; i++) {
            flag = random.nextFloat();
            minTemp[i] = flag > 0.5 ? (int) (Math.random() * 10) : (int) (Math.random() * (-10));//[-10,10]区间
        }

        // 因为是模拟数据随机性比较大 ，所以进行数据处理 ， 最小值不能比最大值大 
        for (int i = 0; i < minTemp.length; i++) {
            if (minTemp[i] > topTemp[i]) {
                minTemp[i] = topTemp[i] - 1;
            }
        }

        webAgentBean.setMinTemp(minTemp);

        String jsonBean = new Gson().toJson(webAgentBean);

        return jsonBean;
    }
	

3.定义JS函数

    <script type="text/javascript">
//接受参数对象
 function loadWithAndroid(obj){
                 	...
                     }
                </script>

4.JAVA调用JS

 AgentWeb agentWeb = AgentWeb.with(WbActivity.this)
                .setAgentWebParent(wbOrl, new ConstraintLayout.LayoutParams(-1, -1))
                .useDefaultIndicator()
                .createAgentWeb()
                .ready()
                .go("file:///android_asset/agent.html");

     		   String jsonBean = webAgentBeanToJsonString();
     		           System.out.println(jsonBean);
                agentWeb.getJsAccessEntrace().quickCallJs("loadWithAndroid", jsonBean);

---

//jsonBean数据打印如下
"desc":"WebAgent 中实现JAVA与JS互调","id":101,"minTemp":[-5,4,5,0,6,3,-2],"tagNames":["星期1","星期2","星期3","星期4","星期5","星期6","星期7"],"topTemp":[9,5,7,7,10,4,8]}

补充：quickCallJs方法传入字符串参数（可传入多个参数）如下方重载方法

public interface QuickCallJs {

    @RequiresApi(Build.VERSION_CODES.KITKAT)
    void quickCallJs(String method, ValueCallback<String> callback, String... params);

    void quickCallJs(String method, String... params);

    void quickCallJs(String method);
}

5.Echarts数据解析处理

 function loadWithAndroid(obj){
            var myChart = echarts.init(document.getElementById('main')); //用来展示图标的div
                     var min_tmp = -1; //最小值
                     var xAxisIndex = -1; //x轴坐标
                     
                     obj.minTemp.forEach(function(item,index){
                        console.log(index+" min----->"+item)
                        if(min_tmp == -1)
                            min_tmp = item;
                        if(item <= min_tmp){
                            min_tmp = item;
                            xAxisIndex = index;
                        }

                     })
                     //遍历日期
                    obj.tagNames.map(function (param,index) {
                        console.log(param + "---->" + index)
                     })
// 指定图表的配置项和数据
var option = {
    	...
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: obj.tagNames <!-- 日期格式 -->
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C' <!-- 规划格式 -->
        }
    },
    series: [
        {
            name: '最高气温',
            type: 'line',
            data: obj.topTemp, <!-- 展示最高气温 -->
           ,
        {
            name: '最低气温',
            type: 'line',
            data: obj.minTemp, <!-- 展示最低气温 -->
         	
         		...
        }
    ]
};
                     myChart.setOption(option);
                     };

6.效果展示

柱状图展示：

柱状线性图展示：

2）、JS调用JAVA

1.定义需要调用的接口

     public class AgentWebInteface {
        @JavascriptInterface //一定要加
        public void complateWithJs(String str) {
            Toast.makeText(WbActivity.this, "JS调用JAVA完成" + str, Toast.LENGTH_SHORT).show();
        }
    }

2.web端 JS调用JAVA

function loadWithAndroid(obj){
                  window.android.complateWithJs("我是web应用端发送的数据"); 
                  ...
                  }

3.JAVA添加JS关联

agentWeb.getJsInterfaceHolder().addJavaObject("android", new AgentWebInteface());

4.结果展示

3）、踩坑说明

项目场景：

在进入Activity中直接调用JS

---

问题描述：

小编在进入Activity的时候直接调用了JS函数，但是此时是没有任何效果的，小编也在函数里面输出了语句，并且有个坑就是控制台并不会打印任何信息，而且还输出了一段乱码：

 function loadWithAndroid(obj){
            console.log("我进来了哦~")
}

输出如下乱码：

E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
	glUtilsParamSize: unknow param 0x000085b5
	D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
	D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
	D/eglCodecCommon: setVertexArrayObject: set vao to 2 (2) 0 0
	D/eglCodecCommon: setVertexArrayObject: set vao to 1 (1) 0 0
	D/eglCodecCommon: setVertexArrayObject: set vao to 3 (3) 0 0
	D/eglCodecCommon: setVertexArrayObject: set vao to 1 (1) 5 0
	E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
	glUtilsParamSize: unknow param 0x000085b5
	D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
	setVertexArrayObject: set vao to 0 (0) 0 0

---

原因分析：

1.方法名称有误

可能是在JAVA调用JS时，将JS函数名称写错了。

2.WEB端未完全渲染

小编猜测是因为加载WEB端的时候，WEB端还没有来得及完全 渲染 完毕，但是在JAVA中就已经被调用了，所以可能导致函数无法被调用的情况

---

尝试解决：

1）、小编尝试不通过JAVA调用JS方式（agentWeb.getJsAccessEntrace().quickCallJs(Method)）, 直接加载Html文件。

 结果：无法正常加载

2）、小编尝试通过点击事件触发JAVA调用JS事件

  结果：可以正常调用

3）、疑问？

 如果说不能让其自动加载，那每次都需要通过我们自己去调用函数，那这样是不是很麻烦呢？于是小编使用Handler消息类延时发送消息（如下），但是这样还是没有达到动态解决效果，这种体验还是极差的。

 new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                agentWeb.getJsAccessEntrace().quickCallJs("loadWithAndroid", jsonBean);
            }
        },3000);

---

4）、方案说明

 因为是加载的本地文件，所以我们会遇见这些问题，但是在实际项目开发中，在调用接口请求数据、处理返回数据的过程中的耗时操作，再将数据设置上去的时候，是不会出现无法调用的异常的，所以在个人测试过程中，目前小编建议的解决方案是通过按钮点击展示触发是最方便的。

小编也是查询了很多资料都没有找到类似于这种问题的博主，所以小编往后再揪出根源继续更新！