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

@huaweicloud/km-preview-component

PreivewComponent

安装/Install

使用/Usage

For Vue

1.引入核心文件

2.引入图片资源

3. vue 项目中注册预览组件的自定义标签

4. vue 项目中使用预览组件

For Angular

1.引入核心文件

2.angular 项目中使用预览组件

预览组件 API

Mock Data

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@huaweicloud/km-preview-component

PreivewComponent

安装/Install

使用/Usage

For Vue

1.引入核心文件

2.引入图片资源

3. vue 项目中注册预览组件的自定义标签

4. vue 项目中使用预览组件

For Angular

1.引入核心文件

2.angular 项目中使用预览组件

预览组件 API

Mock Data

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads