uni-app中使用微信官方富文本插件wxParser

uni-app中使用微信官方富文本插件wxParser

一、插件的引入，

1. 在hbuilder中打开manifest.json文件，切换到源码视图
2. 找到小程序相关的配置，如下图，输入红框中的代码，
   

   "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的使用暂时到此结束，如果喜欢的话，可以给博主点个赞