mpvue-wxparse2

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

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

扫码体验

属性

名称	类型	默认值	描述
content	String	数据不能为空	渲染内容
className	String		wxParse的类名。可以为其添加样式
image	Object	见下文	图片相关参数
debug	Boolean	false	调试开关

image 对象具体属性

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

事件

事件名	描述	回调参数
tap	当点击wxParse时触发	even
tapLink	当点击链接时触发	链接地址
tapImg	当点击图片时触发	图片地址

基本使用方法

• 安装

npm i mpvue-wxparse2

• 使用

<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-wxparse2')
  ],
  use: [
    'babel-loader',
    {
      loader: 'mpvue-loader',
      options: {
        checkMPEntry: true
      }
    }
  ]
}

感谢

@stonewen| @Daissmentii | @wuyanwen | @vcxiaohan