如何让微信小程序有一个“小姐姐的启动页”结尾有彩蛋

324 阅读1分钟

image.png

首先我们要在app.js里面插入一个路径:

image.png

然后根据路径“ "pages/start/start", ”添加相关的文件夹

image.png

然后在“ start ”里面添加微信小程序专属的四个文件

image.png

**.js **.json **.wxml **.wxss

start.js

  /** 页面的初始数据 */
  data: {
        bg_img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0ce61fd5-5fa5-4cc4-a011-21b7d6d14dc5/9715d6d1-c5ce-4b1f-989d-5c340d49fbd9.jpg',//背景图地址,可相对/绝对,可本地/远程
        count: 4,//倒计时秒数
        show_button:false,//初始不显示跳过按钮
  },
  //初始化进入程序
  onLoad() {
        this.countDown();
        this.show_button();
  },
  //延迟一秒显示跳转按钮
  show_button() {
        let that = this
        setTimeout(function() {
              that.setData({
                    show_button: true
              })
        }, 1000)
  },
  //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
  switchTab() {
        clearInterval(this.data.time); //清除倒计时
        wx.switchTab({
            url: '/pages/index/index'
        })
  },
  //倒计时计数
  countDown: function() {
        let that = this;
        let count = that.data.count;
        that.data.time = setInterval(function() {
              if (count > 0) {
                    count--
                    that.setData({
                          count: count
                    })
              } else {
                    that.setData({
                          count: count
                    })
                    that.switchTab();
                    clearInterval(that.data.time)
              }
        }, 1000)
  },
})

start.json

  "navigationStyle": "custom"
}

start.wxml

<image class="bg_img" src="{{bg_img}}"></image>

start.wxss

  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  box-sizing: border-box;
}

.bg_img {
  z-index: -1;
  width: 760rpx;
  height: 1280rpx;
  border-radius: 20px;
  position: fixed;
  left: 0;
  top: 0;
}

.count_botton {
  position: relative;
  margin-bottom: 6vh;
  width: 300rpx;
  height: 100rpx;
  /*渐变色网站https://webgradients.com*/
  background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
  color: #fff;
  font-weight: bold;
  font-size: 32rpx;
  letter-spacing: 4rpx;
  border-radius: 50rpx;
  /*flex布局、横向纵向居中*/
  display: flex;
  justify-content: center;
  align-items: center;
}

/*在ID或类中增加如下的动画代码*/

.fade_in {
  animation-name: fadeIn; /*动画名称*/
  animation-duration: 5s; /*动画持续时间*/
  animation-iteration-count: 1; /*动画次数*/
  animation-delay: 0s; /*延迟时间*/
}

/*定义动画,名称为fadeIn*/

@keyframes fadeIn {
  0% {
        opacity: 0; /*初始状态 透明度为0*/
  }

  50% {
        opacity: 0.6; /*中间状态 透明度为0.6*/
  }

  100% {
        opacity: 1; /*结尾状态 透明度为1*/
  }
}

PS:昨天我因为少打了一个","号,堂堂一个2000人群的管理,居然被群友骂我沙雕。555555,找个机会把他们都封了!!!