微信小程序> 微信小程序进入时广告实现

微信小程序进入时广告实现

浏览量:1333 时间: 来源:^_^影

废话不多说,先上图
小程序

PS:附上最近写的一个小程序商城demo地址:小黑杂货铺:https://github.com/Yxiaogg/vioShop:(支持请点star哟
欢迎讨论!

实现思路:
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"        })  }

WXML部分

<!--pages/advertising/advertising.wxml--><view class='main'><view class='adv1'>  <image src='/img/adv.jpg' class='adv-img'></image>  <text class='tiaoguo' bindtap='cliadv'>跳过广告 {{miao}}</text></view><view>  <button>小黑杂货铺</button>  <text class='text2'>小黑出品,必属精品</text></view></view>

WXSS部分

/* 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"        })  }})

学习交流群,有问题可以加一下,不收费 不收费 不收费小程序

微信小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