mpvue-wxparse-mars v0.1.3

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

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

扫码体验

属性

自定义 parser 函数具体介绍

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

imageProp 对象具体属性

事件

基本使用方法

• 安装

npm i mpvue-wxparse-mars

• 使用

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

<script>
import wxParse from 'mpvue-wxparse'

export default {
  components: {
    wxParse
  },
  data () {
    return {
      article: '<div>我是HTML代码</div>'
    }
  }
}
</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 之后的版本样式文件需自行引入

• 打包时出错 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
      }
    }
  ]
}

感谢

@stonewen| @Daissmentii | @wuyanwen | @vcxiaohan