评论

小程序富文本解析

小程序富文本解析,代码高亮

wxParse

微信小程序富文本解析

原因

由于原作者仓库 wxParse 不再维护,我们项目中商品信息展示又是以wxParse这个用做富文本解析的;

于是乎,决定采用 递归Component 的方式对其进行重构一番;

原项目使用的 template 模板的方式渲染节点,存在以下问题:

  1. 节点渲染支持到12层,超出会原样输出 html 代码;

  2. 每一层级的循环模板都重复了一遍所有的可解析标签,代码十分臃肿。

  3. li标签不支持 ol 有序列表渲染(统一采用的是 ul 无序列表),a标签无法实现跳转,也无法获取点击事件回调等等;

  4. 节点渲染没有绑定 key 值,一是在开发工具看到一堆的 warning信息(看着十分难受),二是节点频繁删除添加,无法比较key值,造成 dom 节点频繁操作。

功能标签

  1. 目前该项目已经可以支持以下标签的渲染:
  1. 支持 npm包 引入
npm install --save wx-minicomponent

使用

  1. 原生组件使用方法
  • 克隆 项目 代码,把 components目录 拷贝到你的小程序根目录下面;

  • 在你的 page页面 对应的 json 文件引入 wxParse 组件

{
  "usingComponents": {
    "wxParse": "/components/wxParse/wxParse"
  }
}
  • 组件调用
<wxParse nodes="{{ htmlText }}" />
  1. npm组件使用方法
  • 安装组件
npm install --save wx-minicomponent
  • 小程序开发工具的 工具 栏找到 构建npm,点击构建;

  • 在页面的 json 配置文件中添加 wxParse 自定义组件的配置

{
  "usingComponents": {
    "wxParse": "/miniprogram_npm/wx-minicomponent/wxParse"
  }
}
  • wxml 文件中引用 wxParse
<wxParse nodes="{{ htmlText }}" />

提示:详细步骤可以参考小程序的npm使用文档

  1. 补充组件:代码高亮展示组件使用
  • pagejson 文件里面引入 highLight 组件

原生引入:

{
  "usingComponents": {
    "highLight": "/components/highLight/highLight"
  }
}

npm组件引入:

{
  "usingComponents": {
    "highLight": "/miniprogram_npm/wx-minicomponent/highLight"
  }
}
  • 组件调用
<highLight codeText="{{codeText}}" />

参数文档

  • wxParse:富文本解析组件
参数 说明 类型 例子
nodes 富文本字符 String “<div>test</div>”
language 语言 String 可选:“html” | “markdown” (“md”)

受信任的节点

节点 例子
audio <audio title=“我是标题” desc=“我是小标题” src=“https://media.lycheer.net/lecture/25840237/5026279_1509614610000.mp3?0.1” />
a <a href=“www.baidu.com”>跳转到百度</a>
p
div
span
li
ul
ol
img
button
h1
h2
h3
h4
  • highLight:代码高亮解析组件
参数 说明 类型 例子
codeText 原始高亮代码字符 String “var num = 10;”
language 代码语言类型 String 可选值:“javascript/typescript/css/xml/sql/markdown”

提示:如果是html语言,language的值为xml

  • wxAudio:仿微信公众号文章音频播放组件
参数 说明 类型 例子
title 标题 String “test”
desc 副标题 String “sub test”
src 音频地址 String

示例展示

  1. 富文本解析
  • html文本解析实例

  • markdown文本解析实例

  1. 代码高亮

更新历史

  • 2020-5-31
  1. 迁移utils目录到wxParse目录下;
  2. 富文本增加markdown文本解析支持;
  • 2020-5-21: 富文本组件image标签添加loading过渡态,优化图片加载体验

  • 2020-5-17: 完善组件参数文档,增加wxParse对audio标签标题,副标题的解析功能

  • 2020-5-13: 增加css,html,ts,sql,markdown代码高亮提示支持

  • 2020-5-6: 增加图片预览功能

项目地址

项目地址:https://github.com/csonchen/wxParse

最后一次编辑于  2020-06-01  
点赞 11
收藏
评论

