让小程序展现的富文本摆脱v-html束缚的两种替代方法

2023-11-24 00:54:35

引言

小程序开发中，使用富文本编辑器时，常常需要在页面展示动态生成的富文本内容，此时就需要一个把内容解析成HTML的库，以实现所见即所得的效果。在早期，小程序开发中使用v-html指令可以很好的实现这个需求。但随着小程序官方不断更新迭代，不再允许v-html指令出现在项目中。因此，我们需要寻找一种新的方式来实现富文本的展示。

富文本展现的两种替代方案

方案一：使用第三方库wxParse

wxParse是一款成熟的第三方库，可以将markdown、html片段解析成小程序富文本格式。使用起来非常简单，只需要在小程序项目中引入wxParse.js文件，然后在需要展示富文本的地方，使用wxParse.parse()方法进行解析即可。

引入wxParse库

import WxParse from '../../wxParse/wxParse.js';

使用wxParse解析富文本

var content = '<h1>Hello, world!</h1>';
var result = WxParse.parse(content);
this.setData({
  richText: result
});

方案二：使用小程序的markdown解析能力

小程序官方提供了一种markdown解析能力，可以通过将markdown格式的文本传递给小程序的wx.createSelectorQuery()方法，即可将markdown解析成小程序富文本格式。

使用小程序的markdown解析能力

var content = '# Hello, world!';
wx.createSelectorQuery().selectAll('.markdown-content').node(function (res) {
  res[0].setData({
    richText: res[0].getRelationNodes('.wx-markdown')[0].data.nodes
  });
}).exec();

对比

这两种方案各有优缺点，开发人员可以根据实际需求进行选择。

wxParse库的使用更加简单，只需要引入wxParse.js文件，即可使用。而小程序的markdown解析能力需要使用wx.createSelectorQuery()方法，代码量更多。
wxParse库支持更多的markdown语法，而小程序的markdown解析能力仅支持部分markdown语法。
wxParse库的解析速度更快，而小程序的markdown解析能力的解析速度较慢。