cml小程序富文本解析

描述下小程序富文本解决方案

使用插件 Parser富文本插件

点git: https://github.com/jin-yufeng/Parser

最近公司在开发微信小程序，一些资讯的详情内容是HTML富文本格式的的，但是微信小程序不能直接解析HTML，需要将内容中的HTML标签转换成微信小程序所支持的标签。

因为cml 官网的rich-text : 组件并不支持 HTML 标签格式,

cml rich-text: https://cmljs.org/components/richtext.html

为了弥补这一不足, 寻找网络

后来找到了一个很好用的插件：Parser。

今天分享给大家，插件Github地址：https://github.com/jin-yufeng/Parser

demo地址: https://github.com/dL-hx/cml-wx-richtext-demo

使用Parser解析富文本数据

1．将下载下来的插件文件夹复制到我们的项目根目录下（其中emojis文件可根据自己所需决定要或者不要，其他的文件必须要）

复制下方的文件

m-rich-text.interface

<script cml-type="interface">
/*
.interface 描述 组件的输入和输出。
定义一个inteface用于描述组件的属性和事件
1、 如何区分组件属性和事件？
通过类型来区分，事件为函数类型，属性为非函数类型
2、 如何定义组件属性
给interface添加同名的属性即可，指定类型
3、 如何定义组件事件
以事件名称为key值给interface定义属性，该属性是一个函数类型，返回值为void，
定义函数的第一个参数为自定义事件传递的detail对象类型
*/

interface MRichTextInterface {
  nodes: String,
}
</script>

m-rich-text.wx.cml

<template>
    <view class="contain">
        <!--
        在需要使用页面的 wxml 文件中添加
        -->
        <parser html="{{nodes}}" tag-style="{{tagStyle}}"></parser>
    </view>
</template>

<script>

  class MRichText implements MRichTextInterface {
    props = {
      nodes: {
        type: String,
        default: ''
      }
    }

    data = {
      tagStyle:{
        img:"width:100%!important;"
      }
    }

    computed = {
    }

    watch = {
    }

    methods = {
    }

    beforeCreate() {
    }

    created() {
    }

    beforeMount() {
    }

    mounted() {

    }

    beforeDestroy() {
    }

    destroyed() {
    }
  }

  export default new MRichText();
</script>

<style scoped>
    .contain{
        padding: 30cpx;
        font-size: 28cpx;
    }

</style>

<script cml-type="json">
  {
    "base": {
    "component": true,
      "usingComponents": {
      "parser":"./parser/parser"
    }
    }
  }
</script>

2.在需要使用该插件的（.json文件）中引入Parse模块

  {
    "base": {
    "component": true,
      "usingComponents": {
      "parser":"./parser/parser"
    }
    }
  }

3.在需要是用的m-rich-text中引入m-rich-text.cml(注意文件路径)

  "base": {
    "usingComponents": {
      "m-rich-text": "../../components/m-rich-text/m-rich-text"
     }
  },

4.进行数据绑定

页面层 Detail.cml

src\pages\detail\detail.cml

完成后页面就能够正常渲染HTML富文本数据了

资讯展示