1. 程式人生 > >微信小程式---進入時廣告實現

微信小程式---進入時廣告實現

廢話不多說,先上圖
在這裡插入圖片描述

實現思路:
1.寫一個定時器,繫結一個數據,這裡使用的是miao,初始值為6。
2.在進入頁面時開始執行定時器,每秒執行一次miao-1操作。
this.time = setInterval(function () {
that.setData({
miao: that.data.miao-1
})
3.當miao==0時,清除定時器clearInterval(this.time)(一定要清除定時器),然後自動跳轉到首頁。
if (that.data.miao == 0){
clearInterval(this.time);
wx.switchTab({ //保留當前頁面,跳轉到應用內的某個頁面
url: “/pages/index/index”
})
}
4.也可以點選跳過廣告,當用戶點選跳過廣告時,清除定時器(一定要清除定時器),然後頁面跳轉
cliadv: function(){
clearInterval(this.time)
wx.switchTab({ //保留當前頁面,跳轉到應用內的某個頁面(最多開啟5個頁面,之後按鈕就沒有響應的)
url: “/pages/index/index”
})
}

跳過廣告 {{miao}} 小黑雜貨鋪 小黑出品,必屬精品

/* pages/advertising/advertising.wxss */
.adv1{
width: 100%;
height: 900rpx;
background: url(’/img/ba3.png’) no-repaeat 0 0;
background-size: contain;
}
.adv-img{
width: 100%;
height: 900rpx;
position: absolute;
}
.tiaoguo{
font-size: 25rpx;
background-color: wheat;
border-radius: 80rpx;
display: inline-block;
margin-left: 10rpx;
position: absolute;
z-index: 999;
right: 25rpx;
top: 850rpx;
padding-left: 10rpx;
padding-right: 10rpx;
}
button{
border-radius: 18rpx;
width: 220rpx;
background-color: #EECBAD;
color: #8B5742;
margin-top: 38rpx;
font-size: 33rpx;
}
.text2{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
margin-top: 23rpx;
font-size: 28rpx;
}

JS程式碼部分
// pages/advertising/advertising.js
Page({

/**

  • 頁面的初始資料
    */
    data: {
    miao: 6,
    time:’’
    },

/**

  • 生命週期函式–監聽頁面載入
    */
    onLoad: function (options) {
    var that = this;
    this.time = setInterval(function () {
    that.setData({
    miao: that.data.miao-1
    })
    if (that.data.miao == 0){
    clearInterval(this.time);
    wx.switchTab({ //保留當前頁面,跳轉到應用內的某個頁面(最多開啟5個頁面,之後按鈕就沒有響應的)
    url: “/pages/index/index”
    })
    }

}, 1000)
},

cliadv: function(){
clearInterval(this.time)
wx.switchTab({ //保留當前頁面,跳轉到應用內的某個頁面(最多開啟5個頁面,之後按鈕就沒有響應的)
url: “/pages/index/index”
})
}
})
PS:附上最近寫的一個小程式商城demo地址:https://github.com/Yxiaogg/vioShop
歡迎討論!