富文本。
属性
属性类型默认值必填说明nodesstring | Array<PropNode>[]否节点列表/HTML Stringspace'ensp' | 'emsp' | 'nbsp'否显示连续空格space
显示连续空格
nodes
现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点
快手推广-元素节点：type = node
属性说明类型必填备注name标签名string是支持部分受信任的 HTML 节点attrs属性object否支持部分受信任的属性，遵循 Pascal 命名法children子节点列表array否结构和 nodes 一致快手信息流广告-文本节点：type = text
属性说明类型必填备注text文本string是支持 entities快手广告-受信任的 HTML 节点及属性
全局支持 class 和 style 属性，不支持 id 属性。
节点属性aabbraddressarticleasidebbdibdodirbigblockquotebrcaptioncentercitecodecolspan，widthcolgroupspan，widthdddeldivdldtemfieldsetfontfooterh1h2h3h4h5h6headerhriimgalt，src，height，widthinslabellegendlinavolstart，typeppreqemsprtrubyssectionsmallspanstrongsubsuptablewidthtbodytdcolspan，height，rowspan，widthtfootthcolspan，height，rowspan，widththeadtrcolspan，height，rowspan，widthttuultip: nodes 不推荐使用 String 类型，性能会有所下降。
tip: rich-text 组件内屏蔽所有节点的事件。
tip: attrs 属性不支持 id ，支持 class 。
tip: name 属性大小写不敏感。
tip: 如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。
tip: img 标签仅支持网络图片。
tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 css 样式对 rich-text 中的 class 生效。
示例代码
KMSLJS<view class='total'>
<view class='wrap'>
<view class='title'>通过代码渲染</view>
<scroll-view style="height: 80px;" class='scr-v top10' scroll-y>{{code}}</scroll-view>
<view class='title top20'>渲染结果</view>
<view class='top10'>
<rich-text nodes='{{code}}'></rich-text>
</view>
</view>
<!-- <view class='wrap'>
<view class='title'>通过节点渲染</view>
<scroll-view class='scr-v top10' scroll-y>{{nodesShow}}</scroll-view>
<view class='title top20'>渲染结果</view>
<view class='top10'>
<rich-text nodes='{{nodes}}'></rich-text>
</view>
</view> -->
</view>
const code=
`<div class='center'>
<h3>I like dog</h3>
<img width='100' height='100' src='http://bpic.588ku.com/element_origin_min_pic/16/12/02/61d3bc2e2e340d5f87cf686ce68a07dd.jpg' />
</div>`;
const nodesShow =
`{
nodes: [{
name: 'div',
attrs: {
style: 'line-height: 60px; color: #ff5000;'
},
children: [{
type: 'text',
text: 'I like dog'
}]
}]
}`;
Page({
onShareAppMessage(){
return {
title: 'rich-text',
path: 'page/component/rich-text/index'
}
},
data: {
code,
nodesShow,
nodes: [{
name: 'div',
attrs: {
class: 'center',
style: 'line-height: 60px; color: #ff5000;'
},
children: [{
type: 'text',
text: 'I like dog',
}]
}]
},
})
CSS.scr-v{
height: 200px;
border: 1px solid #eeeeee;
white-space: pre;
padding: 5px;
box-sizing: border-box;
}
.title{
font-size: 18px;
font-weight: bold;
}
.center{
text-align: center;
border: 1px solid #eeeeee;
}
text
文本。
属性
space
显示连续空格
值说明'ensp'中文字符空格一半大小'emsp'中文字符空格大小'nbsp'根据字体设置的空格大小tip: decode 可以解析的有 < > & '    
tip: 各个操作系统的空格标准并不一致。
tip: text 组件内只支持 text 嵌套。
tip: 除了文本节点以外的其他节点都无法长按选中。
<view class='total'>
<view class='wrap'>
<view class='title'>可选择文本</view>
<view class='txt'>
<text ks:for="{{text}}" class='con' selectable>{{item}}</text>
</view>
</view>
</view>
Page({
onShareAppMessage() {
return {
title: 'text',
path: 'page/component/text/index'
}
},
data: {
text: ['拥抱熟悉的生活', '拥抱新鲜的生活', '拥抱精彩的生活', '拥抱每一种生活']
}
})
.title{
font-size: 18px;
border-bottom: 1px solid #eeeeee;
height: 30px;
padding-left: 20px;
}
.txt{
margin: 10px 20px 0px;
}
.con{
display: block;
text-decoration: none;
overflow: hidden;
}
.wrap {
padding: 20px 0px;
width: 90vw;
}
有关快手广告开户投放等相关问题可以找长春小象网络营销代运营，代运营有着六年的广告投放经验，能帮广告主解决广告制作，推广代运营等服务。提供开户到上线全过程服务流程，从账户下户到上线只需要提供相关资质和素材就可以了。以更高的效率来获取广告带来的效果。
本文标题：快手广告投放-快手小程序（开发-组件）02
本文链接：https://www.eatui.cn/xinxiliu/17614.html
