关于在taro使用wx.parse那些事

Posted 2020-11-10 yyxh

　　好久不见，好久没更新博客，最近工作也比较忙，今天在使用解决富文本的时候遇到两个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);

　　参数说明：

　　bindName绑定的数据名(必填)

　　type可以为html或者md(必填)

　　data为传入的具体数据(必填)

　　target为Page对象,一般为this(必填)

　　imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

3、在标签中引入

<import src=‘../../../components/wxParse/wxParse.wxml‘ />  //注一定要有
<template is=‘wxParse‘ data=‘{{wxParseData:article.nodes}}‘/>  //注：article和上面保持一致

ok，简单的一条数据就可以渲染成功了，问题来了，我们开发过程中经常会遇到像ugc列表一样的需求，不仅仅渲染的是一条数据，而是很多条json数据，怎么实现呢，我上网搜了一下，有很多解决方法，这里不多说了，主要是我试了没成功，感兴趣的可以试试，顺便教教我??，参考文件wxParse多数据循环使用，最终用了一个偷懒的方法解决了，思路就是自己封装了一个组件，然后遍历的时候每次调用这个组件，可以说简单粗暴而且有效，封装组件的过程就是实现一条数据的过程，可以参考1，2，3步骤。

这就是我今天遇到的两个关于taro富文本问题bug，最后总结：问题很简单，主要是一开始思路没想对，以后遇到问题先不要急于去写，先仔细分析下问题，方向很重要，晚安??