关于在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,最后总结:问题很简单,主要是一开始思路没想对,以后遇到问题先不要急于去写,先仔细分析下问题,方向很重要,晚安😴
- 关于int.TryParse的使用
- 关于JSON.stringify 与 JSON.parse使用小记(笔记向)
- C#关于使用枚举遇到的问题----Parse()方法使用注意
- 关于JSON.parse()方法的使用说明
- 关于Fragment使用的那些坑,给出一个完美的填坑方式!源码相送
- 关于git命令“git rev-parse --short HEAD”在android studio中使用与配置的个人探究
- [Android初级]关于Android使用Proguard混淆打包的那些事
- wxSqlite3类库的使用感受 - 关于乱码的问题
- 关于TagHelper的那些事情——自定义TagHelper(格式化输出、依赖注入使用)
- 关于metabase使用的那些坑
- 小程序wxParse的使用
- 小程序wxParse插件的使用
- jstl中关于fmt:parseDate和fmt:formatDate的综合使用
- 关于怎么使用Parse的说明API
- 使用 .NET 对事件进行编程以及VS.NET 2003 有那些新特性
- 关于何种情况下使用DataGrid、DataList或Repeater的一些讨论(2) ambushaa [翻译] [转]
- 关于动态SQL的使用
- 关于在jbuilder中使用jndi配置datasource(tomcat4、jbuilder9-x)
- 关于如何让 JBuilderX 使用中文字体
- 关于何种情况下使用DataGrid、DataList或Repeater的一些讨论(3) ambushaa [翻译] [转]