uni-app中使用微信官方富文本插件wxParser
一、插件的引入,
- 在hbuilder中打开manifest.json文件,切换到源码视图
- 找到小程序相关的配置,如下图,输入红框中的代码,
"plugins": {
"wxparserPlugin": {
"version": "0.3.1",
"provider": "wx9d4d4ffa781ff3ac"
}
}
3.在page.json中找到你要引入wxParser插件的页面,然后输入以下代码
这样你就可以在目标页面中使用wxparser了
"usingComponents":{
"wxparser": "plugin://wxparserPlugin/wxparser"
}
4.在页面中,引入组件wxparser
其中content就是我们的富文本内容,
<view class="content_box">
<wxparser :rich-text="content" />
</view>
二、组件属性介绍
1、rich-text: 你的富文本字符串
2、bind:tapImg: 监听图片点击事件,通过 e.detail.src 可拿到图片地址
3、bind:tapLink: 监听链接点击事件,由于微信小程序插件的限制,目前无法在插件中使用 wx.navigato 等跳转链接接口,开发者如需使用链接跳转功能,可在该事件的监听函数中操作
4、具体使用
<wxparser :rich-text="richText" @tapLink="goto" />
goto: function(e) {
wx.navigateTo({
url: e.detail.href
})
}
三、关于图片渲染失败的解决办法
在渲染的过程中会出现图片渲染失败的情况,这时候你打开控制台,查询image
标签的样式就会发现此时图片的样式style="width:auto;height:0px"
,该如何解决了,我们可以通过样式穿透来实现图片样式的改变,代码如下
.content_box /deep/ .wxParser-section image{
width: 100%!important;
}
由于image
的样式是通过行内样式进行添加的,如果我们只进行样式穿透而不添加important
的话,导致样式不生效,原因是行内样式的权重最高,我们通过important
来改变权重
最后
关于uni-app引入wxParser的使用暂时到此结束,如果喜欢的话,可以给博主点个赞