、依赖:
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]}
1
2
补充: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());
1
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);
方案说明
因为是加载的本地文件,所以我们会遇见这些问题,但是在实际项目开发中,在调用接口请求数据、处理返回数据的过程中的耗时操作,再将数据设置上去的时候,是不会出现无法调用的异常的,所以在个人测试过程中,目前小编建议的解决方案是通过按钮点击展示触发是最方便的。
————————————————
版权声明:本文为CSDN博主「Adorable_Rocy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43409994/article/details/110679842