Android Agentweb三方 WebView 完成与 H5 的混合开发(一)_史大拿的博客-程序员宅基地

技术标签: Android进阶  webview  Agentweb  混合开发  android  Android  

Android Agentweb三方 WebView 完成与 H5 的混合开发

先来看今天完成的效果图:


图中的曲线图是 html写的,今天要完成的任务是采用三方的 WebView 完成Android 与 H5 的混合交互

步入正题

简单操作我就不说了,百度一下全长得一样,我就随便贴一个参考文档了

参考文档

导入依赖:

implementation ‘com.just.agentweb:agentweb-androidx:4.1.4’

添加必要权限:

 <!-- 8.0安装未知应用来源 -->
    <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
    <uses-permission
        android:name="android.permission.READ_PRIVILEGED_PHONE_STATE"
        tools:ignore="ProtectedPermissions" />
    <uses-permission android:name="android.permission.PERMISSION_GRANTED" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACTION_PICK" /> 
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
    <uses-permission android:name="android.permission.INTERNET"/>

html 的代码放在 main/assets 中:

在 Android 引用为:

"file:///android_asset/echartMoreLineStyle.html"

html 的代码我目前还不会写,直接拷贝的我们项目中的

使用:
首先需要在 xml 中获取 2 个’占位符’用来展示 webView 的效果
在这里插入图片描述

  • 红色:三条曲线 html 图
  • 黑色:一条曲线 html 图

打开百度页面

initBaiDu("http://www.baidu.com");


 private void initBaiDu(String url) {
    
        AgentWeb mAgentWeb = AgentWeb.with(this)
                //设置 WebView 占满
                .setAgentWebParent(frameLayout3, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT))
                //关闭指示器
                .closeIndicator()
                //设置报错布局
                .setMainFrameErrorView(R.layout.agentweb_error_page, -1)
                //打开其他应用时,弹窗咨询用户是否前往其他应用
                .setOpenOtherPageWays(DefaultWebClient.OpenOtherPageWays.ASK)
                .createAgentWeb()
                .ready()
                //打开页面
                .go(url);

        mAgentWeb.getAgentWebSettings().getWebSettings().setJavaScriptEnabled(true);
        mAgentWeb.clearWebCache();
    }

效果:

与 html 混合开发

先上代码:(一条线):

initWeb2("file:///android_asset/echart.html");

 private void initWeb2(String url) {
    
        AgentWeb mAgentWeb = AgentWeb.with(this)
                .setAgentWebParent(frameLayout2, new FrameLayout.LayoutParams(-1, -1))
                .closeIndicator()
                .setWebViewClient(new MyWebViewClient(xAxis, value, (view, xAxis, value) ->
                        WebViewUtil.getInstance().loadLine(view, xAxis.toString(), value.toString())))
                .setMainFrameErrorView(R.layout.agentweb_error_page, -1)
                .setOpenOtherPageWays(DefaultWebClient.OpenOtherPageWays.ASK)//打开其他应用时,弹窗咨询用户是否前往其他应用
                .createAgentWeb()
                .ready()
                .get();
        mAgentWeb.getAgentWebSettings().getWebSettings().setJavaScriptEnabled(true);
        mAgentWeb.clearWebCache();
        mAgentWeb.getUrlLoader().loadUrl(url);
    }

这里最关键的是setWebViewClient()方法,该方法是调用 html 的方法,最终会执行到WebViewUtil上

辅助图:
在这里插入图片描述
这里这么写是为了更好地扩展,不把所有的代码写到一个类里面,遵守单一职责原则

当然也可以这么写效果是一样的.
在这里插入图片描述
WebViewUtil类:

辅助图:
在这里插入图片描述
在这个类中,android 端调用了 html 的方法,就直接吧 html 的效果拉起来了,最终实现了开头说的效果;

三条线的和一条线的同样的道理

使用 Agentweb 解析 html 代码并展示

先看效果:

