The applet parses the dom fragment returned by the interface and the entire html page and displays it to the view

Notes on application : For details, see https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxa51b9c855ae38f3c&token=&lang=zh_CN#-

Parse some tags, dom fragments

insert image description here

Encapsulate a function in the global app.vue (I am a project started with hbuilderx here, so it is app.vue, and main.js in the developer tool) to process the data structure

	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;
		},

used in the page

 <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+'"/>'
		}
	}

parse the entire html file

insert image description here
(1) Open the background of the applet

(2) Search for the html2wxml plug-in and add it

(3) After waiting for approval, click the details to view the appid (this appid is not your developer’s appid)

(4) Go back to hbuilderx and add the following in the pages.json file Code (WeChat developer tools are added in app.json)

According to the latest version, when I will use it is 1.4.0

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

(5) Add it to the json file of the page corresponding to the applet (in hbuilderx, add it to the style of the corresponding page path in the pages.json file)

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

In hbuilderx
insert image description here
(6) assign values to variables directly on the page and display them

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

Components are used as follows

insert image description here
sample code

// 将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" />