检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
[src]="item?.src" [style]="item.style" // 若图片的动作类型为查看大图，这里使用viewer库实现，开发者请根据实际情况编码 [view]="item?.event?.action === ActionTypes.VIEW_PIC" (click)="PreviewService
开发概述 KooMessage是华为云为行业客户提供的一站式富媒体消息服务，聚合智能信息、5G消息、企业服务号、PUSH消息等多渠道触点，实现全场景、全终端触达。其中，智能信息通过手机增强技术提供可交互的富媒体内容和素材，可实现内容访问、信息查询、智能客服等与用户的实时互动，目前
子组件开发 支持的子组件类型 事件处理效果预览 子组件代码示例
父组件开发 编写app-preview组件的JavaScript逻辑 父组件代码示例
总体开发思路 渲染模板预览视图所需的数据保存在pages字段中。调用智能信息模板查询API接口获取pages字段，经多个前端组件开发后，即可渲染出适配于自用平台的预览视图。总体开发流程如图1所示。 图1 将模板数据渲染成预览视图的开发流程 关键阶段介绍 调用查询模板API，获取pages字段。
智能信息 智能信息是通过手机终端增强技术和用户数据分析能力，以可交互的富媒体方式精准触达最终消费者，提供敏捷的内容开发服务和多种链接跳转手段，帮助企业客户实现用户增长等营销服务。 功能 图1 智能信息功能 核心功能 通过富媒体展示效果，可实现与用户应用交互、内容访问、信息查询、智能客服等实时互动。
子组件代码示例 app-preview-text组件 app-preview-button组件 app-preview-image组件 app-preview-video组件 app-preview-sideslip组件 app-preview-swiper组件 app-preview-eCommerce组件
事件处理效果预览 “事件”是指用户在客户端查看智能短信时，通过与子组件交互可完成的客户端操作。比如手机用户点击短信中的“进入官网”按钮，即可访问官网。 如您需要在预览模板时查询模板绑定的事件处理效果，这一需求可通过调用PreviewService函数统一处理事件来实现。目前ite
支持的子组件类型 以图1为例，该模板的预览视图由image、text、button三个子组件拼接而成。目前KooMessage的智能短信模板已支持11种类型的子组件开发，详见表1。对于各类型子组件，子组件代码示例提供了相应的HTML、CSS、JavaScript代码段供参考，部分
父组件代码示例 HTML <div class="previews" [style]=" pages[0].style" > // ngFor为循环指令，遍历content数组获取item <div *ngFor="let item of pages[0].content">
app-preview-button组件 HTML <div> <p [style]="item.style" (click)="PreviewService.emit(item.event)" class="preview-element" > {{ item.text }} </p>
app-preview-eCommerce组件 HTML <div class="ECommerce"> <swiper [autoplay]="false" [loop]="true" *ngIf="item.content.imageList.visibility === 'visible'">
app-preview-ticketImage组件 HTML <div [style]="item.style" class="ticketImage"> <div class="ticketImage_List"> <div // ngFor为循环指令 *ngFor="let
方案概述 应用场景 该解决方案基于华为云消息服务，通过手机终端增强技术和用户数据分析能力，以可交互的富媒体方式精准触达最终消费者，并提供敏捷的内容开发服务和多种链接跳转手段，帮助企业客户更高效率的触达服务，促进营销转化；增加持续收益；提高会员活跃度和忠诚度；刺激会员消费；提升流水。该方案主要适用于如下场景：
app-preview-sideslip组件 HTML <div class="Sideslip" [style]="item.style"> <div class="Sideslip-scroll" [style]="{ width: sideslipList.length *
app-preview-video组件 HTML <div> <video class="preview-element" [poster]="item.cover" controls [style]="item.style" [src]="item.src"></video> </div>
app-preview-text组件 HTML <div> <p class="preview-element text-element" [style]="item.style" (click)="PreviewService
app-preview-card-voucher组件 HTML <div class="card-voucher"> <div class="content"> <div class="content_top"> <div *ngIf="item.content.voucheType
编写app-preview组件的JavaScript逻辑 您可通过编写app-preview组件的重要js逻辑来设置原模板在预览界面的缩放比例、大小和位置，相关参数及用途如表1所示。 表1 js逻辑参数及用途 参数名 用途 outerWidth 控制模板在预览视图中的缩放尺寸。 pages[0]
app-preview-card-vouchers组件 HTML <div [style]="item.style" class="cardVouchers"> // innerHTML会把代码片段插入到当前节点中 <div class="title" [innerHTML]="item
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
