微信小程序添加插屏广告并设置显示频率(一天一次)


Posted in Javascript onDecember 06, 2019

插屏广告

用户触发小程序中的特定场景时,插屏广告将自动向用户展现,用户可以随时关闭插屏广告。广告触发场景由流量主自定义,广告按曝光计费(CPM)。

微信小程序今年新上线了插屏广告,设置和在代码库中接入都非常方便。详细可见微信小程序官方文档。

大体的流程就是在小程序后台新建广告位,获取到广告位的adUnitId并嵌入到源代码,因为插屏广告的单页面性,在页面的onload处添加即可。

let interstitialAd = null;
if (wx.createInterstitialAd) {
 interstitialAd = wx.createInterstitialAd({
  adUnitId: 'adunit-ID'
 })
}
if(interstitialAd) {
 interstitialAd.show().catch((err) => {
  console.error(err);
 })
}

嵌入广告非常简单,毕竟微信已经将所有的接口写好了,开发者仅需调用即可。

主要的功能点是设置一个插屏广告一天只显示一次,而微信并没有提供这方面的api,秉持前端能完成的就不要麻烦后端,便想到直接使用缓存存储当期日期,用户打开页面的时候获取上次缓存的日期查看是否相同即可。

//这里使用的是mpVue框架,写在mounted里。
let nowday = new Date().getFullYear().toString() + (new Date().getMonth() + 1).toString() + new Date().getDate().toString() ;

//获取上次打开页面时间
try {
 let lastDay = wx.getStorageSync('day');
 if(lastDay) {
  console.log('lastday', lastDay);
  console.log('nowday', nowday)
  if(lastDay == nowday) {
   this.flag = false;
  } else {
   this.flag = true;
  } 
 }
} catch (e) {
 //用户首次打开
 this.flag = true;
 console.error(e);
 console.log('true no storage', this.flag)
}

if(interstitialAd && this.flag) {
 interstitialAd.show().catch((err) => {
  console.error(err);
 })
}
interstitialAd.onLoad(() => {
 try {
  wx.setStorageSync('day', nowday);
  console.log('存储时间', nowday);
  } catch (e) { 
  console.log('err', err)
 }
})

PS:下面看下一天只显示一次的弹出广告

仿京东官网顶部的广告关闭,效果为第一次进入官网会出现广告,然后点击关闭,刷新网页不会再显示广告,但是当清除localStorage存入的数据,刷新网页会再显示广告。

html代码

<div class="header">
 <div class="header-a">
  <a href=""></a>
  <i class="close">x</i>
 </div>
</div>

css代码

.header{
 width:100%;
 height:80px;
 background:#000;
}
.header-a{
 width:1190px;
 margin:0 auto;
 position:relative;
 background:url("images/1.jpg") no-repeat;
}
.header-a a{
 width:100%;
 height:80px;
 display:block;
}
.close{
 cursor:pointer;
 color:#fff;
 position:absolute;
 top:5px;
 right:5px;
 background:rgb(129, 117, 117);
 width: 20px;
 text-align: center;
 line-height: 20px;
}

js代码

//localStorage方法
<script src="../js/jquery.min.js"></script>
function popAd(){
  //判断localStorage里有没有isClose
  if(localStorage.getItem("isClose")){    
   $(".header").hide();
  }else{
   $(".header").show();
  }
  //点击关闭隐藏图片存取数据
  $(".close").click(function(){
   $(".header").fadeOut(1000);

   localStorage.setItem("isClose", "1"); 
  })
 }
 popAd();

chrome console清本地缓存localStorage.clear()

批量清:

localStorage.clear()

单独清除某个记录的缓存,如:

localStorage.clear("popup_info") 或 localStorage.removeItem("popup_info");

总结

以上所述是小编给大家介绍的微信小程序添加插屏广告并设置显示频率(一天一次),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 #Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 #Javascript
vue中监听路由参数的变化及方法
Dec 06 #Javascript
详解ECMAScript2019/ES10新属性
Dec 06 #Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 #Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 #Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 #Javascript
You might like
一个简单的MySQL数据浏览器
2006/10/09 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
学校运动会霸气口号
2014/06/07 职场文书
党委工作总结2015
2015/04/27 职场文书
秋收起义观后感
2015/06/11 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python