banner广告组件
npm install @firstshow/ad-banner@firstshow/ad-bannerrequest合法域名 中增加如下配置
text
https://advertising.adcomeon.com
https://fshows-ecs-pro.cn-hangzhou.log.aliyuncs.com
`
使用方法
$3
`bash
npm install @firstshow/ad-banner --save
`
$3
1. 小程序开发者工具 -> 详情(工具右上角) -> 本地设置 -> 使用 npm 模块
2. 小程序开发者工具 -> 工具 -> 构建 npm
3. 构建成功后小程序代码包中将产出 "miniprogram_npm" 文件夹
$3
分两种场景：
场景一. 先预加载组件，一段时间后再进行展示。
1. 页面的 json 文件中做如下配置
`json
{
"usingComponents": {
"ad-banner": "@firstshow/ad-banner"
}
}
`
2. 页面的 wxml文件
`html
show="{{showAd}}"
flowMasterId="{{flowMasterId}}"
openId="{{openId}}"
/>
`
- openId若为异步获取的，保证获取到openId后再将toLoadAd设置为true，否则会提示缺少必传参数。
- toLodaAd初始值设置为false，页面onLoad时将其设置为true，这时候只是加载组件，组件为隐藏状态，这时有足够的时间去获取广告数据。待要展示广告时，将showAd设为true，组件变为显示状态。
3. 页面的 js文件
`js
Page({
data: {
openId: 'o2BFN5Y5RDqAaJwNilSNtpA49Jlf', // 用户openId
flowMasterId: 'fshows', // 流量主标识，联系运营人员提供
toLoadAd: false, // 加载广告组件（通过切换这个标识，来重新获取广告数据）
showAd: false // 是否显示广告
},
onLoad () {
// 加载组件
this.setData({
toLoadAd: true
})
},
/**
* @function 显示广告
*/
showAd () {
this.setData({
showAd: true
})
}
})
`
场景二. 进入页面立即展示。
1. 页面的 json 文件中做如下配置
`json
{
"usingComponents": {
"ad-banner": "@firstshow/ad-banner"
}
}
`
1. 页面的 wxml文件
`html
openId="{{openId}}"
flowMasterId="xxx"
show="{{showAd}}"
bind:onAdInfoReady="onAdInfoReady"
>
`
3. 页面的 js文件
`js
Page({
data: {
openId: '', // 用户openId
flowMasterId: 'fshows', // 流量主标识，联系运营人员提供
showAd: false // 是否显示广告
},
onLoad () {
// 模拟异步获取openId
setTimeout(() => {
this.setData({
openId: 'o2BFN5Y5RDqAaJwNilSNtpA49Jlg'
})
}, 100)
},
/**
* @function 显示广告
*/
showAd () {
this.setData({
showAd: true
})
},
/**
* @function 广告数据加载完后显示广告
*/
onAdInfoReady () {
this.showAd()
}
})
``