微信小程序解析富文本html2wxml插件版

本文介绍了如何在微信小程序中使用html2wxml插件来解析富文本。首先,文章指出了项目中遇到的富文本处理问题,以及wxParse等解决方案的不足。接着,详细讲解了html2wxml插件的配置步骤,包括在后台添加插件、修改app.json以及在页面中声明数据并渲染。此外,还提到了使用中可能遇到的网络错误和版本问题,以及解决办法。最后,作者提及了自建服务器组件版的替代方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html2wxml解析富文本

先说一下最近遇到的问题:

最近的项目中,请求的数据中,返回的数据字段是一段html富文本格式的html标签,虽然微信小程序官方提供了<rich-text>标签,还有就是像wxParse这样其他的解决方,但是因为没有去了解过不是太会使用,今天也是补习了下知识,但是也是感觉使用方面比较繁琐,而且阅读了官方文档网上也是搜索了一些知道他们是有很多标签不支持的而且像wxParse也是很出现很多的JavaScript的错误,我是在知道rech-text和wxParse之前知道的html2wxml这个插件,也是感觉使用起来很不错,像很多标签都是能渲染出来的也包括音频和视频标签,所以也是想写一篇博客给大家推荐一下如何使用以及使用的方法。

项目中有好几种使用方式

因为我是会一种方法就是插件的使用就简单的说一下使用方法吧
1.因为是第三方的插件,所以需要在微信小程序的后台添加一配置下这个插件,就能自动使用了,很方便
在这里插入图片描述
在这里插入图片描述
2.需要将以下代码添加到app.json里面


                
插件地址:https://github.com/kevenfeng/html-to-wxml如果前端技术比较牛,可以直接看github上面的demo。可以更好的理解用法。使用方法:1.引用插件var R_htmlToWxml = require(‘../../util/htmlToWxml.js’);//引入公共方法2.将html内容转成json数据R_htmlToWxml.html2json(“html内容”);转换后的json格式类型大概如下:3.吐到页面中显示<block wx:for="{{content}}"  wx:for-index="idy"  wx:for-item="cellData">         <block  wx:if="{{cellData.type == 'view'}}">             <view class="p">                 <block  wx:for="{{cellData.child}}" wx:key="text">                     <block  wx:if="{{item.type == 'a'}}">                         <text class="a" data-seccode="{{item.attr['data-seccode']}}" data-secname="{{item.attr['data-secname']}}" bindtap="stockClick">{{item.text}}</text>                     </block>                     <block  wx:else>                         <text>{{item.text}}</text>                     </block>                 </block>             </view>         </block>         <block wx:if="{{cellData.type == 'img'}}">             <image class="img" data-index="{{idy}}" style="height: {{cellData.attr.height?cellData.attr.height:0}}px"  mode="aspectFit" src="{{cellData.attr.src}}" bindload="imageLoad"></image>         </block>     </block>demo效果:由于小程序图片的高度没法自适应,需要给图片设置高度,所以需要在图片加载完以后,获取图片高度,等比算出显示图片高度,赋值给对应图片通常我们抓取的内容是html页面,特别是像资讯这一类的,如果在小程序里面显示文章内容,此插件提供了一种解决方案,希望对大家有用。在客户端中用native显示html页面体验上面没有native的好,htmlToWxml插件给客户端中用native的方式显示html内容提供了一种解决方案
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值