准备好 html 代码:

 String htmlData = "<p style=\"text-align: center;\"><span style=\"font-size:18px\"><strong>帮助说明</strong></span></p>\n" +
            "\n" +
            "<p style=\"text-align: justify;\"><span style=\"font-size:18px\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 我是 html 标签内容</span>\n" +
            "</p>\n" +
            "\n" +
            "<p style=\"text-align: justify;\"><span style=\"font-size:18px\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>\n" +
            "</p>\n" +
            "\n" +
            "\n" +
            "<p style=\"text-align:center\"><img alt=\"\" src=\"https://alifei02.cfp.cn/creative/vcg/800/new/VCG211147957933.jpg\"\n" +
            "                                  width=\"100%\"/></p>\n" +
            "\n" +
            "<p><span style=\"font-size:18px\"><span style=\"color:red\">注</span>:记得点赞评论收藏哦~~&nbsp;</span></p>";

使用:

AgentWeb mAgentWeb = AgentWeb.with(this)
                .setAgentWebParent(frameLayout, new LinearLayout.LayoutParams(-1, -1))
                .closeIndicator()
                .setMainFrameErrorView(R.layout.agentweb_error_page, -1)
                .setOpenOtherPageWays(DefaultWebClient.OpenOtherPageWays.ASK)//打开其他应用时,弹窗咨询用户是否前往其他应用
                .createAgentWeb()
                .ready()
                .get();
        mAgentWeb.getAgentWebSettings().getWebSettings().setJavaScriptEnabled(true);
        mAgentWeb.clearWebCache();
      
      //解析 html 文件
     mAgentWeb.getUrlLoader().loadData(htmlData,"text/html", "utf-8");
      

通过loadData来解析 html 代码

 mAgentWeb.getUrlLoader().loadData(htmlData,"text/html", "utf-8");

loadData参数:

  • 参数一:html 代码
  • 参数三:编码格式

完整代码

webView 其他操作 参考文档

下一章:Android Agentweb三方 WebView 完成与 H5 的混合开发(二)

原创不易,您的点赞就是对我最大的支持!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44819566/article/details/117075609

智能推荐

Hive 笔记之 加载数据时,找不到文件路径异常_IU菜籽U的博客-程序员宅基地_hiveloadhdfs数据找不到路径

一 异常截图如图:二 异常来源:向分区表中加载数据时如下图命令:红色部分为数据路径load data local inpath ' /sogou_3/500w/sogou.500w.utf8'  into table sogou_partition_3  partition(year='2011',month='12',day='30',hour='10')

6-3 django在线教育平台----用户登录2_嘟嘟ha的博客-程序员宅基地

1、填写用户名和密码,点击提交,查看参数request,交互方法是POST方法,可以看到POST中的参数是以键值对的形式存储的,是QueryDict

Centos 更改权限和用户组_Alice_Granger的博客-程序员宅基地_centos修改用户组权限

1、在命令行使用命令“ll”或者“ls -a”,可以查看文件或者文件的权限:-rw-r--r--. 1 root root 6 Nov 9 16:42 a.txt其中“-rw-r–r--”表示权限,一共有十个字符。第一个字符,如果是“-”则表示是文件,如果是“d”则表示是目录(directory)。后面9个字符每3个字符又作为一个组,则有3组信息(“rw-”、“r–”、“r–”),分别...

webpack4 学习时打包图片时遇到的问题_webmazha的博客-程序员宅基地

const path = require('path');const uglify = require('uglifyjs-webpack-plugin');//代码压缩插件const htmlPlugin = require('html-webpack-plugin');//html 打包工具const extractTextWebpackPlugin = require('extract...

使用k8s command + args 参数调试容器_shida_csdn的博客-程序员宅基地

有时候,我们自己制作的镜像通过 k8s启动时就不明原因地立即退出了,很难调试的说哇!这时候,我们可以通过更改容器的启动入口命令,使其不退出,比如改成 tail -f /etc/profile下面粘贴一个例子:apiVersion: v1kind: Podmetadata: name: command-demo labels: purpose: demonstrate

