关于在taro使用wx.parse那些事
Posted yyxh
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于在taro使用wx.parse那些事相关的知识,希望对你有一定的参考价值。
好久不见,好久没更新博客,最近工作也比较忙,今天在使用解决富文本的时候遇到两个bug,由于第一次使用wx.parse经验不足,走了很多弯路,今天特地把自己修复bug的感想分享一下,希望能帮助更多的小伙伴们,有错误的地方,请多多指教??。
首先在taro实现富文本的方式有多种,之前也是尝试过使用richText标签,但是感觉很不好用,一个原因是,每次要把原有后台返回的数据格式都要组装成特定的格式,过程很麻烦,还好后端比较友好给转好,不然就费劲了。关于richText的使用
最终使用了一次就放弃了,最后选择wx.parse,它是微信小程序专门用来解析富文本的,上手很快,只要把需要的包给引进来就行了,这里不详细介绍了,可以参考wx.parse,在使用过程中注意以下几点:
1、在渲染之前一定要引用这两个文件
import WxParse from ‘../../../components/wxParse/wxParse‘ import ‘../../../components/wxParse/wxParse.wxss‘
今天就是因为没有引入css文件排查了半天,不引入的现象就是,加粗加颜色的文本会换行显示,图片也不会自适应。其中的主要的原因在于思路错了,一开始一直以为,可以用css强制把它变成一行,后来发现行不通,因为层级太深,节点关系也不统一,接着试了第二中方法就是改变wxParse的代码,将strong的标签给转成text标签,这个方法太蠢了,最后在github上发现和我一样问题的朋友,引入wxss解决了问题。
2、在渲染组件之前
WxParse.wxParse(‘article‘, ‘html‘, res.data.msg, this.$scope, 5);
3、在标签中引入
<import src=‘../../../components/wxParse/wxParse.wxml‘ /> //注一定要有 <template is=‘wxParse‘ data=‘{{wxParseData:article.nodes}}‘/> //注:article和上面保持一致
ok,简单的一条数据就可以渲染成功了,问题来了,我们开发过程中经常会遇到像ugc列表一样的需求,不仅仅渲染的是一条数据,而是很多条json数据,怎么实现呢,我上网搜了一下,有很多解决方法,这里不多说了,主要是我试了没成功,感兴趣的可以试试,顺便教教我??,参考文件wxParse多数据循环使用,最终用了一个偷懒的方法解决了,思路就是自己封装了一个组件,然后遍历的时候每次调用这个组件,可以说简单粗暴而且有效,封装组件的过程就是实现一条数据的过程,可以参考1,2,3步骤。
这就是我今天遇到的两个关于taro富文本问题bug,最后总结:问题很简单,主要是一开始思路没想对,以后遇到问题先不要急于去写,先仔细分析下问题,方向很重要,晚安??
以上是关于关于在taro使用wx.parse那些事的主要内容,如果未能解决你的问题,请参考以下文章