收藏
评论

wxParser-plugin 小程序富文本渲染插件版

介绍

wxParser-plugin 为 wxParser 的微信小程序插件版本,与 wxParser 相比,wxParser-plugin 减少了很多繁琐的使用步骤,同时简化了接口。并且使用微信小程序插件,可以方便地对插件进行版本管理。

使用

  1. 在微信小程序管理后台,按 APPID wx9d4d4ffa781ff3ac 搜索到该插件,并点击添加,即可在代码中使用 wxParser-plugin 了

  2. 在 app.json 中声明插件引入。目前插件版本为 0.1.0provider 为该插件的 APPID,wxparserPlugin 为自定义的插件名称。

"plugins": {  "wxparserPlugin": {    "version": "0.1.0",    "provider": "wx9d4d4ffa781ff3ac"
  }
}
  1. 在需要使用到该插件的小程序页面的 json 配置文件中,做如下配置:

{  "usingComponents": {    "wxparser": "plugin://wxparserPlugin/wxparser"
  }
}
  1. 使用

<wxparser rich-text="{{richText}}" />

组件属性介绍

  • rich-text: 你的富文本字符串

  • bind:tapImg: 监听图片点击事件,通过 e.detail.src 可拿到图片地址

  • bind:tapLink: 监听链接点击事件,由于微信小程序插件的限制,目前无法在插件中使用 wx.navigato 等跳转链接接口,开发者如需使用链接跳转功能,可在该事件的监听函数中操作

具体使用

<wxparser rich-text="{{richText}}" bind:tapLink="goto" />
goto: function(e) {  wx.navigateTo({
    url: e.detail.href
  })
}

注:由于小程序的限制,链接必须为你的小程序中的页面的路径。


wxParser-plugin 使用指南

介绍

wxParser-pluginwxParser 的微信小程序插件版本,与 wxParser 相比,wxParser-plugin 减少了很多繁琐的使用步骤,同时简化了接口。并且使用微信小程序插件,可以方便地对插件进行版本管理。

使用

  1. 在微信小程序管理后台,按 APPID wx9d4d4ffa781ff3ac 搜索到该插件,并点击添加,即可在代码中使用 wxParser-plugin

  2. app.json 中声明插件引入。目前插件版本为 0.1.0provider 为该插件的 APPID,wxparserPlugin 为自定义的插件名称。

"plugins": {
  "wxparserPlugin": {
    "version": "0.1.0",
    "provider": "wx9d4d4ffa781ff3ac"
  }
}
  1. 在需要使用到该插件的小程序页面的 json 配置文件中,做如下配置:
{
  "usingComponents": {
    "wxparser": "plugin://wxparserPlugin/wxparser"
  }
}
  1. 使用
<wxparser rich-text="{{richText}}" />

组件属性介绍

  • rich-text: 你的富文本字符串
  • bind:tapImg: 监听图片点击事件,通过 e.detail.src 可拿到图片地址
  • bind:tapLink: 监听链接点击事件,由于微信小程序插件的限制,目前无法在插件中使用 wx.navigato 等跳转链接接口,开发者如需使用链接跳转功能,可在该事件的监听函数中操作

具体使用

<wxparser rich-text="{{richText}}" bind:tapLink="goto" />
goto: function(e) {
  wx.navigateTo({
    url: e.detail.href
  })
}

注:由于小程序的限制,链接必须为你的小程序中的页面的路径。

收藏

7 个评论

  • 别去明知山
    别去明知山
    2018-09-10

    支持视频吗

    2018-09-10
    赞同 1
    回复 1
    • biu
      biu
      2018-09-12

      不支持,直接报错,啥都渲染不了了。。。坑

      2018-09-12
      回复
  • Sam
    Sam
    2019-05-15

    换行会被处理成文本,感觉要自己修改!

    2019-05-15
    赞同
    回复
  • A(lwb)
    A(lwb)
    2019-05-07

    厉害

    2019-05-07
    赞同
    回复
  • Y.H.JIANG 阳和
    Y.H.JIANG 阳和
    2019-03-26

    小程序 rich-text的 如何打开pdf?

    2019-03-26
    赞同
    回复 1
    • A9754184528
      A9754184528
      2020-07-29
      bind:tapLink,只能在这里判断href,再利用微信能力openDocument。
      2020-07-29
      回复
  • 淺水¹³¹⁴
    淺水¹³¹⁴
    2019-01-21

    怎么去除空行 和换行 现在渲染的内容 换行就会变成一个空view

    2019-01-21
    赞同
    回复 1
    • D.null
      D.null
      2021-08-07
      同问
      2021-08-07
      回复
  • 刘乐
    刘乐
    2018-09-06

    图片懒加载怎么整?

    2018-09-06
    赞同
    回复
  • 刘乐
    刘乐
    2018-09-04

    为啥不把\n替换掉?

    2018-09-04
    赞同
    回复
登录 后发表内容