百度小程序富文本解析工具bdParse

百度小程序富文本解析工具bdParse

木头人 1,674 2020-09-15

要做一个百度小程序,自带的富文本标签很不友好,在网上找了这个,亲测好用,这里推荐给大家.

项目介绍

百度小程序富文本解析工具bdParse,改造自wxparse,支持html转换成百度小程序富文本节点。

安装教程

拷贝的方式使用

  1. 下载整个全部文件,放到你的小程序根目录下 点我下载
  2. 在小程序页面的js种直接引入代码:var bdParse = require('../../bdParse/bdParse.js');
    对应css中引入@import "../../bdParse/bdParse.css";
  3. 在需要的字段使用baparse,代码:(注意:article和content不要重复)
    that.setData({ content:bdParse.bdParse('article', 'html', content, that, 5), });
  4. swan页面引入模板,<import src="../../bdParse/bdParse.swan" />
    然后在需要显示富文本的地方调用:<template is="bdParse" data="{{ {bdParseData:article.nodes} }}" /> (注意:data调用改为和wxParse一致写法,注意是三个大括号,原先的直接写{}不再支持,请注意修改)
  5. ../../ 为相对路径,根据页面具体位置自行修改
  6. 样式不合适的可以根据类名等在自己的页面添加覆盖原有样式或直接修改bdParse.css中的样式

使用说明

  1. swan调用模板的data="{{ }}"和setData中的article保持一致。
  2. 调用bdparse组件的时候,组件已经把富文本内容赋值(即setData)给了article;{{ }} 这种写法的意思是:把article.nodes的内容赋值给bdParseData,bdParse.swan中调用的是bdParseData。

其他说明

  1. bdParse是在wxParse的基础上改造的,只是把wxParse替换换成了bdParse,包含js,swan, css
  2. wxml修改后缀改成swan,并且修改了全部模板传值的调用方式,符合百度小程序的使用。
  3. 修复了其他百度小程序的专有组件,比如s-for,s-if,s-elif,s-for-index等等
  4. 修复其他问题,比如去掉<template name="wxParseImg">重复的mode以及去掉data-from,给所有的s-for-index添加idx(好像不能为空)。
  5. 其他修改,不再赘述
  6. 因为直接批量替换内容,基本文章可以满足使用,其他没有做过多测试,欢迎大家反馈bug

项目地址

https://gitee.com/sootou/bdparse

大家还有没有其他用于解析富文本的插件呢? 欢迎评论区告诉我


# 小程序 # 百度小程序 # 富文本 # MD # bdParse # 富文本解析