uniapp开发与js原生开发的其一不同之处在于，前者是SPA单页面开发，每个项目中只有一个index.html文件，所谓的页面跳转本质来说是不停重写当前页面来与用户进行交互。原生开发是多个页面进行页面间的跳转，像在script引入外部文件就更加方便高效。
接入广告的不同方式
原生插入banner广告
了解了uniapp开发与js原生开发的不同，首先我们先从轻松的原生来实现广告功能。正常的html文件，插入广告可以直接在head中写入
<!-- 加载GPT的库，该库完全加载后，便会处理 googletag 对象中已加入队列的所有命令。 -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag=window.googletag||{cmd:[]};
googletag.cmd.push(function(){
googletag.defineSlot(‘不同广告唯一的插槽内容’).addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
});
</script>
然后在需要插入广告的部分在body中写入
<div id='广告的ID' style='不同广告的尺寸，一般banner广告位的尺寸为：min-width:300px;min-height:250px;'>
<script>
googletag.cmd.push(function(){googletag.display('广告的ID');});
</script>
</div>
到此，在html文件中就可以插入不同尺寸的banner广告了。
原生插入插屏广告
插屏广告与banner广告有所不同，因为插屏广告是在页面跳转的时候展示，所以不需要盒子来让其填充，插屏广告自动全屏填充展示。所以直接在head中放入：
<!-- 加载GPT的库，该库完全加载后，便会处理 googletag 对象中已加入队列的所有命令。 -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag=window.googletag||{cmd:[]};
googletag.cmd.push(function(){
var slot=googletag.defineOutOfPageSlot('广告唯一插口标识',
googletag.enums.OutOfPageFormat.INTERSTITIAL);
//Slot returns null if the page or device doesnot support interstitials
//页面和设备不支持插页，slot返回null
if (slot) slot.addService(googletag.pubads());
googletag.enableServices();
//Consider delaying until first div on page
//延迟到第一个页面中第一个盒子加载出来
googletag.display(slot);
});
</script>
放在跳转页面中，在页面发生跳转时，插页广告可以自动插入。
SPA插入banner广告
声明：作者也是探索出来的笨办法，实现功能为主，肯定有更高效简洁，读起来赏心悦目的代码可以展示广告，欢迎指正。
由于SPA的页面切换是局部刷新而不是整体刷新，Vue Templates中是不允许出现Script标签的。虽然我们可以通过type来规避这个报错：type=“application/javascript”，但这并不能彻底解决问题。当你把script标签写在Vue templates中时，因为Vue会根据数据的变化动态渲染页面，会导致多次运行该代码。就会报错。
我们的解决办法是把Google AdSense js文件引入代码，可以放到index.html网页的head中，引入一次即可。然后把需要放在body中的启动代码放在自定义的window全局函数中，最后在vue文件的mounted生命周期中调用。
index.html
<head>
<!-- 加载GPT的库，该库完全加载后，便会处理 googletag 对象中已加入队列的所有命令。 -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
</head>
<script>
window['addAds'] = function() {
window.googletag = window.googletag || {
cmd: []
};
googletag.cmd.push(function() {
googletag
.defineSlot(
'插槽信息',
广告尺寸,
'广告ID'
)
.addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
});
}
</script>
index.vue（要引入广告的文件）
<template>
<!--广告展示盒子-->
<div class="adv" id="广告的ID"></div>
</template>
<script>
mounted(){
//调用全局函数
window.addAds();
//在页面中插入广告
this.pageOnload();
},
methods:{
pageOnload() {
var googletag = window.googletag || {
cmd: []
};
googletag.cmd.push(function() {
googletag.display("对应的广告ID");
});
},
//在跳转到另一个页面之前，销毁当前页面广告位，否则重复插入广告会报错
googletag.destroySlots();
},
</script>
<style>
//广告盒子的样式
.adv {
min-width: 300px;
min-height: 250px;
z-index: 7;
margin: 0 auto;
}
</style>
SPA插入插屏广告
插屏广告是在页面跳转过程中默认全屏插入展示，并不是在特定的盒子空间填充，所以只调用插入广告代码即可。这个项目对于插屏广告的需求是：在首页跳转详情页时展示插屏广告，默认五秒之后自动关闭广告，也可自己手动关闭广告。在作者多次尝试后发现：在SPA中，直接在页面里调用插入广告的全局方法，虽然页面跳转之后控制台加载了广告盒子，但是由于被限制了display:none; 插屏广告并未展示。最后只能暴力使其展示。
再次声明：作者也是探索出来的笨办法，实现功能为主，肯定有更高效简洁，读起来赏心悦目的代码可以展示广告，欢迎指正。
index.html
<!-- 加载GPT的库，该库完全加载后，便会处理 googletag 对象中已加入队列的所有命令。 -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag=window.googletag||{cmd:[]};
googletag.cmd.push(function(){
var slot=googletag.defineOutOfPageSlot('广告唯一插口标识',
googletag.enums.OutOfPageFormat.INTERSTITIAL);
//Slot returns null if the page or device doesnot support interstitials
//页面和设备不支持插页，slot返回null
if (slot) slot.addService(googletag.pubads());
googletag.enableServices();
//Consider delaying until first div on page
//延迟到第一个页面中第一个盒子加载出来
googletag.display(slot);
});
</script>
detialPage.vue（要跳转过来的详情页）
根据该项目对插屏广告的需求，首先设定一个五秒倒计时关闭的全屏广告盒子，然后控制这个盒子的显隐。
<template>
<view class="ADMask" v-if="showMask">
<view class="cancelBox">
<view class="wordBox">Reward in {{sec}} seconds</view>
<view class="iconBox" @click="cancelMask"></view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
//初次进入展示
showMask: true,
//倒计时秒数
sec: 5,
//定时器
timer: null,
}
},
mouted(){
//调用全局插屏广告
window.insertAD();
},
onLoad(){
//设置定时器，两秒之后调用展示广告方法
setTimeout(() => {
//广告关闭倒计时
this.countDown()
this.getTag()
}, 2000)
},
methods:{
//通过操作ins标签控制广告
getTag() {
//获取<ins>标签内容
let tagBox = document.getElementsByTagName("ins")
//展示<ins>标签
tagBox[0].style.display = 'block'
tagBox[0].style.position = 'fixed'
//设置宽高
tagBox[0].style.width = '96vw'
tagBox[0].style.height = '85vh'
tagBox[0].style.marginTop = '10vh'
//广告是最高层级
tagBox[0].style.zIndex = '2147483647'
tagBox[0].class = 'interAdv'
},
//倒计时
countDown() {
this.timer = setInterval(() => {
this.sec = this.sec - 1
this.close();
}, 1000)
},
//关闭定时器
close() {
if (this.sec == 0) {
clearInterval(this.timer);
this.sec = 0
this.cancelMask()
}
},
//关闭弹窗页面，关闭之后销毁广告盒子
cancelMask() {
let tagBox = document.getElementsByTagName("ins")
tagBox[0].style.display = 'none'
this.showMask = false
var slot = window.slot
googletag.destroySlots([slot]);
}
},
}
</script>
<style>
.ADMask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
//最高层级，与广告层级保持一致
z-index: 2147483646;
display: flex;
flex-direction: column;
align-items: center;
// justify-content: center;
.cancelBox {
width: 286rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0.1);
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 60rpx;
margin-left: 340rpx;
.wordBox {
font-size: 20rpx;
font-family: Gilroy Medium;
font-weight: normal;
color: #FFFFFF;
line-height: 26rpx;
}
.iconBox {
width: 48rpx;
height: 48rpx;
background: url('关闭图标地址') no-repeat;
background-size: 48rpx 48rpx;
}
}
}
</style>
SPA插入banner广告（较为简单版）
这版是三方给到的广告代码直接是ins代码格式，可以整块放在页面中，操作比较简单。
index.html
<head>
<script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=广告标识"
crossorigin="anonymous"></script>
</head>
<script>
//启动广告代码
window['addAds'] = function() {
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>
index.vue（要引入广告的文件）
<template>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-广告标识,与引入文件标识相同"
data-ad-slot="每个广告位唯一slot">
</ins>
<template>
<script>
export default {
mounted(){
window.addAds();
}
}
</script>
SPA插入banner广告（三方给的代码直接引入插件版）
三方给的代码，更为简单的版本，直接按照广告位放入，甚至不需要做调用操作。
index.html
<script type="text/javascript" async src="//c.pubguru.net/对应的域名文件"></script>
index.vue
<pubguru data-pg-ad="广告对应名称ID"></pubguru>
3097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
