advertisement v1.2.6

娱票广告组件使用文档

Install

npm install advertisement

Advertisement

Demo

import Advertisement from 'advertisement'

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

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

组件通用属性

actions 属性说明

Banner

Demo

import { Banner } from 'advertisement'

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

Picture

Demo

import { Picture } from 'advertisement'

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

FullScreen

Demo

import { FullScreen } from 'advertisement'

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

ExpandScreen

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