问题描述

在支付宝小程序中，rich-text的nodes 属性只支持使用 Array 类型，如果需要支持 HTML String，则需要自己将 HTML String 转化为 nodes 数组

解决方案

使用mini-html-parser2

代码样例

index.axml

<rich-text type="text" nodes="{{htmlData}}"></rich-text>

index.js

import parse from 'mini-html-parser2'; Page({ 　　data: { 　　　　htmlData:[] 　　},　 　　onLoad: function (options) { 　　　　var that = this;　　　　 　　　　var strhtml = `<div><span>test</span> <div><span>table test</span><table><thead><tr><th>title</th><th>title</th></tr></thead><tbody><tr><td colspan="2">yy</td><td>xx</td></tr></tbody></table></div></div>`; 　　　　parse(strhtml, (err, htmlData) => { 　　　　　　if (!err) { 　　　　　　　　that.setData({ 　　　　　　　　　　htmlData, 　　　　　　　　}); 　　　　　　} 　　　　}) 　　} })

注意事项

html字符串里的标签都要闭合，否则会转不了nodes数组，比如:<br>一定要是<br/>import parse from 'mini-html-parser2',有一个前提需要提前将mini-html-parser2安装到小程序根目录下，安装代码为npm install mini-html-parser2 --save（cmd命令行下安装，要先cd跳转到小程序目录，在执行安装命令）如果电脑没有安装npm，请参考 https://blog.csdn.net/wjnf012/article/details/80422313 先安装好npm安装组件参考 https://blog.csdn.net/mentalitys/article/details/89400478