zoukankan      html  css  js  c++  java
  • 【支付宝小程序】 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
                      
     
  • 相关阅读:
    framwork NHibernate
    java eclise的配置
    java jdk环境变量配置
    第零章 关于课程教材与讲义
    ActiveMQ(5.10.0)
    ActiveMQ(5.10.0)
    ActiveMQ(5.10.0)
    ActiveMQ(5.10.0)
    ActiveMQ(5.10.0)
    ActiveMQ(5.10.0)
  • 原文地址:https://www.cnblogs.com/LiCoco/p/11106192.html
Copyright © 2011-2022 走看看