Cuando el subprograma WeChat utiliza texto enriquecido para analizar cadenas de texto enriquecido, encuentra una etiqueta de imagen cuya imagen es demasiado grande para exceder la pantalla.

escena :

Utilice uniapp para desarrollar subprogramas WeChat y analizar los requisitos de artículos de texto enriquecido

Componentes utilizados:

1. u-view2.0 para u-parse 
2. texto enriquecido proporcionado por uniapp

Los dos componentes anteriores son para analizar texto enriquecido y generalmente se usan en escenarios de análisis de texto enriquecido, como analizar el contenido del artículo, detalles del producto, varias cadenas con etiquetas HTML nativas, etc. Las funciones de este componente y el componente oficial de uni- La aplicación es la siguiente rich-text: hay superposiciones, pero también diferencias.

Mismo punto:

• Ambos pueden analizar cadenas HTML.

diferencia:

• rich-textMejor rendimiento para cuerdas ligeras y simples
• Para cadenas complejas, parsees mejor usar componentes, con propiedades y efectos más personalizados.

Resumir:

Si se trata de una escena simple, como un texto simple y un contenido de imagen, puede usar rich-textel componente primero. Para detalles de texto complejos, como el contenido del artículo y los detalles del producto, puede usar primero el componente u-parse de uview.

Problemas encontrados:

Cuando se utiliza el componente de texto enriquecido proporcionado por uniapp para analizar texto enriquecido, si la etiqueta img en la cadena de texto enriquecido devuelta tiene un ancho grande o no tiene estilo, la imagen original es muy grande. En este caso, el ancho de la imagen después análisis Excederá la pantalla. En cuanto a por qué esto es así, es posible que este artículo se muestre en el lado de la PC y el estilo en línea de la etiqueta esté escrito con un ancho grande. Sin embargo, este problema no ocurrirá cuando se utilice el análisis de componentes u-parse de uview; debe procesarse dentro del componente.

Solución:

Al obtener una cadena de texto enriquecido de la interfaz, modifique el estilo en la etiqueta de estilo en línea en img mediante la regularización.

El siguiente es un ejemplo de demostración del uso de expresiones regulares en mi proyecto (solo como referencia).

<template>
	<div>
		<div style="padding:32rpx;background: #FFFFFF;width: 100%;">
			<!-- 解析富文本 -->
			<!-- <u-parse :content="contentData"></u-parse> -->
			<!-- 简单字符串用rich-text性能会好些 -->
			<rich-text :nodes="content"></rich-text>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				content: ''
			}
		},
		props: {
			contentData: {//这里的props传递下拉的数据是父组件通过接口拿到的富文本字符串
				type: String,
				default: ''
			},
		},
		watch: {
			contentData: {
				immediate: true,
				handler(val) {
                    //使用正则先去掉img标签上的style样式
					this.content = val.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/g, '')
                    //再使用这种去重写内联style样式
					this.content = this.content.replace(/\<img/gi, '<img style="width:100%;height:auto"')
				}
			}
		},
		components: {},
		computed: {
			...mapState(["hasLogin", ])
		},
		mounted() {

		},
		onShow() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
</style>

La siguiente es una demostración que borra el nombre de la clase o elimina la etiqueta mediante la regularización: 

        let relTag = /<.+?>/g; //去除标签
        let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g;// 清除类名

        let newHtml = "";
        newHtml = newHtml.replace(relTag, '');
        newHtml = newHtml.replace(relClass, '');