mpvue-wxparse-mars

0.1.3 • Public • Published

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

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

npm package npm downloads

扫码体验

小程序码

属性

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

自定义 parser 函数具体介绍

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

imageProp 对象具体属性

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

事件

名称 参数 描述
preview 图片地址 预览图片时触发
navigate 链接地址 点击链接时触发

基本使用方法

  • 安装
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

Readme

Keywords

Package Sidebar

Install

npm i mpvue-wxparse-mars

Weekly Downloads

8

Version

0.1.3

License

MIT

Unpacked Size

94.4 kB

Total Files

32

Last publish

Collaborators

  • lishenghan