zoukankan      html  css  js  c++  java
  • android 记一次富文本加载之路

    文章链接:https://mp.weixin.qq.com/s/69TRkmFL1aNuSqfw4ULMJw

    项目中经常涉及到富文本的加载,后台管理端编辑器生成的一段html 代码要渲染到移动端上面,一种方法是前端做成html页面,放到服务器上,移动端这边直接webView 加载url即可,还有一种后台接口直接返回这段html富文本的,String类型的,移动端直接加载的;具体的需求按实际情况而定,webview直接加载url的就不说了,这里主要说说关于直接加载html的。

    一段简单的html代码

    private String txt = "<div>
    " +
                "<a style="font-size: 3s0px" href="https://www.manjiexiang.cn/">程序猿TX</a>
    " +
                "</div>
    " +
                "<img src="https://www.manjiexiang.cn/upload/file/2018/05/01/qrcode_for_gh_4185bf56352c_258_1.jpg">
    ";
    

    原生webView 加载富文本

    原生的webView 直接加载

    webView.loadDataWithBaseURL(null,txt,"text/html","UTF-8",null);
    

    如果是textView 有setText(Html.fromHtml(txt))方法,但是这种加载方式,图片无法在textView显示。
    如果非要使用textView 加载...

    第三方库加载富文本

    这里我使用的是RichText 第三方库

    implementation ('com.zzhoujay.richtext:richtext:3.0.7'){
            exclude group: 'com.android.support'
    }
    

    同时排除了support包的冲突,使用上

    RichText.initCacheDir(this);
    
    RichText.from(txt).into(tv);
    

    更多的方法可以去github上查看,这种方式图片是可以加载的,但是css的样式是没法呈现的。

    以上的两种方式按自己的需求来进行使用的,试用于后台接口直接返回数据给移动端进行加载的。

    加载html文件

    一般的webView直接加载url体验上没那么流畅,相对的加载html文件会好点。后台依旧返回html数据给移动端,前端负责写html 文件模板,android将html文件放在assets 文件夹下面,通过webView.loadUrl("file:///android_asset/**.html")加载,至于数据,就是移动端与前端的交互了,之前推荐过一个三方库 android与js的交互之jsbridge使用
    ,通过这种方式将数据传递给前端,同时可以监听到js的方法调用。
    这种方式更加适用于一个页面模板可以反复使用的,后台返回不同的数据进行加载。一个场景就是 viewpager里面的每个fragment页面结构相同,如果使用url加载,每个fragment里的webview去加载一个url,这种在体验上就不是很优雅,而使用html文件加载的方式,后台可以返回list 数据给移动端,对应的去用webview加载本地文件,把各项的数据传给前端展示,加载渲染的速度上会快点。当然如果原生的可以直接渲染页面的,优先原生的。
    如果是那种单页面,只是浏览功能的,类似于 "关于我们" 那种页面可以直接用url加载的。

    这篇文章主要介绍的是关于html 加载的,目前我们使用的是第三种方式的,不同的需求场景得根据各个项目来定的,关于第三种加载 html 文件的,后续再写一篇文章介绍移动端与前端交互的,而且我们加载的富文本内容相对的也不一样。

    欢迎关注我的个人博客:https://www.manjiexiang.cn/

    更多精彩欢迎关注微信号:春风十里不如认识你
    一起学习,一起进步,欢迎上车,有问题随时联系,一起解决!!!

  • 相关阅读:
    Spring Boot2 系列教程(二十)Spring Boot 整合JdbcTemplate 多数据源
    Spring Boot 如何给微信公众号返回消息
    Spring Boot2 系列教程(十九)Spring Boot 整合 JdbcTemplate
    Spring Boot2 系列教程(十八)Spring Boot 中自定义 SpringMVC 配置
    Spring Boot 开发微信公众号后台
    Spring Boot2 系列教程(十七)SpringBoot 整合 Swagger2
    Spring Boot2 系列教程(十六)定时任务的两种实现方式
    Spring Boot2 系列教程(十五)定义系统启动任务的两种方式
    Spring Boot2 系列教程(十四)CORS 解决跨域问题
    JavaScript二维数组
  • 原文地址:https://www.cnblogs.com/taixiang/p/9866148.html
Copyright © 2011-2022 走看看