Home

Awesome

wxParser-plugin 使用指南

介绍

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

使用

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

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

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

组件属性介绍

参数类型必填默认值说明
rich-textString''你的富文本字符串
image-lazy-loadBooleanfalse图片懒加载,设置小程序 image 标签的 lazy-load 属性
image-previewBooleantrue图片点击放大,为 true 时,富文本中所有的 image 标签在点击后都将放大
bind:tapImgFunction-监听图片点击事件,通过 e.detail.src 可拿到图片地址
bind:tapLinkFunction-监听链接点击事件,由于微信小程序插件的限制,目前无法在插件中使用 wx.navigato 等跳转链接接口,开发者如需使用链接跳转功能,可在该事件的监听函数中操作
bind:bindImgLoadFunction-监听图片加载事件,当图片载入完毕时触发,通过 e.detail.src 可拿到图片地址
bind:readyFunction-组件生命周期: ready
bind:attachedFunction-组件生命周期: attached
bind:detachedFunction-组件生命周期: detached

具体使用

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

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