问题描述: 在支付宝小程序中, 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, 请参考 先安装好 NPM
安装组件参考
来源: http://www.bubuko.com/infodetail-3107667.html