README
娱票广告组件使用文档
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 ~ :)