微信小程序官方组件展示之基础内容rich-text源码

软件事业部

发布于 2022-08-19 09:18:54

4280

发布于 2022-08-19 09:18:54

文章被收录于专栏：软件事业部专栏软件事业部专栏

以下将展示微信小程序之基础内容rich-text源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。

功能描述：

富文本。

属性说明：

属性	类型	默认值	必填	说明	最低版本
nodes	array/string	[]	否	节点列表/HTML String	1.4.0
space	string		否	显示连续空格	2.4.1
合法值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小
user-select	boolean	FALSE	否	文本是否可选，该属性会使节点显示为 block	2.24.0

nodes

现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点

元素节点：type = node

属性	说明	类型	必填	备注
name	标签名	string	是	支持部分受信任的 HTML 节点
attrs	属性	object	否	支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	array	否	结构和 nodes 一致

文本节点：type = text

属性	说明	类型	必填	备注
text	文本	string	是	支持entities

受信任的 HTML 节点及属性

全局支持 class 和style属性，不支持 id 属性。

节点	属性
a
abbr
address
article
aside
b
bdi
bdo	dir
big
blockquote
br
caption
center
cite
code
col	span，width
colgroup	span，width
dd
del
div
dl
dt
em
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
img	alt，src，height，width
ins
label
legend
li
mark
nav
ol	start，type
p
pre
q
rt
ruby
s
section
small
span
strong
sub
sup
table	width
tbody
td	colspan，height，rowspan，width
tfoot
th	colspan，height，rowspan，width
thead
tr	colspan，height，rowspan，width
tt
u
ul

Bug & Tip

1. tip: nodes 不推荐使用 String 类型，性能会有所下降。

2. tip: rich-text 组件内屏蔽所有节点的事件。

3. tip: attrs 属性不支持 id ，支持 class 。

4. tip: name 属性大小写不敏感。

5. tip: 如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。

6. tip: img 标签仅支持网络图片。

7. tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

示例代码：

JAVASCRIPT：

const htmlSnip =
`<div class="div_class">
 <h1>Title</h1>
 <p class="p">
 Life is&nbsp;<i>like</i>&nbsp;a box of
 <b>&nbsp;chocolates</b>.
 </p>
</div>
`
const nodeSnip =
`Page({
 data: {
 nodes: [{
 name: 'div',
 attrs: {
 class: 'div_class',
 style: 'line-height: 60px; color: red;'
 },
 children: [{
 type: 'text',
 text: 'You never know what you're gonna get.'
 }]
 }]
 }
})
`
Page({
 onShareAppMessage() {
 return {
 title: 'rich-text',
 path: 'page/component/pages/rich-text/rich-text'
 }
 },
 data: {
 htmlSnip,
 nodeSnip,
  renderedByHtml: false,
 renderedByNode: false,
 nodes: [{
 name: 'div',
 attrs: {
 class: 'div_class',
 style: 'line-height: 60px; color: #1AAD19;'
 },
 children: [{
 type: 'text',
 text: 'You never know what you\'re gonna get.'
 }]
 }]
 },
 renderHtml() {
 this.setData({
 renderedByHtml: true
 })
 },
 renderNode() {
 this.setData({
 renderedByNode: true
 })
 },
 enterCode(e) {
 console.log(e.detail.value)
 this.setData({
 htmlSnip: e.detail.value
 })
 }
})

WXML：

<view class="container">
 <view class="page-body">
 <view class="page-section">
 <view class="page-section-title">通过HTML String渲染</view>
 <view class="page-content">
 <scroll-view scroll-y>{{htmlSnip}}</scroll-view>
 <button style="margin: 30rpx 0" type="primary" bindtap="renderHtml">渲染HTML</button>
 <block wx:if="{{renderedByHtml}}">
 <rich-text nodes="{{htmlSnip}}"></rich-text>
 </block>
 </view>
 </view>
 <view class="page-section">
 <view class="page-section-title">通过节点渲染</view>
 <view class="page-content">
 <scroll-view scroll-y>{{nodeSnip}}</scroll-view>
 <button style="margin: 30rpx 0" type="primary" bindtap="renderNode">渲染Node</button>
 <block wx:if="{{renderedByNode}}">
 <rich-text nodes="{{nodes}}"></rich-text>
 </block>
 </view>
 </view>
 </view>
</view>