实战13_应用广告的开发|uniapp专题

本节主要讲解开屏广告的做法，讲解如何在应用启动中插入广告。

# 关于开屏广告

每次打开应用，进入到首页之前，都需要等待一段时间，都会有一个 logo 的封面，然后再出现一个广告。

那个封面就是应用的启动页。启动页的作用除了缓和用户等待的焦虑情绪外，还有为 app 定调性的作用，现在有很多 app 的引导页已经变成了广告位，用以实现盈利。

那个出现的广告就是开屏广告，开屏广告是在 app 启动时出现的广告，一般展示倒数固定时间（5秒），展示完毕后自动关闭并进入 app 主页面。

# 开屏广告的来源与发展

App 发展前期，市场上4G网络还未兴起，甚至部分地区仍存在2G的网络，缓慢的网络加之 app 自身量级的增加，致使启动时需要一定的加载时间，空白加载页的展示无疑是影响用户体验的，于是众多 app 设计了一系列启动页的加载图片或者小动画作为缓冲；但随着互联网广告商业模式的发展，广告主开始盯上这块高地，开屏页面也渐渐沦为投放广告的首要之地，后期网速虽有所提升，但开屏页已然成为媒体 app 宣传活动，广告主导流变现的一种形式。

开屏广告的跳转一般都会到广告主的落地页，这里的设计就是是到达广告主的 H5 商品页

整个交互逻辑可以这样设定：广告内容可以在上一次打开应用时，开启预加载存于本地，在下次用户打开应用判断当前时间离开应用的时间是否超过一个时间段，如果超过这个时间则广告出现。用户离开时记录离开时间，给下一次进入做判断。

流程逻辑：

首先我们先新增注册一个广告页面，并改动一下启动页，在 pages.json 设定为第一个页面（pages节点的第一项为应用入口页）。

"pages": [
	{
	    "path" : "pages/account/ad",
	    "style" : {
			"navigationBarTitleText": "广告页",
			"navigationStyle": "custom",
			"app-plus":{
				"titleNView": false
			}
		}
	},
]

@前端进阶之旅: 代码已经复制到剪贴板

我们需要在 app.vue 入口文件判断用户进入应用以及离开应用，并记录下时间。进入应用的时间如果超过需要显示广告的时间(暂定10分钟) ，进入广告页后广告的内容及逻辑由广告页内部决定。

// app.vue
onShow() {
	console.log('App Show')
	let adShowTime = (10 * 60 * 1000)  // 10分钟（单位毫秒）
	let nowTime = (new Date()).getTime()
	let leaveTime = this.$store.state.leaveTime
	if ((nowTime - leaveTime) > adShowTime) {
		console.log('出现广告吧')
		setTimeout(() => {
			uni.navigateTo({
			    url: '/pages/account/ad'
			});
		}, 10);
	}
},
onHide() {
	console.log('App Hide')
	// 记录离开时间
	this.$store.commit('storeLeaveTime')
}

@前端进阶之旅: 代码已经复制到剪贴板

记录的离开时间由 store 处理，方便全局调用：

// store/index.js
const store = new Vuex.Store({
	state: {
		leaveTime: 0
	},
	mutations: {
		storeLeaveTime(state, payload) { // 记录离开时间
			let date = new Date()
			state.leaveTime = date.getTime()
		},
	}
})

@前端进阶之旅: 代码已经复制到剪贴板

在广告页里面进行处理广告内容，处理显示的广告内容，显示时间，跳转页面等。

关键代码：

<view class="logo-bg">
	logo 页
</view>
<!-- 广告页 -->
<view class="ad-bg" :class="{active: isShowAd}">
	<image class="ad" :src="picture" mode="aspectFill"></image>
	<view class="close" @click="close">跳过</view>
</view>
onShow () {
	this.getAd()
	let date = new Date()
	this.startTime = date.getTime()
},
methods:{
	getAd () {
		// 初始化 isShowAd，防止缓存
		this.isShowAd = false
		apiAd().then(res => {
			let date = new Date()
			let nowTime = date.getTime()

			// 请求时间超过logo关闭（adWaitTime）的时间情况下直接显示广告
			if ((nowTime - this.startTime) > this.adWaitTime) {
				this.isShowAd = true

				this.picture = res.mock.ad
			} else { // 如果请求时间未超过logo关闭（adWaitTime）的时间情况下，等待logo关闭时间再显示广告
				let wait = this.adWaitTime - (nowTime - this.startTime)

				// this.closeTime =
				setTimeout(() => {
					this.isShowAd = true
					this.picture = res.mock.ad
				}, wait)
			}
		})

		// 整个开屏广告不大于8秒
		this.adTimer = setTimeout(() => {
			this.close()
		}, this.adShowTime);
	},
	// 关闭广告页
	close () {
		// 清除计时器
		clearTimeout(this.adTimer)
		// 进入到首页
		uni.switchTab({
		    url: '/pages/index/index'
		});
	}
}

