シーン:
uniapp を使用して WeChat アプレットを開発し、リッチ テキスト記事の要件を分析する
使用したコンポーネント:
- u-view2.0のu-parse
- uniapp が提供するリッチテキスト
上記の 2 つのコンポーネントはリッチ テキストを解析するためのもので、一般に、記事のコンテンツ、製品の詳細、ネイティブ HTML タグを含むさまざまな文字列などの解析など、リッチ テキスト解析シナリオで使用されます。このコンポーネントの機能と uni-アプリは次のとおりです
rich-text。重複する部分もありますが、相違点もあります。
同じ点：
- どちらも HTML 文字列を解析できます
違い：
- 軽量でシンプルな文字列の
rich-textパフォーマンスが向上 - 複雑な文字列の場合は、
parseより多くのカスタム プロパティと効果を備えたコンポーネントを使用することをお勧めします。
要約:
rich-text単純なテキストや画像コンテンツなどの単純なシーンの場合は、最初にコンポーネントを使用できますが、記事のコンテンツや製品の詳細などの複雑なテキストの詳細の場合は、最初に uview の u-parse コンポーネントを使用できます。
発生した問題:
uniapp が提供するリッチ テキスト コンポーネントを使用してリッチ テキストを解析する場合、返されたリッチ テキスト文字列の img タグの幅が大きいかスタイルがない場合、元の画像は非常に大きくなります。解析中 画面を超えてしまいます なぜそうなるのかというと、この記事がPC側で表示されており、ラベルのインラインスタイルが幅広に書かれている可能性があります。ただし、uview の u-parse コンポーネント解析を使用する場合、この問題は発生しません。コンポーネント内で処理する必要があります。
解決：
インターフェイスからリッチ テキスト文字列を取得するときは、正規化を通じて img のインライン スタイル タグのスタイルを変更します。
以下は、私のプロジェクトで正規表現を使用するデモの例です (参考のみ)。
<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>以下は、正規化によってクラス名をクリアするか、ラベルを削除するデモです。
let relTag = /<.+?>/g; //去除标签
let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g;// 清除类名
let newHtml = "";
newHtml = newHtml.replace(relTag, '');
newHtml = newHtml.replace(relClass, '');