评论

小程序富文本解析

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

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  
点赞 10
收藏
评论

16 个评论

  • 玩呗
    玩呗
    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
      回复
    • Liingot
      Liingot
      02-02
      楼主你好,a标签点击报错,能否解答一下
      02-02
      回复
    • chen.
      chen.
      02-02回复Liingot
      路径错了吧,试试/pages/webviewPage/webviewPage?src=...
      02-02
      回复
  • 智慧🧠
    智慧🧠
    06-22

    测试

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

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

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

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

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

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

    01-13
    赞同
    回复 3
  • m
    m
    01-12

    大佬不支持简析空格吗?

    01-12
    赞同
    回复 1
    • Sam
      Sam
      01-12
      支持的呀,你可以把issue那里把有问题的html文本发出来,我来看一下
      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
      回复
    • XiLi
      XiLi
      2020-12-21回复Sam
      富文本里用轮播图挺强
      2020-12-21
      回复
    • Sam
      Sam
      2020-12-24回复XiLi
      印象中我并没有实现轮播图的功能,得看应用场景,可以的话,你提供一下应用场景给我,我想想办法去实现
      2020-12-24
      回复
    • @_@小杨
      @_@小杨
      2020-12-30回复Sam
      不是,是swiper-item中放富文本
      2020-12-30
      回复
    • Sam
      Sam
      01-05回复@_@小杨
      能否提供一下完整的html富文本字符串给我
      01-05
      回复
    查看更多(3)
  • Mr.Dolphin
    Mr.Dolphin
    2020-08-05

    你好,感谢分享,目前使用出现一个问题,a标签可以渲染出来,但是点击无法跳转,我又用了官方提供的富文本好像也是跳转不了。

    2020-08-05
    赞同
    回复 6
    • Sam
      Sam
      2020-08-05
      目前需要在页面里面加个handleTagATap 事件就可以拿到点击事件了,我现在完善一下跳转的功能,下午发个版,多谢支持
      2020-08-05
      1
      回复
    • Mr.Dolphin
      Mr.Dolphin
      2020-08-05回复Sam
      好的 ,感谢大佬,另外还有个问题,ios手机存在视频无法播放
      2020-08-05
      回复
    • Sam
      Sam
      2020-08-05回复Mr.Dolphin
      可以提供提供html片段吗,video用的还是原库的原生自带的,还没时间去自己造一个
      2020-08-05
      回复
    • Mr.Dolphin
      Mr.Dolphin
      2020-08-05回复Sam
      2020-08-05
      回复
    • Sam
      Sam
      2020-08-05回复Mr.Dolphin
      原生的已经可以直接使用了,你可以本地替换一下;npm的包我还发不上去,要过一会
      2020-08-05
      回复
    查看更多(1)
  • cici
    cici
    2020-07-06

    为啥子我在页面上渲染不出来??

    2020-07-06
    赞同
    回复 1
    • Sam
      Sam
      2020-07-07
      麻烦请提供一下代码片段链接,谢谢
      2020-07-07
      回复

正在加载...

登录 后发表内容