PreivewComponent

基于 angular 和 WebComponent 实现的全平台全框架通用的智能信息模板预览组件、whatsApp渲染组件

更多疑问和细节可咨询 KooMessage 运营人员，或登录 KooMessage 官网 查询相关信息。

安装/Install

$ npm i @huaweicloud/km-preview-component

使用/Usage

For Vue

1.引入核心文件

main.ts 中引入 js 和 css 文件

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.引入图片资源

$ npm i copy-webpack-plugin

在 vue.config.js 中利用插件 copy-webpack-plugin 配置 configureWebpack

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 中的条件可按需引入

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 项目中使用预览组件

<temlpate>
    <km-aim-preview
        :frameworkData.prop="actualTemplateData"
        :selectedVendor.prop="actualFactory"
        :xxx="xxx"
    ></km-aim-preview>
</template>

For Angular

1.引入核心文件

angular.json 文件中 projects -> yourProjects -> architect -> build-> options 的 assets、style、script 配置

{
  "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 中添加如下配置

@NgModule({
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ],
}

html 中引入组件标签并传值

<temlpate>
    <km-aim-preview
        [frameworkData]="actualTemplateData"
        [selectedVendor]="actualFactory"
        [xxx]="xxx"
    ></km-aim-preview>
</template>

预览组件 API

说明：KooMessage 提供 4 种模板预览组件，分别为： |组件名 |描述 | | ------------- | :------------------------: | |km-aim-preview|智能信息模板预览组件| |km-aim-mobile-preview|智能信息模板预览组件（带手机框）| |km-vms-preview|智能信息基础版模板预览组件| |km-vms-mobile-preview|智能信息基础版模板预览组件（带手机框）|

在预览组件 API 中，frameworkData 为模板数据，文档底部给出 mock 示例，需配合模板数据查询接口使用，模板数据查询接口的返回值可直接作为 frameworkData 使用并传入，如需模板查询接口请跳转 KooMessage 产品文档 或联系 KooMessage 运营人员获取。

• km-aim-preview

| 参数名 | 描述 | 类型 | 默认值 | 必传项 | | -------------- | :------------------------: | ------------------------------------------------ | ------- | ------ | | frameworkData | 模板数据，用于渲染 | TemplateFramework | - | 是 | | selectedVendor | 选择使用何种供应商样式预览 | 'HUAWEI' | 'XIAOMI' |'OPPO' |'MEIZU' |'VIVO' | '' | 否 | | 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 | - | 是 | | selectedVendor | 模板在传入供应商样式下渲染 | 'HUAWEI' | 'XIAOMI' |'OPPO' |'MEIZU' |'VIVO' | '' | 是 |

效果预览：

Mock Data

{
  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,
};