# PreivewComponent 基于 angular 和 WebComponent 实现的全平台全框架通用的智能信息模板预览组件 更多疑问和细节可咨询 KooMessage 运营人员，或登录 [KooMessage 官网](https://www.huaweicloud.com/product/koomessage.html) 查询相关信息。 ## 安装/Install ```nodejs $ npm i @huaweicloud/km-preview-component ``` ## 使用/Usage ### For Vue ###### 1.引入核心文件 `main.ts` 中引入 js 和 css 文件 ```nodejs import '../node_modules/@huaweicloud/km-preview-component/km-preview-component-wc.js'; import '../node_modules/@huaweicloud/km-preview-component/km-preview-component-styles.css' ``` ###### 2.引入图片资源 ```nodejs $ npm i copy-webpack-plugin ``` 在 `vue.config.js` 中利用插件 copy-webpack-plugin 配置 configureWebpack ```typescript const CopyWebpackPlugin = require("copy-webpack-plugin"); module.exports = defineConfig({ configureWebpack: { plugins: [ new CopyWebpackPlugin({ patterns: [ { from: "node_modules/@huaweicloud/km-preview-component/km-preview-img", to: "km-preview-img", globOptions: { ignore: [".*"], }, }, ], }), ], }, }); ``` ###### 3. vue 项目中注册预览组件的自定义标签 在 `vue.config.js` 中配置 chainWebpack 的 isCustomElement，如下 switch 中的条件可按需引入 ```typescript module.exports = defineConfig({ chainWebpack: (config) => { config.module .rule("vue") .use("vue-loader") .tap((options) => { options.compilerOptions = { ...options.compilerOptions, isCustomElement: (tag) => { return tag.includes('km-'); }, }; return options; }); }, }); ``` ###### 4. vue 项目中使用预览组件 ```HTML ``` ### For Angular ###### 1.引入核心文件 `angular.json` 文件中 _projects_ -> _yourProjects_ -> _architect_ -> _build_-> _options_ 的 assets、style、script 配置 ```json { "assets": [ { "glob": "**/*", "input": "node_modules/@huaweicloud/km-preview-component/km-preview-img", "output": "km-preview-img" } ], "style": [ "node_modules/@huaweicloud/km-preview-component/km-preview-component-styles.css" ], "script": [ "node_modules/@huaweicloud/km-preview-component/km-preview-component-wc.js" ] } ``` ###### 2.angular 项目中使用预览组件 angular 项目中注册自定义元素，在引用组件的 module.ts 中添加如下配置 ```typescript @NgModule({ schemas: [ CUSTOM_ELEMENTS_SCHEMA ], } ``` html 中引入组件标签并传值 ```html ``` ## 预览组件 API 说明：KooMessage 提供 4 种模板预览组件，分别为： |组件名 |描述 | | ------------- | :------------------------: | |km-aim-preview|智能信息模板预览组件| |km-aim-mobile-preview|智能信息模板预览组件（带手机框）| |km-vms-preview|智能信息基础版模板预览组件| |km-vms-mobile-preview|智能信息基础版模板预览组件（带手机框）| 在预览组件 API 中，frameworkData 为模板数据，文档底部给出 mock 示例，需配合模板数据查询接口使用，模板数据查询接口的返回值可直接作为 frameworkData 使用并传入，如需模板查询接口请跳转 [KooMessage 产品文档](https://support.huaweicloud.com/api-koomessage/ListAIMTemplates.html) 或联系 KooMessage 运营人员获取。 - **km-aim-preview** | 参数名 | 描述 | 类型 | 默认值 | 必传项 | | -------------- | :------------------------: | ------------------------------------------------ | ------- | ------ | | frameworkData | 模板数据，用于渲染 | TemplateFramework | - | 是 | | selectedVendor | 选择使用何种供应商样式预览 | 'HUAWEI' \| 'XIAOMI' \|'OPPO' \|'MEIZU' \|'VIVO' | 'HUAWEI' | 否 | | lang | 语言 | 'zh-cn' \| 'en-us | 'zh-cn' | 否 | | outerWidth | 缩放比例调整 | number | 400 | 否 | 效果预览： - **km-aim-mobile-preview** | 参数名 | 描述 | 类型 | 默认值 | 必传项 | | --------------------- | :------------------------: | ------------------------------------------------ | -------- | ------ | | frameworkData | 模板数据，用于渲染 | TemplateFramework | - | 是 | | selectedVendor | 默认活跃的供应商 | 'HUAWEI' \| 'XIAOMI' \|'OPPO' \|'MEIZU' \|'VIVO' | 'HUAWEI' | 否 | | isVendorButtonsActive | 是否显示厂商选择按钮 | boolean | false | 否 | | isQrCodeActive | 是否显示二维码开关 | boolean | false | 否 | | lang | 语言 | 'zh-cn' \| 'en-us | 'zh-cn' | 否 | | emitAction | 是否启用模板内点击事件回调 | boolean | false | 否 | | 事件名 | 描述 | 参数 | 必传项 | | ----------------- | :----------------: | ---------------------- | ------ | | emittedActionData | 模板内点击事件回调 | event: ActionEmitModel | 否 | 效果预览： - **km-vms-preview** | 参数名 | 描述 | 类型 | 默认值 | 必传项 | | ------------- | :----------------------: | ---- | ------ | ------ | | frameworkData | 基础版模板数据，用于渲染 | obj | - | 是 | 效果预览： - **km-vms-mobile-preview** | 参数名 | 描述 | 类型 | 默认值 | 必传项 | | -------------- | :------------------------: | ------------------------------------------------ | ------ |-----| | frameworkData | 基础版模板数据，用于渲染 | obj | - | 是 | | factory | 模板在传入供应商样式下渲染 | 'HUAWEI' \| 'XIAOMI' \|'OPPO' \|'VIVO' \|'APPLE' | 'HUAWEI' | 否 | 效果预览： ## Mock Data ```typescript { id: "5d8857a6-ef8d-4cbd-ab24-539c11f67bd0", tpl_id: "700006021", card_id: "RedPacket", tpl_name: "测试oppo自定义背景图", domain_id: "231724915a62455ca356e10a085c9a23", scene: "智能信息模版", use_id: 2, sub_type: 1, sms_example: "你有一条新消息请查收", sms_template: "0", match_type: null, prereview_remark: "自动驳回", internal_status: 3, final_review_remark: null, sms_signs: [], created_at: "2023-07-07", auto_save: "no", pages: [ { page_order: 1, contents: [ { page_content_id: "eb63d566-2917-42ad-a864-67d61bae54d1", content_id: "eb63d566-2917-42ad-a864-67d61bae54d1", type: "image", content: null, content_child: null, src_type: 1, src: "HWR100004708", cover: null, is_text_title: null, action_type: "OPEN_URL", position_number: 1, visible: 1, currency_display: 1, oppo_background: "HWR100004709", vivo_background: null, voucher_type: null, validity_type: null, obs_file_url: "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/mfbcrlhpzr-17594951415287751.png", obs_cover_url: null, obs_oppo_url: "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/nflpiwwrpf-17598695691973370.jpg", obs_vivo_url: null, ratio: null, button_type: null, action: { target: "https://www.baidu.com", content: null, package_name: null, floor_url: null, floor_type: null, body: null, subject: null, description: null, begin_time: null, end_time: null, address: null, longitude: null, latitude: null, text_button: null, mode: null, }, material_infos: [ { material_url: "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/mfbcrlhpzr-17594951415287751.png", material_type: "normal", }, { material_url: "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/nflpiwwrpf-17598695691973370.jpg", material_type: "oppo_background", }, ], }, { page_content_id: "f1ee81a9-14a7-449d-a767-21bec2613b12", content_id: "f1ee81a9-14a7-449d-a767-21bec2613b12", type: "text", content: "测试", content_child: null, src_type: null, src: null, cover: null, is_text_title: "false", action_type: null, position_number: 2, visible: 1, currency_display: 1, oppo_background: null, vivo_background: null, voucher_type: null, validity_type: null, obs_file_url: null, obs_cover_url: null, obs_oppo_url: null, obs_vivo_url: null, ratio: null, button_type: null, action: null, material_infos: null, }, { page_content_id: "bbcc9c3b-1ea2-4ea9-a1b1-3297618dc136", content_id: "bbcc9c3b-1ea2-4ea9-a1b1-3297618dc136", type: "text", content: "测试", content_child: null, src_type: null, src: null, cover: null, is_text_title: "true", action_type: null, position_number: 3, visible: 1, currency_display: 1, oppo_background: null, vivo_background: null, voucher_type: null, validity_type: null, obs_file_url: null, obs_cover_url: null, obs_oppo_url: null, obs_vivo_url: null, ratio: null, button_type: null, action: null, material_infos: null, }, { page_content_id: "121c812c-d5e5-467f-bd2b-1af0e7395a67", content_id: "121c812c-d5e5-467f-bd2b-1af0e7395a67", type: "text", content: "测试", content_child: null, src_type: null, src: null, cover: null, is_text_title: "false", action_type: null, position_number: 4, visible: 1, currency_display: 1, oppo_background: null, vivo_background: null, voucher_type: null, validity_type: null, obs_file_url: null, obs_cover_url: null, obs_oppo_url: null, obs_vivo_url: null, ratio: null, button_type: null, action: null, material_infos: null, }, { page_content_id: "94e98f89-1442-4325-b41c-b633bf9f1241", content_id: "94e98f89-1442-4325-b41c-b633bf9f1241", type: "button", content: "按钮1", content_child: null, src_type: null, src: null, cover: null, is_text_title: null, action_type: "OPEN_URL", position_number: 5, visible: 1, currency_display: 1, oppo_background: null, vivo_background: null, voucher_type: null, validity_type: null, obs_file_url: null, obs_cover_url: null, obs_oppo_url: null, obs_vivo_url: null, ratio: null, button_type: null, action: { target: "https://www.baidu.com", content: null, package_name: null, floor_url: null, floor_type: null, body: null, subject: null, description: null, begin_time: null, end_time: null, address: null, longitude: null, latitude: null, text_button: null, mode: null, }, material_infos: null, }, ], }, ], params: [], factorys: [ { factory_type: "HUAWEI", state: 0, }, { factory_type: "XIAOMI", state: 0, }, { factory_type: "OPPO", state: 1, }, { factory_type: "VIVO", state: 0, }, ], old_pages: null, }; ```