检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
子组件开发 支持的子组件类型 事件处理效果预览 子组件代码示例
父组件开发 编写app-preview组件的JavaScript逻辑 父组件代码示例
开发概述 KooMessage是华为云为行业客户提供的一站式富媒体消息服务，聚合智能信息、5G消息、企业服务号、PUSH消息等多渠道触点，实现全场景、全终端触达。其中，智能信息通过手机增强技术提供可交互的富媒体内容和素材，可实现内容访问、信息查询、智能客服等与用户的实时互动，目前
总体开发思路 渲染模板预览视图所需的数据保存在pages字段中。调用智能信息模板查询API接口获取pages字段，经多个前端组件开发后，即可渲染出适配于自用平台的预览视图。总体开发流程如图1所示。 图1 将模板数据渲染成预览视图的开发流程 关键阶段介绍 调用查询模板API，获取pages字段。
margin-left: 12px; margin-bottom: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .Sideslip-buts
input[type='reset'], input[type='search'], input[type='submit'] { -webkit-appearance: none; cursor: pointer; } } JavaScript // 引入PreviewService，用来触发事件
text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; } &-date
以图1为例，该模板的预览视图由image、text、button三个子组件拼接而成。目前KooMessage的智能短信模板已支持11种类型的子组件开发，详见表1。对于各类型子组件，子组件代码示例提供了相应的HTML、CSS、JavaScript代码段供参考，部分组件无需编写CSS样式和J
app-preview-card-vouchers组件 app-preview-moreGoods组件 app-preview-ticketImage组件 父主题： 子组件开发
width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break:
previews { position: relative; transform-origin: left top; } 父主题： 父组件开发
default: break; } } } 父主题： 子组件开发
app-preview-swiper组件 开发横滑组件时可定义的属性及其作用如表1所示，您可根据实际需求进行定义。 表1 横滑组件属性及作用 属性 作用 item.style 样式定义。 item.swiper.autoplay 是否自动轮播。 item.swiper.loop 是否循环。
[src]="item?.src" [style]="item.style" // 若图片的动作类型为查看大图，这里使用viewer库实现，开发者请根据实际情况编码 [view]="item?.event?.action === ActionTypes.VIEW_PIC" (click)="PreviewService
app-preview-video组件 HTML <div> <video class="preview-element" [poster]="item.cover" controls [style]="item.style" [src]="item.src"></video> </div>
14px; &::-webkit-scrollbar { width: 4px; } &::-webkit-scrollbar-track { background-color: #fff; -webkit-border-radius:
ECommerce .divContent { font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin-bottom: 20px; height:
text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } &_bottom { text-align: center;
修订记录 发布日期 修订记录 2022-12-09 第一次正式发布。
app-preview-button组件 HTML <div> <p [style]="item.style" (click)="PreviewService.emit(item.event)" class="preview-element" > {{ item.text }} </p>
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
