uniapp开发与js原生开发的其一不同之处在于,前者是SPA单页面开发,每个项目中只有一个index.html文件,所谓的页面跳转本质来说是不停重写当前页面来与用户进行交互。原生开发是多个页面进行页面间的跳转,像在script引入外部文件就更加方便高效。
了解了uniapp开发与js原生开发的不同,首先我们先从轻松的原生来实现广告功能。正常的html文件,插入广告可以直接在head中写入
然后在需要插入广告的部分在body中写入
到此,在html文件中就可以插入不同尺寸的banner广告了。
插屏广告与banner广告有所不同,因为插屏广告是在页面跳转的时候展示,所以不需要盒子来让其填充,插屏广告自动全屏填充展示。所以直接在head中放入:
放在跳转页面中,在页面发生跳转时,插页广告可以自动插入。
声明:作者也是探索出来的笨办法,实现功能为主,肯定有更高效简洁,读起来赏心悦目的代码可以展示广告,欢迎指正。
由于SPA的页面切换是局部刷新而不是整体刷新,Vue Templates中是不允许出现script标签的。虽然我们可以通过type来规避这个报错:type=“application/javascript”,但这并不能彻底解决问题。当你把script标签写在Vue templates中时,因为Vue会根据数据的变化动态渲染页面,会导致多次运行该代码。就会报错。
我们的解决办法是把Google AdSense js文件引入代码,可以放到index.html网页的head中,引入一次即可。然后把需要放在body中的启动代码放在自定义的window全局函数中,最后在vue文件的mounted生命周期中调用。
index.html
index.vue(要引入广告的文件)
插屏广告是在页面跳转过程中默认全屏插入展示,并不是在特定的盒子空间填充,所以只调用插入广告代码即可。这个项目对于插屏广告的需求是:在首页跳转详情页时展示插屏广告,默认五秒之后自动关闭广告,也可自己手动关闭广告。在作者多次尝试后发现:在SPA中,直接在页面里调用插入广告的全局方法,虽然页面跳转之后控制台加载了广告盒子,但是由于被限制了 插屏广告并未展示。最后只能暴力使其展示。
再次声明:作者也是探索出来的笨办法,实现功能为主,肯定有更高效简洁,读起来赏心悦目的代码可以展示广告,欢迎指正。
index.html
detialPage.vue(要跳转过来的详情页)
这版是三方给到的广告代码直接是ins代码格式,可以整块放在页面中,操作比较简单。
index.html
index.vue(要引入广告的文件)
三方给的代码,更为简单的版本,直接按照广告位放入,甚至不需要做调用操作。
index.html
index.vue