feimao-wx-parse
v0.3.0-wx
Published
适用于 Mpvue 的微信小程序富文本解析自定义组件,支持HTML及markdown解析
Downloads
39
Readme
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
}
}
]
}