小程序rich-text（富文本）照片、内容样式问题

Holle! 我是Boy~，今天给大家分享一下关于 小程序rich-text（富文本）照片、内容样式 的问题。 相信大家在使用小程序rich-text（富文本）的时候都遇到过这样的问题，这里呢我给大家分享一下。

一、在WXML中我们使用 rich-text，nodes显示的HTML节点

WXML中：

   <view class="imageList">
     <rich-text nodes="{{shopdeat}}" class="imagetxt"></rich-text>
   </view>
   

二、在JS中我们获取数据，在没有类名的情况下：

JS:

方法1:
 onLoad: function (options) {
 	ShopList(options.id).then(result => {
 		console.log(result.data.content);  // 获取数据展示方便我们查看
 		// let 变量  进行正则匹配
 		let content = result.data.content; 
      	result.data.content = content.replace(/\<img/gi, '<img style="width:100%";height:auto')
      	this.setData({
        shopdeat: result.data.content
      })
 	}
 },

方法2:
	result.data.content= cont
	 	.replace(/<p>/ig, '<p class="p_class">')
     	.replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p')
        .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')

        .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
        .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
        .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
        .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
        .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 class="pho"')

      this.setData({
         shopdeat:	result.data.content
      })

设置之后 我们就可以在CSS中定义样式表

在JS中我们获取数据中，标签在有类名的情况下：我们直接在WXSS中设置样式就可以

如果对你有帮助 不妨点个赞，关注一下（强老板大气），后续我也会发布一些对你有帮助的文章 ！！！