mini-program-parser

Mini Parser

适用于微信小程序的富文本解析方案

🎉 特性

• 🎈 轻量高效，体积仅5KB

• 📦 组件式封装，开箱即用

• 🔨 数据纯净，功能精简，更适合业务开发

📦 安装

npm install mini-program-parser

🔨 使用

• 使用上述方法安装 mini-parser 并使用微信开发者工具进行 npm 构建

• 将库中component/mini-parser路径下的 mini-parser 组件拷贝至你的项目中

• 在页面的 json 文件中引入 mini-parser：

  {
    "component": true,
    "usingComponents": {
      "mini-parser": "{{your_path}}/mini-parser/index"
    }
  }
  

• 在 wxml 中使用 mini-parser：

  <mini-parser html="{{htmlStr}}" config="{{config}}"></mini-parser>
  

• 小程序代码示例片段：https://developers.weixin.qq.com/s/3BHREtmN7xwn

⚙️ 配置项

属性	说明	类型	默认值
adaptive	宽度自适应模式	boolean	true
autoFix	自动修复常见问题	boolean	true
format	属性格式化	-	-
ignoredElement	无需解析的元素类型	string[]	defaultIgnoreElements

adaptive

宽度自适应模式

默认开启，当元素的宽度超过外层容器的宽度时，脚本会自动修改其宽度为容器宽度，并等比缩放其高度（如果有设置的话），注意：该模式会影响解析速度

autoFix

自动修复常见问题

自动修复的问题如下：

• a 标签和 section 标签内存在 img 标签时，会在 style 内自动追加display:block

  此项当富文本内含有图片标签时开启

format

属性格式化

干涉解析结果的方法，可以对具体元素的属性解析行为进行干涉，新增/修改具体的属性/方法，举个例子：

format: {
    img: {
        /* 替换图片链接协议 */
        src: (data) => data.replace("http", "https"),
        /* 重写图片ID */
        id: "overwrite-id",
        /* 点击事件回调函数名 */
        tapEvent: "handleTap"
    },
    text: {
        /* 修改文本 */
        content: (data) => data.replace("123", "abc"),
    },
}

ignoredElement

无需解析的元素类型

存在于该数组内的元素，在解析时不会解析其本身及其子元素，可在MiniParser.defaultIgnoreElements上追加元素或者替换为自己的忽略配置

ignoredElement:[...MiniParser.defaultIgnoreElements, 'iframe']
// or
ignoredElement:['iframe', 'table', '...']