18 个评论

  • 玩呗
    玩呗
    2020-08-05

    href点击没反应啊老铁

    2020-08-05
    赞同 1
    回复 5
    • Sam
      Sam
      2020-08-05
      需要在页面里面加个handleTagATap 事件就可以拿到点击事件了
      2020-08-05
      回复
    • Sam
      Sam
      2020-08-05
      我今天完善一下点击的处理吧,提供站内跳转和webview跳转两种模式
      2020-08-05
      1
      回复
    • Sam
      Sam
      2020-08-05回复Sam
      原生的已经可以直接使用了,你可以本地替换一下;npm的包我还发不上去,要过一会
      2020-08-05
      回复
    • zzz
      zzz
      2021-02-02
      楼主你好,a标签点击报错,能否解答一下
      2021-02-02
      回复
    • chen.
      chen.
      2021-02-02回复zzz
      路径错了吧,试试/pages/webviewPage/webviewPage?src=...
      2021-02-02
      回复
  • Jackymao
    Jackymao
    03-09

    你好,请问支付宝小程序是不是不支持。以前的原作者的正常解析用这个解析报错

    03-09
    赞同
    回复 1
    • Sam
      Sam
      03-10
      还没有做支付宝小程序的支持哈
      03-10
      回复
  • 52HZ
    52HZ
    2021-12-29

    大佬能给个解析完成 的回调嘛

    2021-12-29
    赞同
    回复 2
    • Sam
      Sam
      03-03
      可以的,我mark下来了。
      03-03
      回复
    • 52HZ
      52HZ
      03-21回复Sam
      谢谢
      03-21
      回复
  • 智慧🧠
    智慧🧠
    2021-06-22

    测试

    2021-06-22
    赞同
    回复
  • 凉茶酱肘子
    凉茶酱肘子
    2021-04-17

    求问大佬,用这个组件直接解析一个URL该怎么处理?

    2021-04-17
    赞同
    回复 6
    • Sam
      Sam
      2021-04-19
      没太理解你的需求,可以详细描述下么?
      2021-04-19
      回复
    • 凉茶酱肘子
      凉茶酱肘子
      2021-04-19回复Sam
      后台记录数据的时候,没有存成富文本,而是直接存成了一个html页面保存在服务器上,现在小程序需要显示这些数据,那么后台返回html的存储路径(例如: https://test.com/static/data/01192019.html),这时如何解析网页内容?
      2021-04-19
      回复
    • Sam
      Sam
      2021-04-19回复凉茶酱肘子
      首先你把这问题想错方向了,这组件的本质是输入一个富文本字符串,然后解析出对应的小程序标签;既然你这个本身就是一个html文件,那就直接采用webview的方式套用进去,不就迎刃而解了吗。
      2021-04-19
      回复
    • 凉茶酱肘子
      凉茶酱肘子
      2021-04-22回复Sam
      这个我也想到过,但是我需要的是把html文件的内容解析出来显示在页面的某一部分,可webview会自动铺满全屏,不符合我的需求啊
      2021-04-22
      回复
    • Sam
      Sam
      2021-04-22回复凉茶酱肘子
      纯微信小程序提供的方法解决不了你这个问题,要么你让你们的接口给你先把html文件内容读取返回给你;要么自己起一个node服务去获取文件的内容,然后返回html的富文本。
      2021-04-22
      回复
    查看更多(1)
  • bro.
    bro.
    2021-01-29

    我有些渲染出来的是这种,怎么解决

    2021-01-29
    赞同
    回复 1
    • Sam
      Sam
      2021-01-29
      初步目测是因为你的单引号和双引号的嵌套问题,能否把有问题的富文本字符发一下,这样好排查问题
      2021-01-29
      回复
  • 28.78
    28.78
    2021-01-13

    为什么我的图片渲染不出来

    2021-01-13
    赞同
    回复 3
  • wh
    wh
    2021-01-12

    大佬不支持简析空格吗?

    2021-01-12
    赞同
    回复 1
    • Sam
      Sam
      2021-01-12
      支持的呀,你可以把issue那里把有问题的html文本发出来,我来看一下
      2021-01-12
      回复
  • 刘 1
    刘 1
    2020-11-21

    请问换行支持吗

    2020-11-21
    赞同
    回复 1
    • Sam
      Sam
      2020-11-24
      支持的
      2020-11-24
      回复
  • @_@小杨
    @_@小杨
    2020-09-29

    在swiper组件中,多个swiper-item,每个swiper-item下都有多张图片,点击图片预览时,始终显示的是第一个swiper-item中的第一张图片

    2020-09-29
    赞同
    回复 8
    • Sam
      Sam
      2020-09-29
      swiper组件中,你的富文本标签有swiper??
      2020-09-29
      回复
    • .xinᴗg.ᰔᩚ
      .xinᴗg.ᰔᩚ
      2020-12-21回复Sam
      富文本里用轮播图挺强
      2020-12-21
      回复
    • Sam
      Sam
      2020-12-24回复.xinᴗg.ᰔᩚ
      印象中我并没有实现轮播图的功能,得看应用场景,可以的话,你提供一下应用场景给我,我想想办法去实现
      2020-12-24
      回复
    • @_@小杨
      @_@小杨
      2020-12-30回复Sam
      不是,是swiper-item中放富文本
      2020-12-30
      回复
    • Sam
      Sam
      2021-01-05回复@_@小杨
      能否提供一下完整的html富文本字符串给我
      2021-01-05
      回复
    查看更多(3)

正在加载...

登录 后发表内容