申请注意事项：详见mp.weixin.qq.com/wxopen/plug…

解析部分标签，dom片段

在全局app.vue（我这里是用hbuilderx启动的项目所以是app.vue中，开发者工具中是main.js）中封装一个函数对数据结构进行处理

	formatRichText(html) {
			// store_source_id 为1是平台的，2是享库存，3是联联，3需要其他方式去解析
			let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi,
				'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		},

页面中使用

 <view class="detailCon lists" v-if="setmeal">
		<view class="title">套餐详情</view>
		<view class="content content_html" v-html="setmeal "></view>
</view>	
//接口请求成功后返回的数据
const data = res.data
this.setmeal = data.setmeal		 
	if(this.setmeal){
		this.setmeal=  app.formatRichText(this.setmeal);
		if(this.setmeal.charAt(this.setmeal.length-1)!=">"){
			this.setmeal=this.setmeal+'"/>'
		}
	}  

解析整个html文件（实测发现元素较多的情况下部分样式会出现塌陷的情况）

（1）打开小程序后台 （2）搜索html2wxml插件并添加 （3）等待通过后点击详情查看appid（此appid不是你开发者的appid） （4）回到hbuilderx中在pages.json文件中添加如下代码（微信开发者工具则是在app.json中添加）

根据最新的版本来，我这会用的时候是1.4.0

"plugins": {
    "htmltowxml": {
        "version": "1.4.0",
        "provider": "wxa51b9c855ae38f3c"
    }
}

（5）在小程序对应页面的json文件中添加（hbuilderx中则是在pages.json文件中对应的页面路径的style中添加）

"usingComponents": {
    "htmltowxml": "plugin://htmltowxml/view"
}

hbuilderx中 （6）直接在页面给变量赋值，展示即可

<htmltowxml text="{{spdetailInfo}}"  showLoading="false"></htmltowxml>
//详情属性见下一步详细介绍
this.spdetailInfo = res.data.detail

组件使用方法如下

示例代码

// 将Page中的content数据作为HTML格式渲染
<htmltowxml text="{{content}}" bindWxmlTagATap="wxmlTagATap" />

// 禁用代码高亮功能
<htmltowxml text="{{content}}" highlight="{{false}}" bindWxmlTagATap="wxmlTagATap" />

// 禁用代码行号显示功能
<htmltowxml text="{{content}}" linenums="{{false}}" bindWxmlTagATap="wxmlTagATap" />

// 代码高亮样式改为tomorrow
<htmltowxml text="{{content}}" highlightStyle="tomorrow" bindWxmlTagATap="wxmlTagATap" />

// 设置代码高亮检测语言 (最多6个，自行搭建服务不受限制)
<htmltowxml text="{{content}}" highlightLanguages="{{['html','js','php','css','cpp','ruby']}}" bindWxmlTagATap="wxmlTagATap" />

// 对HTML数据中的img标签的相对路径补全域名
<htmltowxml text="{{content}}" imghost="https://www.qwqoffice.com" bindWxmlTagATap="wxmlTagATap" />

// 禁用加载中动画
<htmltowxml text="{{content}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap" />

// 将Page中的text数据作为Markdown格式渲染
<htmltowxml text="{{text}}" type="md" bindWxmlTagATap="wxmlTagATap" />

// 直接渲染Page中的已经过解析的obj数据
<htmltowxml json="{{obj}}" bindWxmlTagATap="wxmlTagATap" />

最后是一个万能解析html的插件（亲测最好用）

前往githb项目地址

将这个项目下载至本地 根据自己的需求选用 我这里是使用的uniapp方式开发的小程序

没有component文件则直接放入pages中即可

<jyf-parser :html="spdetailInfo1" ></jyf-parser>


import parser from "../jyf-parser/jyf-parser.vue";
	export default {
		 components: {
		    "jyf-parser": parser
		  },
		data() {
			return {
				spdetailInfo1: '',
			}
		},
		onLoad(option,query) {
		onUnload() {
			
		},
		onShow() {
		},
		mounted() {},
		methods: {
		   async getspDetail () {
			   const res = await this.$request.post('localLive/getStoreGoodsInfo', {
			   	store_goods_id: this.goodsId,
				latitude:City.lat,
				longitude:City.lng
			   }, {
			   	native: true
			   })
			  console.log(res,'商品详情数据')
			   if (res.data.status == 'ok') {
			   	var data = res.data.data
				this.spdetailInfo1 = data.detail
		   }
		},
	}

详细属性如下