微信小程序学习笔记——常见组件【rich-text】导航组件

rich-text

https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

可以将字符串解析成对应标签，类似vue中v-html功能

<!--pages/richPage/richPage.wxml-->
<!-- 
  rich-text 富文本标签
  1 nodes属性来实现
     1 接收标签字符串
     2 接收对象数组

 -->
 <rich-text nodes="{{html1}}"></rich-text>
 <rich-text nodes="{{html2}}"></rich-text>

// pages/richPage/richPage.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //1. 标签字符串
    html1: '<div class="sku_window" id="skuWindow" ptag="7001.11.1"><div class="sku_choose_info"><h3>已选</h3><span id="skuChoose1">十代i5-1035G1|256G|独显|银，1个</span></               div><div class="sku_service" id="ybArea3"><span class="text">本商品支持保障服务、京东服务+，点击可选服务</span></div></div>',
    //2 对象数组
    html2:[
      {
        //div标签
        name:'div',
        //标签上有哪些属性
        attrs:{
          //标签上的属性 class  style
          class:'my_div',
          style:"color:red",

        },
        //3. 子节点
        children:[
          {
            name:'p',
            attrs:{},
            //放文本
            children:[
             {
              type:"text",
              text:'hello'
             }
            ]
          }
        ]
      }
    ]
  },
})