关于在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);
  参数说明:
  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,最后总结:问题很简单,主要是一开始思路没想对,以后遇到问题先不要急于去写,先仔细分析下问题,方向很重要,晚安??

以上是关于关于在taro使用wx.parse那些事的主要内容,如果未能解决你的问题,请参考以下文章

转载关于烂代码的那些事

关于代码调试de那些事

关于烂代码的那些事(下)

关于Android架构那些事

关于泛型那些事?

关于定时器的那些事!