mysql 1118错误_mysql 5.7 建表时报错:ERROR 1118 (42000)_weixin_39542340的博客-程序员宅基地

该楼层疑似违规已被系统折叠隐藏此楼查看此楼mysql 5.7.20当我在建表时,完整报错信息如下:ERROR 1118 (42000): Row size too large (&gt; 8126). Changing some columns to TEXT or BLOB may help. In current row format, BLOB prefix of 0 bytes is s...

随便推点

Lazada包邮/捆绑销售促销活动怎么设置_MTGR0302的博客-程序员宅基地

包邮产品相比不包邮的产品的出单率会高很多包邮产品相比不包邮的产品的出单率会高很多,另外捆绑销售一方面能提高店铺产品客单价,另一方面还能提升店铺销量,所以这两者的设置也不可忽视。1.包邮设置包邮设置需要注意的相关事项:正常店铺产品控制好自身的销售利润合理的设置产品是否包邮(正常售卖产品建议常年设置包邮)。同时还要考虑活动期间是否要设置包邮:根据平台活动要求,跟进是否设置包邮,如:活动不要求包邮,那么可以减掉运费设置不包邮,通过更低的价格吸引消费者进入店铺,获取更多的流量。根

Android内存泄漏总结,面试总结_web大美女的博客-程序员宅基地

前段时间有人问我:「你是怎么成为一名软件架构师的?」我们就此探讨了必备技能、经验,以及储备相关知识所需的时间和精力。除此之外,我也回顾了自己走过的路、使用或尝试过的技术,以及我从那些五花八门的工作中学到的东西。一、关于Handler面试那些问题1、Handler Looper Message 关系是什么?2、Messagequeue 的数据结构是什么?为什么要用这个数 据结构?3、如何在子线程中创建 Handler?4、Handler post 方法原理?5、Android 消息机制的原理及源

浏览器插件之ActiveX开发(四)_weixin_30951231的博客-程序员宅基地

简单总结一下前几篇文章的内容,《浏览器插件之ActiveX开发(一)》简单介绍了一下如何在Vs.net 2008下用C++开发基于MFC的ActiveX插件,《浏览器插件之ActiveX开发(二)》介绍了开发插件时可能遇到的问题,《浏览器插件之ActiveX开发(三)》介绍了如何注册插件以及如何打包成cab文件。但是,到目前为止还没有专门提及如何在Web页面中调用插件,本文主要针对这个问题...

wpa_supplicant(转)_一朵时光_bobo的博客-程序员宅基地

wpa_supplicant代码初探收藏 这几天在尝试把wpa_supplicant移植到windows ce上,替换微软的WZC。先把源代码down下来,了解了一下大致的结构。  wpa_supplicant运行的整个核心就是eloop_run函数。这个函数负责处理应用程序的请求和数据链路层发来的EAPOL数据。eloop的针对不同的平台有好几个实现版本,我这里只讨论针对WIN32的

特征变换(3)小波变换_指尖热度的博客-程序员宅基地

笔记-印象笔记->小波变换篇   存在着大量的小波变换,每个适合不同的应用。完整的列表参看小波相关的变换列表,常见的如下:连续小波变换(CWT)离散小波变换(DWT)快速小波转换(FWT)小波包分解(Wavelet packet decomposition) (WPD)离散小波Beylkin(18)Coiflet(6, 12, 18, 24, 3

Vue源码阅读(24):v-on 指令的源码解析_纷飞丿的博客-程序员宅基地_v-on原理

今天讲讲 v-on 指令的底层实现原理。在 Vue 中,v-on 指令有两种用法,第一种是将 v-on 指令使用在自定义组件上,例如:&lt;my-component v-on:myEvent="doSomething"&gt;&lt;/my-component&gt;,使用 v-on 指令监听了组件的 myEvent 事件,回调函数是doSomething,当在组件中执行 this.$emit('myEvent') 时,会触发执行 doSomething 函数,有没有发现这和我上一篇文章中的 vm.$o.

推荐文章

热门文章

相关标签