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

时间：2019-06-29 12:50:45 阅读：377 评论：0 收藏：0 [点我收藏+]

标签：string 字符程序支付宝 ext ons onload ack 注意事项

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

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

标签：string 字符程序支付宝 ext ons onload ack 注意事项

原文地址：https://www.cnblogs.com/LiCoco/p/11106192.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行