您的位置:首页 > 其它

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

2019-08-20 00:52 295 查看

  好久不见,好久没更新博客,最近工作也比较忙,今天在使用解决富文本的时候遇到两个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,最后总结:问题很简单,主要是一开始思路没想对,以后遇到问题先不要急于去写,先仔细分析下问题,方向很重要,晚安😴

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: