微信小程序怎么实现开屏广告点击跳过可跳到首页

微信小程序开屏广告即打开微信小程序后全屏展示的广告图片。用户可点击“跳过”按钮跳过广告，或者广告展示一段时间过后进入微信小程序。并可以显示广告的剩余时间。效果图如下（背景图是网图，界面用了colorui组件库）：

点击“跳过广告”，会直接进入小程序，否则将等按钮上的倒计时结束后再进入小程序。

一、页面设计

这里使用了微信小程序中的,。后的内容为开屏界面的内容，后的内容为微信小程序首页的内容。

wxml文件如下：

<view wx:if="{{advertising}}">
  <button class="cu-btn round bg-blue" bindtap="jmp" style="position: fixed; z-index: 1; width: 190rpx; height: 64rpx; display: ; box-sizing: ; left: 500rpx; top: 43rpx">跳过广告{{time}}
  <image src="图片地址" style="width: 100%;height:100vh;position:fixed">
 
<view wx:else>
<!--页面内容-->
</view wx:else></image src="图片地址" style="width: 100%;height:100vh;position:fixed"></button class="cu-btn round bg-blue" bindtap="jmp" style="position: fixed; z-index: 1; width: 190rpx; height: 64rpx; display: ; box-sizing: ; left: 500rpx; top: 43rpx"></view wx:if="{{advertising}}">

advertsing是一个bool型变量，负责标记此时页面是否处在开屏广告的状态。

jmp为按钮绑定的一个点击事件，功能是跳过广告进入页面。

二、逻辑实现

js文件如下：

//index.js
const app = getApp()
Page({
  data: {
    advertising:true,
    time:5,//倒计时 秒
    //开屏广告
  },
  jmp:function()
  {
    this.setData({
      advertising:false
    });
    wx.showTabBar({
      animation:true//动画效果
    });
    clearInterval(this.x);//清除定时器
  },//跳过广告
  onl oad: function() {
    var that=this 
    wx.hideTabBar();// 隐藏底部按钮
      this.x=setInterval(function() { 
        that.setData({
          time:that.data.time-1
        })
        if(that.data.time==0)
        that.jmp()
      }, 1000)//每秒执行一次  
     
  },
   
})