微信小程序开屏广告实现

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

 

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

一、页面设计
         这里使用了微信小程序中的<wx:if>,<wx:else>。<wx:if>后的内容为开屏界面的内容，<wx:else>后的内容为微信小程序首页的内容。

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}}</button>
  <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F06%2F20200306113153_LEAiB.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645605075&t=631a6ada8bb81866cb06c6256e0966c3" style="width: 100%;height:100vh;position:fixed"/>
</view>
<view wx:else>
<!--页面内容-->
</view>

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

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

        <button>中的position: fixed; z-index: 1;目的是设置按钮的z轴，做到按钮与照片的重叠效果。此处要注意使用z-index做到组件重叠效果时，必须是双方组件都设置了position属性才会生效，且position属性不能是relative。

        开屏的图片用<image>实现，src后面是图片的网络地址。

       <image>中 style="width: 100%;height:100vh"的目的是将开屏图片填充满整个屏幕。

二、逻辑实现
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);//清除定时器
  },//跳过广告
  onLoad: 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)//每秒执行一次  
    
  },
  
})

        data中的变量advertsing为标记量，time为开屏广告在页面中停留的剩余时间，单位为秒。整体的实现逻辑如下：

        1.启动页面，advertising的初始值为true，即展示<wx:if>中的内容，即开屏广告。

        2.自动运行onLoad()函数，使用 wx.hideTabBar()隐藏了底部菜单栏。而后调用了定时器setInterval。每秒钟都将data中的time变量减一，并判断剩余时间是否为0。如果剩余时间为0则调用函数jmp()进入小程序。

        3.在jmp()函数中，首先要将标记量advertising置为false，即展示<wx:else>后的内容。而后用

 wx.showTabBar()将底部菜单栏恢复显示，最后使用clearInterval(this.x)清除定时器。

        4.点击“跳过广告”按钮也会调用jmp()函数。

        动态效果如下：