In Uni-App development, we often need to display rich text content, such as text, pictures, links, etc. with HTML tags. Uni-App provides a powerful RichText component, which can easily realize the display of rich text content. This tutorial will show you how to use the RichText component to create content-rich interfaces.
1: Create a new page
First, we need to create a new page in the Uni-App project to display rich text content. Create a new file in the project's pagesfolder , eg ..vueRichTextDemo.vue
2: Import RichText component
In the newly created page file, import the RichText component. <template>Add the following code to the tag :
<template>
<view>
<rich-text :nodes="richTextNodes"></rich-text>
</view>
</template>
3: Define rich text content
Next, we need to define the rich text content. <script>Add the following code to the tag :
<script>
export default {
data() {
return {
richTextNodes: [
{
name: 'div',
attrs: {
class: 'rich-text-content',
style: 'color: #333;'
},
children: [
{
type: 'text',
text: '这是一段富文本内容，',
},
{
name: 'span',
attrs: {
style: 'font-weight: bold;'
},
children: [
{
type: 'text',
text: '带有加粗效果的文字',
},
],
},
{
type: 'text',
text: '，以及',
},
{
name: 'a',
attrs: {
href: 'https://uniapp.dcloud.io/component/rich-text',
target: '_blank',
style: 'color: blue;'
},
children: [
{
type: 'text',
text: '链接',
},
],
},
{
type: 'text',
text: '。',
},
{
name: 'img',
attrs: {
src: 'https://example.com/image.png',
style: 'width: 200px; height: 200px;',
},
},
],
},
],
};
},
};
</script>
In the above code, we define an richTextNodesarray, which contains a rich text node tree. Each node consists of name, attrsand childrenattributes, which define the node's type, attributes, and child nodes. In the example, we create a divnode that contains text, bold text, hyperlinks and images.
Please modify the content of the array as needed richTextNodesto display the rich text content you want.
4: Style customization
If you need to customize the style of the rich text, you can <style>add a custom CSS style to the label. <style>For example, add the following code to the page's tags:
<style>
.rich-text-content {
margin: 10px;
padding: 10px;
background-color: #f5f5f5;
color: #333;
}
.rich-text-content span {
font-weight: bold;
}
.rich-text-content a {
color: blue;
}
</style>
In the above code, we .rich-text-contenthave added some styles to the class, such as setting the margin, padding and background color, and set the text color to dark gray. At the same time, we also define styles for spanlabels and tags, setting bold and blue font colors respectively.a
You can customize the style according to your needs and adjust it according to the actual situation.
5: Done
Now, you have completed the tutorial of using the RichText component to display rich text content. Save and run your Uni-App project, then navigate to the new page you created to see the interface with rich text content.
Complete sample code
<template>
<view>
<rich-text :nodes="richTextNodes"></rich-text>
</view>
</template>
<script>
export default {
data() {
return {
richTextNodes: [
{
name: 'div',
attrs: {
class: 'rich-text-content',
},
children: [
{
type: 'text',
text: '这是一段富文本内容，',
},
{
name: 'span',
attrs: {
},
children: [
{
type: 'text',
text: '带有加粗效果的文字',
},
],
},
{
type: 'text',
text: '，以及',
},
{
name: 'a',
attrs: {
href: 'https://uniapp.dcloud.io/component/rich-text',
target: '_blank',
},
children: [
{
type: 'text',
text: '链接',
},
],
},
{
type: 'text',
text: '。',
},
{
name: 'img',
attrs: {
src: 'https://example.com/image.png',
},
},
],
},
],
};
},
};
</script>
<style>
.rich-text-content {
margin: 10px;
padding: 10px;
background-color: #f5f5f5;
color: #333;
}
.rich-text-content span {
font-weight: bold;
}
.rich-text-content a {
color: blue;
}
</style>
Please note that the rich text content, styles and image links in the sample code are for demonstration purposes only, and you need to modify and replace them according to your actual needs.
Hope this tutorial can help you use Uni-App's RichText component to display rich text content! If you have any questions, please feel free to ask.