娱票广告组件使用文档

Install

npm install advertisement

类别 | 说明
----- | -----
Advertisement | 聚合后的广告组件 Banner | Banner 位，幻灯片式，自动播放，目前包含两种样式 Picture | 图片平铺展示, 1-3 张 FullScreen | 全屏展示, 支持多张滑屏切换 ExpandScreen | 可伸缩 Banner Custom AD Template | 自定义广告渲染逻辑

Advertisement

属性 | 类型 | 默认值 | 说明 ----- | ----- |----- |------ params | {} | | 广告接口请求参数，{ advertisingId, cityId, movieId, cinemaId }, 广告和城市ID必选，其他按情况而定 adtype | string | banner | 广告展示类型，可选值为 banner, fullscreen, picture , expandscreen, custom settings | {} | null | 修改 adtype 对应组件的默认配置 className | string | '' | css class 属性

Demo

import Advertisement from 'advertisement'

<Advertisement params={{cityId: 329, advertisingId: 9, movieId: 8029 }} adtype="picture"/>

Advertisement 是以下 3 中广告展示类型的再次封装，整合了广告数据的获取和数据统计的发送的API。当然，你也可以直接使用以下三种展示组件

组件通用属性

属性 | 类型 | 默认值 | 说明 ----- | ----- |----- |------ advertisements | [] | 接口返回 | 见接口返回数据， 比如, <Banner { ...resp.advertising } actions={API}/> actions | {} | | 广告统计 接口 settings | {} | null | 组件个性化设置

actions 属性说明

方法 | 类型 | 说明
----- | ----- |-----
sendView | func | 发送展示统计
sendClick | func | 发送点击统计
getClickURL | func | 获取点击跳转链接(包含点击统计) , 用跳转链接替代 sendClick

Banner

属性 | 类型 | 默认值 | 说明 ----- | ----- |----- |------ advertisements | [] | 接口返回 | 见接口返回数据， 比如, <Banner { ...resp.advertising } actions={API} settings={{dots:false}}/> actions | {} | | 见 actions settings | { mode, dots, height } | mode='right', dots=true, height=75 | mode: ['center', 'right'], dots: [true, false], dots 制定是否显示点标, mode 指定点标位置 className | string | '' | css class 属性

Demo

import { Banner } from 'advertisement'

<Banner advertisements={BANNER.advertising.advertisements} actions={API} settings={{mode: 'center'}}/>

Picture

属性 | 类型 | 默认值 | 说明 ----- | ----- |----- |------ advertisements | [] | 接口返回 | 见接口返回数据， 比如, <Picture { ...resp.advertising } actions={API} className="Demo"/> actions | {} | | 见 actions settings | {} | null | 暂未使用 className | string | '' | css class 属性

Demo

import { Picture } from 'advertisement'

<Picture
    advertisements={PICTURE.advertising.advertisements.slice(0, 2)}
    actions={API}/>

FullScreen

属性 | 类型 | 默认值 | 说明 ----- | ----- |----- |------ advertisements | [] | 接口返回 | 见接口返回数据， 比如, <FullScreen { ...resp.advertising } actions={API}/> actions | {} | | 见 actions settings | {} | null | 暂未使用 className | string | '' | css class 属性 onceMode | boolean | false | minimode是否只展示一次

Demo

import { FullScreen } from 'advertisement'

<FullScreen advertisements={FULLSCREEN.advertising.advertisements} actions={API} onceMode={true} />

ExpandScreen

属性 | 类型 | 默认值 | 说明 ----- | ----- |----- |------ advertisements | [] | 接口返回 | 见接口返回数据， 比如, <FullScreen { ...resp.advertising } actions={API}/> actions | {} | | 见 actions settings | {} | { height: 165 } | 自定义展示高度 className | string | '' | css class 属性

Demo

import { Advertisement } from 'advertisement'

<Advertisement params={{advertisingId: 193, cityId: 10}} adtype='expandscreen'/>

Custom AD Template

/*
    props = { advertisements, actions, parms, showType, ...}
    
    数据将自动由父组件传入，内部的自组件会自动具有上述属性，
    自组件可直接处理渲染逻辑
*/
const CustomADS = props => {
    console.dir(props);
    return <div> Hello World </div>
}

<Advertisement params={{cityId: 10, advertisingId: 193}} adtype='custom'>
    <CustomADS/>
</Advertisement>

DEMO 展示

如果还不明确或者想看下具体的展示效果，可以 clone 本项目, 运行 demo 查看具体效果, 步骤如下

pepper upgrade # 升级 pepper 至最新版, 包含类库打包

npm install # 或者 yarn install

npm start # open browser at http://0.0.0.0:8080

问题反馈

• Issues
• pepper 吐槽的地方
• Welcome PR

Enjoy ~ :）