@前端进阶之旅: 代码已经复制到剪贴板

进入页面的时候显示 logo 页，加载广告完显示广告内容，然后自动关闭页面跳转到首页。

# 小结

开屏广告的作用和实现逻辑；
开屏广告应用的就是生命周期的使用，监听应用的生命周期完成功能。
本章代码 uni-course-实战开发开屏广告页。

本节主要讲解开屏广告的做法，讲解如何在应用启动中插入广告。

# 关于开屏广告

每次打开应用，进入到首页之前，都需要等待一段时间，都会有一个 logo 的封面，然后再出现一个广告。

那个出现的广告就是开屏广告，开屏广告是在 app 启动时出现的广告，一般展示倒数固定时间（5秒），展示完毕后自动关闭并进入 app 主页面。

# 开屏广告的来源与发展

App 发展前期，市场上4G网络还未兴起，甚至部分地区仍存在2G的网络，缓慢的网络加之 app 自身量级的增加，致使启动时需要一定的加载时间，空白加载页的展示无疑是影响用户体验的，于是众多 app 设计了一系列启动页的加载图片或者小动画作为缓冲；但随着互联网广告商业模式的发展，广告主开始盯上这块高地，开屏页面也渐渐沦为投放广告的首要之地，后期网速虽有所提升，但开屏页已然成为媒体 app 宣传活动，广告主导流变现的一种形式。

开屏广告的跳转一般都会到广告主的落地页，这里的设计就是是到达广告主的 H5 商品页

流程逻辑：

首先我们先新增注册一个广告页面，并改动一下启动页，在 pages.json 设定为第一个页面（pages节点的第一项为应用入口页）。

"pages": [
	{
	    "path" : "pages/account/ad",
	    "style" : {
			"navigationBarTitleText": "广告页",
			"navigationStyle": "custom",
			"app-plus":{
				"titleNView": false
			}
		}
	},
]

@前端进阶之旅: 代码已经复制到剪贴板

// app.vue
onShow() {
	console.log('App Show')
	let adShowTime = (10 * 60 * 1000)  // 10分钟（单位毫秒）
	let nowTime = (new Date()).getTime()
	let leaveTime = this.$store.state.leaveTime
	if ((nowTime - leaveTime) > adShowTime) {
		console.log('出现广告吧')
		setTimeout(() => {
			uni.navigateTo({
			    url: '/pages/account/ad'
			});
		}, 10);
	}
},
onHide() {
	console.log('App Hide')
	// 记录离开时间
	this.$store.commit('storeLeaveTime')
}

@前端进阶之旅: 代码已经复制到剪贴板

记录的离开时间由 store 处理，方便全局调用：

// store/index.js
const store = new Vuex.Store({
	state: {
		leaveTime: 0
	},
	mutations: {
		storeLeaveTime(state, payload) { // 记录离开时间
			let date = new Date()
			state.leaveTime = date.getTime()
		},
	}
})

@前端进阶之旅: 代码已经复制到剪贴板

在广告页里面进行处理广告内容，处理显示的广告内容，显示时间，跳转页面等。

关键代码：

<view class="logo-bg">
	logo 页
</view>
<!-- 广告页 -->
<view class="ad-bg" :class="{active: isShowAd}">
	<image class="ad" :src="picture" mode="aspectFill"></image>
	<view class="close" @click="close">跳过</view>
</view>
onShow () {
	this.getAd()
	let date = new Date()
	this.startTime = date.getTime()
},
methods:{
	getAd () {
		// 初始化 isShowAd，防止缓存
		this.isShowAd = false
		apiAd().then(res => {
			let date = new Date()
			let nowTime = date.getTime()

			// 请求时间超过logo关闭（adWaitTime）的时间情况下直接显示广告
			if ((nowTime - this.startTime) > this.adWaitTime) {
				this.isShowAd = true

				this.picture = res.mock.ad
			} else { // 如果请求时间未超过logo关闭（adWaitTime）的时间情况下，等待logo关闭时间再显示广告
				let wait = this.adWaitTime - (nowTime - this.startTime)

				// this.closeTime =
				setTimeout(() => {
					this.isShowAd = true
					this.picture = res.mock.ad
				}, wait)
			}
		})

		// 整个开屏广告不大于8秒
		this.adTimer = setTimeout(() => {
			this.close()
		}, this.adShowTime);
	},
	// 关闭广告页
	close () {
		// 清除计时器
		clearTimeout(this.adTimer)
		// 进入到首页
		uni.switchTab({
		    url: '/pages/index/index'
		});
	}
}

@前端进阶之旅: 代码已经复制到剪贴板

进入页面的时候显示 logo 页，加载广告完显示广告内容，然后自动关闭页面跳转到首页。

# 小结

开屏广告的作用和实现逻辑；
开屏广告应用的就是生命周期的使用，监听应用的生命周期完成功能。
本章代码 uni-course-实战开发开屏广告页。