小程序11-rich-text组件

rich-text是富文本标签,可以将字符串解析成对应标签,类似vue中 v-html功能;其利用nodes属性接收输入的html值,nodes可以接收以下两种类型值:标签字符串 和 对象数组。

.wxml文件

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

.js文件

Page({
  data: {
    html1:`<h1>这里是h1标签,富文本会将元素当成HTML标签解析后输出--字符串格式</h1>`,
    html2:[
      {
        // 1 div标签 name属性来指定
        name:‘h1‘,
        // 2 标签上有哪些属性
        attrs:{
          // 标签上的属性 class style
          class:‘my_h1‘,
          style:"color:red;"
        },
        // 2 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致
        children:[
          {
            name:"p",
            attrs:[],
            // 放文本
            children:[
              {
                type:"text",
                text:"这里是h1标签,富文本会将元素当成HTML标签解析后输出--数组格式"
              }
            ]
          }
        ]  
      }
    ]
  },
})

 

小程序11-rich-text组件

 

小程序11-rich-text组件

上一篇:微信公众号怎么添加附件?比如word文档,pdf文件等


下一篇:小程序的数据实时更新websocket长连接