這篇文章主要介紹了微信小程序添加插屏廣告并設置顯示頻率的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

插屏廣告

用戶觸發小程序中的特定場景時，插屏廣告將自動向用戶展現，用戶可以隨時關閉插屏廣告。廣告觸發場景由流量主自定義，廣告按曝光計費（CPM）。

微信小程序今年新上線了插屏廣告，設置和在代碼庫中接入都非常方便。詳細可見微信小程序官方文檔。

大體的流程就是在小程序后臺新建廣告位，獲取到廣告位的adUnitId并嵌入到源代碼，因為插屏廣告的單頁面性，在頁面的onload處添加即可。

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

嵌入廣告非常簡單，畢竟微信已經將所有的接口寫好了，開發者僅需調用即可。

主要的功能點是設置一個插屏廣告一天只顯示一次，而微信并沒有提供這方面的api，秉持前端能完成的就不要麻煩后端，便想到直接使用緩存存儲當期日期，用戶打開頁面的時候獲取上次緩存的日期查看是否相同即可。

//這里使用的是mpVue框架，寫在mounted里。
letnowday=newDate().getFullYear().toString()+(newDate().getMonth()+1).toString()+newDate().getDate().toString();

//獲取上次打開頁面時間
try{
letlastDay=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('truenostorage',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代碼

<divclass="header">
<divclass="header-a">
<ahref=""></a>
<iclass="close">x</i>
</div>
</div>

css代碼

.header{
width:100%;
height:80px;
background:#000;
}
.header-a{
width:1190px;
margin:0auto;
position:relative;
background:url("images/1.jpg")no-repeat;
}
.header-aa{
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方法
<scriptsrc="../js/jquery.min.js"></script>
functionpopAd(){
//判斷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");

總結

以上是生活随笔為你收集整理的微信小程序添加插屏广告并设置显示频率的示例分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。