advertisement

娱票广告组件使用文档

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 ~ :）