Feimao-wx-parse NPM

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

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

扫码体验

小程序码

属性

名称	类型	默认值	描述
content	String	—	渲染内容
noData	String	数据不能为空	空数据时的渲染展示
startHandler	Function	null	自定义 parser 函数
endHandler	Function	null	自定义 parser 函数
charsHandler	Function	null	自定义 parser 函数
image	Object	见下文	图片相关参数

自定义 parser 函数具体介绍

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

image 对象具体属性

名称	类型	默认值	描述
mode	String	'aspectFit'	图片裁剪、缩放的模式
padding	Number	0	图片内边距
lazyLoad	Boolean	false	图片懒加载

基本使用方法

安装

npm i mpvue-wxparse

使用

<template>
  <div>
    <wxParse :content="article" />
  </div>
</template>

<script>
import wxParse from 'mpvue-wxparse'

export default {
  components: {
    wxParse
  },
  data () {
    return {
      article: '<div>我是HTML代码</div>'
    }
  }
}
</script>

渲染 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!`)
    }
  }
}

常见问题

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

参照以下配置使 babel 处理 mpvue-wxparse，或直接关闭 UglifyJs 插件

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