【支付宝小程序】 rich-text的应用

问题描述

在支付宝小程序中，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