组件包介绍

版本 { #version }

总包

• @tencent/mktui@1.1.22

模块包

1. @tencent/mktui-adcreative@1.1.8
2. @tencent/mktui-adtargeting@1.1.4
3. @tencent/mktui-report@1.1.0
4. @tencent/mktui-tools@1.1.2

组件包信息 { #info }

1. 支持的 Marketing API版本：v1.1
2. 浏览器兼容性：ie9+、chrome60+
3. 依赖：react@16.3.1+、react-dom@16.3.1+

Marketing UI 组成 { #components }

Marketing UI 基于React框架，当前已包括广告创意、广告定向和报表模块。各个模块相互独立，开发者可根据自己的需求选择使用。为了保证线上版本的稳定性，我们会上报组件的版本使用信息，如您有异议，可联系我们。

组件包

Marketing UI 提供一个总的组件包，包名为@tencent/mktui。组件包包含四个独立模块，创意模块 (AdCreative) 、定向模块 (AdTargeting)、报表模块 (Report) 和 工具模块 (Tools)。投放流程中的每一个模块（创意和定向）又各自包含两个部分，React组件 和 业务逻辑组件，报表模块和工具模块只包含 React 组件。 同时，Marketing UI 也提供各个模块单独的包，即 @tencent/mktui-adcreative、@tencent/mktui-adtargeting、@tencent/mktui-report、@tencent/mktui-tools，分别对应创意、定向、报表、工具模块。 引用组件包可以使用包里的所有组件，各个组件相互独立，也可以单独使用。具体的使用方法见对应的组件文档。 组件包结构如下所示：

在安装完成@tencent-mktui组件包之后，开发者可通过以下方式使用各模块：

import MKTUI from '@tencent/mktui';
const { AdCreative, AdTargeting, Report, Tools } =  MKTUI;
const { AdCreativeForm, AdCreativeUtils } = AdCreative;
const { AdTargetingForm, AdTargetingUtils } = AdTargeting;
const { ReportTable } = Report;
const { ImageClipper } = Tools;

如果选择模块包进行安装，可使用以下方式：

// 创意
import AdCreative from '@tencent/mktui-adcreative';
const { AdCreativeForm, AdCreativeUtils } = AdCreative;

// 定向
import AdTargeting from '@tencent/mktui-adtargeting';
const { AdTargetingForm, AdTargetingUtils } = AdTargeting;

// 报表
import Report from '@tencent/mktui-report';
const { ReportTable } = Report;

// 工具
import Tools from '@tencent/mktui-tools';
const { ImageClipper } = Tools;

React组件

当前创意模块包含的React组件即 AdcreativeForm，定向模块为 AdtargetingForm，报表模块为 ReportTable，工具模块为图片裁剪组件 ImageClipper。开发者引入对应的表单组件后，按照文档传入props属性即可渲染UI。

业务逻辑组件

创意模块的逻辑组件 AdcreativeUtils，包含与创意表单相关的公共方法及表单验证方法，开发者可直接调用封装好的验证逻辑对表单数据进行验证，或调用公共方法初始化默认数据。定向模块的逻辑组件 AdtargetingUtils 则包含与定向表单验证相关的方法。

如何安装组件包 { #how-to-install }

在目前的版本中，我们提供两种组件引用方式，CDN引用和npm install 。

安装组件

方式一、CDN

<!-- react 官方资源，参见 https://reactjs.org/docs/cdn-links.html -->
<script crossorigin src=https://unpkg.com/react@16/umd/react.production.min.js></script>
<script crossorigin src=https://unpkg.com/react-dom@16/umd/react-dom.production.min.js></script>
<!-- Marketing UI 资源 （总包和模块包可选择其一） -->

// 总包
<script type=text/javascript src=https://i.gtimg.cn/qzone/biz/gdt/lib/mktui/1.1.22/js/mktui.min.js></script>

// 模块包
<script type=text/javascript src=https://i.gtimg.cn/qzone/biz/gdt/lib/mktui-adcreative/1.1.8/js/mktui-adcreative.min.js></script>
<script type=text/javascript src=https://i.gtimg.cn/qzone/biz/gdt/lib/mktui-adtargeting/1.1.4/js/mktui-adtargeting.min.js></script>
<script type=text/javascript src=https://i.gtimg.cn/qzone/biz/gdt/lib/mktui-report/1.1.0/js/mktui-report.min.js></script>
<script type=text/javascript src=https://i.gtimg.cn/qzone/biz/gdt/lib/mktui-tools/1.1.2/js/mktui-tools.min.js></script>

// webpack.config.js，需要配置externals
module.exports = {
    ...
    externals: {
        '@tencent/mktui': 'MKTUI',
        '@tencent/mktui-adcreative': 'MKTUI_ADCREATIVE',
        '@tencent/mktui-adtargeting': 'MKTUI_ADTARGETING',
        '@tencent/mktui-report': 'MKTUI_REPORT',
        '@tencent/mktui-tools': 'MKTUI_TOOLS',
        'react': 'React',
        'react-dom': 'ReactDOM'
    }
}

方式二、npm install
用户可通过 npm install 的方式安装组件包。如您对此方式不熟悉，可参考 npm 官方介绍 。 具体安装命令如下：

// 总包
npm install https://d3g.qq.com/tsa/tencent-mktui-1.1.22.tgz

// 模块包
npm install https://d3g.qq.com/tsa/tencent-mktui-adcreative-1.1.8.tgz
npm install https://d3g.qq.com/tsa/tencent-mktui-adtargeting-1.1.4.tgz
npm install https://d3g.qq.com/tsa/tencent-mktui-report-1.1.0.tgz
npm install https://d3g.qq.com/tsa/tencent-mktui-tools-1.1.2.tgz

Tips：使用此方法安装包时，可能会因为网络原因导致安装失败。可尝试以下解决方案： – 删除 node_modules 包，并清除npm本地缓存：npm cache clean -f

• 配置国内npm镜像进行下载，或通过浏览器下载包到本地后，再通过以下方式安装：npm install /path/to/tencent-mktui-1.1.xx.tgz

引用样式

加载公共样式
方式一、CDN

<link rel=stylesheet type=text/css href=https://i.gtimg.cn/qzone/biz/gdt/lib/mktui/1.1.22/css/mktui.css>

方式二、React组件中引入
只有总包里面有样式文件，如果使用的是模块包，请使用上述方式一引入样式。

import '@tencent/mktui/lib/styles/css/mktui.css';

webpack 配置使用这种方式引入样式时，需要在您项目的 webpack 配置中增加样式相关的loader，如下所示。 loaders 可通过npm安装：

npm i --save-dev babel-loader css-loader url-loader svg-url-loader

webpack配置：

// webpack.config.js
module.exports = {
     ...
     rules: [{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.(css)$/,
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                }]
            }, {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader'
                }
            }, {
                test: /\.svg$/,
                loader: 'svg-url-loader'
            }]
}