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

Posted 2022-02-23 licoco

问题描述：在支付宝小程序中，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