检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
如果您是具备自用营销信息分发平台的行业客户，可选择将智能信息的模板数据接入自用平台，在自用平台上实现模板预览、模板管理等操作。为此您需要将模板查询API返回的JSON数据渲染成适配于自用平台的预览视图。 本指南将指导您如何将智能信息的模板数据渲染成前端预览视图。
总体开发思路 渲染模板预览视图所需的数据保存在pages字段中。调用智能信息模板查询API接口获取pages字段，经多个前端组件开发后，即可渲染出适配于自用平台的预览视图。总体开发流程如图1所示。 图1 将模板数据渲染成预览视图的开发流程 关键阶段介绍 调用查询模板API，获取pages字段。
数据保护技术 KooMessage的数据保护手段，保护数据空间中的数据安全，如表1所示。 表1 数据保护手段 数据保护手段 说明 传输加密（HTTPS） KooMessage云服务之间接口、开放API接口都支持HTTPS传输协议，保障数据传输的安全性。 父主题： 安全
子组件开发 支持的子组件类型 事件处理效果预览 子组件代码示例
ript逻辑 您可通过编写app-preview组件的重要js逻辑来设置原模板在预览界面的缩放比例、大小和位置，相关参数及用途如表1所示。 表1 js逻辑参数及用途 参数名 用途 outerWidth 控制模板在预览视图中的缩放尺寸。 pages[0].style 设置模板显示的缩放比例值。
方案概述 应用场景 该解决方案基于华为云消息服务，通过手机终端增强技术和用户数据分析能力，以可交互的富媒体方式精准触达最终消费者，并提供敏捷的内容开发服务和多种链接跳转手段，帮助企业客户更高效率的触达服务，促进营销转化；增加持续收益；提高会员活跃度和忠诚度；刺激会员消费；提升流水。该方案主要适用于如下场景：
app-preview-button组件 HTML <div> <p [style]="item.style" (click)="PreviewService.emit(item.event)" class="preview-element" > {{ item.text }} </p>
父组件开发 编写app-preview组件的JavaScript逻辑 父组件代码示例
app-preview-swiper组件 开发横滑组件时可定义的属性及其作用如表1所示，您可根据实际需求进行定义。 表1 横滑组件属性及作用 属性 作用 item.style 样式定义。 item.swiper.autoplay 是否自动轮播。 item.swiper.loop 是否循环。
app-preview-eCommerce组件 HTML <div class="ECommerce"> <swiper [autoplay]="false" [loop]="true" *ngIf="item.content.imageList.visibility === 'visible'">
JavaScript // 点击事件 events(val) { this.PreviewService.emit(val.event); } // 对数据做判断处理 transform(item, ...args ){ if (item.dateType === 0) { return item
OWSER、OPEN_URL事件，VIEW_PIC事件需在app-preview-image中单独处理。 模板预览事件类型 表1 事件类型及ActionTypes枚举值 事件类型 ActionTypes枚举值 查看大图 VIEW_PIC = 'VIEW_PIC' 打开URL OPEN_URL
app-preview-ticketImage组件 HTML <div [style]="item.style" class="ticketImage"> <div class="ticketImage_List"> <div // ngFor为循环指令 *ngFor="let
} } // 点击事件 events(val) { this.PreviewService.emit(val.event); } // 对数据做判断处理 transform(item, ...args ){ if (item.dateType === 0) { return item
键直达服务。10种交互方式可以有效缩短用户路径，实现意见直达客户。 图4 智能信息交互方式 支持多维度数据回传。 丰富的商家数据结构帮助实现精细化运营。 图5 智能信息数据维度及应用场景 支持商品提前曝光+一键跳转。有效缩短用户路径，实现点击率提升5-10倍。 图6 智能信息缩短用户路径
// ngIf为判断指令，true为显示，false为隐藏 // [item]=”item”是将item数据传入对应组件，组件内用item变量接收 <app-preview-text *ngIf="item.type ===
app-preview-text组件 HTML <div> <p class="preview-element text-element" [style]="item.style" (click)="PreviewService
app-preview-card-vouchers组件 app-preview-moreGoods组件 app-preview-ticketImage组件 父主题： 子组件开发
proportionM = 1; proportionD = 1; activeIndex = 0; sideboxElements; // 初始化数据 ngOnInit() { this.sideslipList = this.item?.sideslip?.sideslipList ||
以图1为例，该模板的预览视图由image、text、button三个子组件拼接而成。目前KooMessage的智能短信模板已支持11种类型的子组件开发，详见表1。对于各类型子组件，子组件代码示例提供了相应的HTML、CSS、JavaScript代码段供参考，部分组件无需编写CSS样式和J
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
