小程序中更快速更完美部署富文本 -- wxParser 插件

最新推荐文章于 2023-08-21 23:10:07 发布

黎轩栀海

最新推荐文章于 2023-08-21 23:10:07 发布

阅读量568

点赞数 1

分类专栏： # 小程序文章标签：小程序

原文链接：https://github.com/ifanrx/wxParser-plugin

版权

36 篇文章 5 订阅

订阅专栏

在小程序中使用「wxParser」，你需要在项目中引入「wxParser」的 JS 库，同时，需要在相应的 WXML、WXSS 和 JS 文件中引入「wxParser」的模板、样式文件和编写初始化代码，少了任何一步，程序都不能正常工作。

在「小程序管理后台 - 设置 - 第三方设置 - 插件管理」中查找插件名称「wxParser」（appid: wx9d4d4ffa781ff3ac），并申请使用。

2. 引入插件代码

在app.json文件中声明插件引入.

version 表示目前插件版本为 0.4.0，provider 为该插件的 AppID，而 wxparserPlugin 为自定义的插件名称。

"plugins": {
  "wxparserPlugin": {
    "version": "0.4.0",
    "provider": "wx9d4d4ffa781ff3ac"
  }
}

3. 在需要使用到该插件的小程序页面的 json 配置文件中，做如下配置：

{
  "usingComponents": {
    "wxparser": "plugin://wxparserPlugin/wxparser"
  }
}

4. 设置你的富文本内容，定义为 richText：

Page({
  data: {
    richText: '<h1>Hello world!</h1>'
  }
})

最后在需要展示富文本内容的地方，使用「wxParser」组件，为 rich-text 属性赋值上你的富文本内容即可。

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

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

关注