【Harmoney OS 鸿蒙应用开辟】RichText富文本组件使用及坑点 ...

RichText组件是什么及使用方法

RichText组件是鸿蒙开辟中比较常用的根本组件——富文本组件，用于解析显示HTML格式文本。
适用场景：

• RichText组件适用于加载与显示一段HTML字符串，且不需要对显示结果进行较多自定义的应用场景。
  
• RichText组件底层复用了Web组件来提供根本能力，包括但不限于HTML页面的解析、渲染等。
  
• 移动设备的视口默认值巨细为980px，默认值可以确保大部门网页在移动设备下可以正常浏览。如果RichText组件宽度低于这个值，content内部的HTML则大概会产生一个可以滑动的页面被RichText组件包裹。如果想替换默认值，可以在content中添加以下标签：
  

1. <meta name="viewport" content="width=device-width">

复制代码

不适用场景：

•  RichText组件不适用于对HTML字符串的显示结果进行较多自定义。
  
• RichText组件不支持通过设置属性与事件，来修改背景颜色、字体颜色、字体巨细、动态改变内容等。
  
• RichText组件比较消耗内存资源，如需要重复使用RichText组件的场景下会出现卡顿、滑动响应慢等现象。
  

留意：RichText组件无法根据内容自顺应设置宽高属性，需要开辟者设置显示布局。
事件

onStart：加载网页时触发
onComplete：网页加载竣事时触发
示例：

1. RichText('<p>这是一个段落</p>')
2.         .onStart(() => {
3.           console.info('网页开始加载');
4.         })
5.         .onComplete(() => {
6.           console.info('网页内容加载完毕');
7.         })

复制代码

 属性

只支持通用属性中的width，height，size，layoutWeight四个属性。
支持标签

名称描述示例<h1>--<h6>被用来定义HTML，<h1>定义重要等级最高的标题，<h6>定义重要等级最低的标题。<h1>这是一个标题</h1><h2>这是h2标题</h2><p></p>定义段落。<p>这是一个段落</p><br/>插入一个简单的换行符。<p>这是一个段落<br/>这是换行段落</p><font/>规定文本的字体、字体尺寸、字体颜色。在标签中font size能够设置的值只有1到7的数字，默认值是3，由于标签在HTML 4.01中不建议使用，在XHTML1.0 Strict DTD中不支持，所以不建议使用此标签，请使用CSS取代。<font size="3" face="arial" color="red">这是一段赤色字体。</font><hr/>定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。<p>这个一个段落</p><hr/><p>这是一个段落</p><image></image>用来定义图片。<image src="resource://rawfile/icon.png"></image><div></div>常用于组合块级元素，以便通过CSS来对这些元素进行格式化。<div style='color:#0000FF'><h3>这是一个在div元素中的标题。</h3></div><i></i>定义与文本中别的部门差别的部门，并把这部门文本出现为斜体文本。<i>这是一个斜体</i><u></u>定义与通例文本风格差别的文本，像拼写错误的单词大概汉语中的专著名词，应尽量避免使用<u>为文本加下划线，用户会把它混淆为一个超链接。<p><u>这是带有下划线的段落</u></p><style></style>定义HTML文档的样式信息。<style>h1{color:red;}p{color:blue;}</style>style属性规定元素的行内样式，写在标签内部，在使用的时间需用引号来进行区分，并以; 隔断样式<h1 style='color:blue;text-align:center'>这是一个标题</h1><p style='color:green'>这是一个段落。</p><script></script>用于定义客户端脚本，比如JavaScript。 <script>document.write("Hello World!")</script>
   坑点

以下总结的坑点是我在开辟过程中自己碰到的，以及实践过的。。。
1、当RichText组件中的内容超出容器范围时，内容可以滚动。由于RichText底层是由webview实现，所以浏览器规格一致，内容超出会提供滚动条进行滑动。

代码如下：

1. @Entry
2. @Component
3. struct DemoPage {
5.   build() {
6.     Column() {
7.       //   内容区
8.       Text('以下为RichText内容')
9.         .fontSize(30)
10.         .fontWeight(FontWeight.Bold)
11.         .backgroundColor(Color.Pink)
12.       Scroll() {
13.         RichText('<h1 style="text-align: center;">h1标题</h1>' +
14.           '<h1 style="text-align: center;"><i>h1斜体</i></h1>' +
15.           '<h1 style="text-align: center;"><u>h1下划线</u></h1>' +
16.           '<h2 style="text-align: center;">h2标题</h2>' +
17.           '<h3 style="text-align: center;">h3标题</h3>' +
18.           '<p style="text-align: center;">p常规</p><hr/>' +
19.           '<div style="width: 500px;height: 500px;border: 1px solid;margin: 0 auto;">' +
20.           '<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">字体大小35px,行高45px</p>' +
21.           '<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;">' +
22.           '<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>' +
23.           '<h1 style="text-align: center;"><i>h1斜体</i></h1>' +
24.           '<h1 style="text-align: center;"><u>h1下划线</u></h1>' +
25.           '<h2 style="text-align: center;">h2标题</h2>' +
26.           '<h3 style="text-align: center;">h3标题</h3>' +
27.           '<p style="text-align: center;">p常规</p><hr/>'
28.       )
29.           .width('100%')
30.           .height(100)
31.       }
32.       .layoutWeight(1)
33.     }
34.     .backgroundColor(Color.Orange)
35.     .width('100%')
36.     .height('100%')
37.     .padding({ top: 50 })
38.   }
39. }

复制代码

 可以看到给定RichText设置了100的高度，但是组件内容的高度高出了100，内容就自动可以滚动了。
2、RichText渲染HTML内容在页面中的时间，发现字体会非常小，跟本来在.html文件中显示的不一致。参考官方文档中给的表明说，可以在HTML中加一个meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0">可以让字体正常显示。
但是，我在html文本中加上了meta标签运行之后的文字还黑白常小：

1. RichText(`
2.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
3.         <h1 style="text-align: center;">h1标题</h1><h1 style="text-align: center;"><i>h1斜体</i></h1>
4.         `)
5.           .width('100%')

复制代码

后来我又想是不是由于缺少了文档类型、html标签以及body标签，导致RichText识别不出来，后来发现是我想多了，运行结果还是跟上面一样。

1. RichText(`
2.         <!DOCTYPE html>
3.             <head>
4.               <meta charset="UTF-8" />
5.               <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6.             </head>
7.             <html>
8.               <body>
9.                 <h1 style="text-align: center;">h1标题</h1><h1 style="text-align: center;"><i>h1斜体</i></h1>
10.               </body>
11.             </html>
12.         `)
13.           .width('100%')

复制代码

后来问了华为那里的工程师，给出的表明是RichText组件不适用于对HTML字符串的显示结果进行较多自定义的应用场景。例如RichText组件不支持通过设置属性与事件，来修改背景颜色、字体颜色、字体巨细、动态改变内容等。
对于这种情况，还有一个场景就是获取的数据是从后端接口返回的，刚好返回的就是富文本大概HTML内容，需要对内容进行页面渲染，还是建议使用web组件。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。