转自https://blog.csdn.net/yuan_jlj/article/details/114673100
本文章只为记录 防止链接失效
如何接入「wxParser」插件?
在小程序中使用「wxParser」,你需要在项目中引入「wxParser」的 JS 库,同时,需要在相应的 WXML、WXSS 和 JS 文件中引入「wxParser」的模板、样式文件和编写初始化代码,少了任何一步,程序都不能正常工作。
1. 申请使用插件
在「小程序管理后台 - 设置 - 第三方设置 - 插件管理」中查找插件名称「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>'
}
})
5、在需要展示富文本内容的地方,使用「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 |
// 注意 该插件对图片的Mode 设置为mode=''widthFix
我的图片出现空白
解决方法:
.wxParser-p>image {
width: 100% !important;
}