微信小程序-rich-text 富文本标签

微信小程序-rich-text 富文本标签

demo.wxml

<!-- 
  rich-text 富文本标签
  1 nodes 属性来实现
    1 接收标签字符串 最常用的
    2 接收对象数组

 -->
 <rich-text nodes="{{html}}"></rich-text>

demo.js

// pages/demo11/demo11.js
Page({

 /**
  * 页面的初始数据
  */
 data: {
   // 1 标签字符串 最常用的
   // html:'<div class="sc-bwzfXH Humzi"><div class="sc-htpNat kGYGSu"></div><div class="sc-bxivhb ALWfo"><div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://pages.tmall.com/wow/heihe/act/upr?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_22605%22%7D&amp;spm=a2141.1.iconsv5.1&amp;scm=1007.home_icon.tmallxp.d&amp;wh_pid=act/indexv6&amp;disableNav=YES&amp;wh_biz=tm"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">天猫新品</p></a><a class="sc-EHOje hrPgER" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_22605%22%7D&amp;spm=a2141.1.iconsv5.6&amp;scm=1007.home_icon.chongzzx.d&amp;_wml_code=Vfw8V4IdfflvFcsPv2fKDCLgFlhCoOQ406ZO9WKS70zNVh2FhuClrYZQHV%2BUj8rweMrPJgOrvqON3zeUHJMIALqc03AQZnf3hmtKmJM2g5PuR9UuzwivVDM%2Bil4nBDGBPXlfSqZZA3CdATGQpVOeZMO8SbyJvaZdoC89%2B2Gg8FZsD4wqDUKs7VcgTjZxbgdE&amp;subSource=stcz_1"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1llI3f4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">充值中心</p></a></div></div></div>'
   // 2 对象数组
   html:[{
       // 1 div标签 name属性来指定
       name:"div",
       // 2 标签上有哪些属性
       attrs:{
         // 标签上的属性 class style
         class:"my_div",
         style:"color:red;"
       },
       // 3 子节点 children 要接收的数据类型和 nodes 第二种渲染方式的数据类型一致
       children:[{
           name:"p",
           attrs:{},
           // 放文本
           children:[{
               type:"text",
               text:"hello world！！！我 *******"
           }]
       }]
   }]
 }
})

示例