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
以上就是本篇文章【uniapp开发的H5页面接入谷歌广告】的全部内容了，欢迎阅览 ！ 文章地址：http://sicmodule.glev.cn/news/12885.html 资讯 企业新闻 行情 企业黄页 同类资讯 首页 网站地图 返回首页 歌乐夫资讯移动站 http://sicmodule.glev.cn/mobile/ , 查看更多