mpvue-wxParse 适用于 Mpvue 的微信小程序富文本解析组件

支持 Html、Markdown 转 Wxml 可视化，修改自: wxParse

扫码体验

属性

| 名称 | 类型 | 默认值 | 描述 | | ------------ | -------- | ------------ | ------------------ | | loading | Boolean | false | 数据加载状态 | | className | String | — | 自定义 class 名称 | | content | String | — | 渲染内容 | | noData | String | 数据不能为空 | 空数据时的渲染展示 | | startHandler | Function | 见源码 | 自定义 parser 函数 | | endHandler | Function | null | 自定义 parser 函数 | | charsHandler | Function | null | 自定义 parser 函数 | | imageProp | Object | 见下文 | 图片相关参数 |

自定义 parser 函数具体介绍

• 传入的参数为当前节点 node 对象及解析结果 results 对象，例如 startHandler(node, results)
• 无需返回值，通过对传入的参数直接操作来完成需要的改动
• 自定义函数会在原解析函数处理之后执行

imageProp 对象具体属性

| 名称 | 类型 | 默认值 | 描述 | | ----------- | ------- | ----------- | -------------------- | | mode | String | 'aspectFit' | 图片裁剪、缩放的模式 | | padding | Number | 0 | 图片内边距 | | lazyLoad | Boolean | false | 图片懒加载 | | domain | String | '' | 图片服务域名 | | autoPreview | Boolean | false | 是否需要预览图片 | | styleStr | String | '' | 自定义图片样式 |

videoProp 对象具体属性

| 名称 | 类型 | 默认值 | 描述 | | -------------- | ------- | ----------- | ---------------------------------------------------- | | isFull | Boolean | false | 是否需要全屏展示帧图片 | | lazyLoad | String | "aspectFit" | 帧图片裁剪、缩放的模式 | | mode | Boolean | false | 图片懒加载 | | margin | Number | 0 | 图片两边留的边距 | | customFrameImg | Boolean | false | 是否自定义视频帧Url | | frameImgUrl | String | "" | 视频帧图片url | | replace | Boolean | false | 是否替换视频url，为false则在视频url后拼接frameImgUrl | | videoStyle | String | "" | 自定义video标签样式 | | videoImgStyle | String | "" | 自定义视频帧图片样式 |

事件

| 名称 | 参数 | 描述 | | -------- | ------------------ | -------------- | | preview | 图片地址，原始事件 | 预览图片时触发 | | navigate | 链接地址，原始事件 | 点击链接时触发 |

基本使用方法

• 安装

npm i mpvue-wxparse

• 使用

<template>
  <div>
    <wxParse :content="article" @preview="preview" @navigate="navigate" />
  </div>
</template>

<script>
import wxParse from 'mpvue-wxparse'

export default {
  components: {
    wxParse
  },
  data () {
    return {
      article: '<div>我是HTML代码</div>'
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}
</script>

<style>
@import url("~mpvue-wxparse/src/wxParse.css");
</style>

渲染 Markdown

先将 markdown 转换为 html 即可

npm install marked

import marked from 'marked'
import wxParse from 'mpvue-wxparse'

export default {
  components: {
    wxParse
  },
  data () {
    return {
      article: marked(`#hello, markdown!`)
    }
  }
}

Tips

• v0.6 之后的版本样式文件需自行引入

• 对性能要求较高的话，推荐使用这个原生组件版 wxParser-plugin

• 打包时出错 ERROR in static/js/vendor.js from UglifyJs

参照以下配置使 babel 处理 mpvue-wxparse，或更新 UglifyJs 插件

// webpack.base.conf.js
{
  test: /\.js$/,
  include: [resolve('src'), /mpvue-wxparse/],
  use: [
    'babel-loader',
    {
      loader: 'mpvue-loader',
      options: {
        checkMPEntry: true
      }
    }
  ]
}

感谢

@stonewen| @Daissmentii | @wuyanwen | @vcxiaohan