微信小程序启动页完整模板

提示：占个坑，假装有提示

实现的效果图

用户在打开小程序时，映入眼帘的第一感觉对用户使用者来说很重要，美观的启动页可以为你的小程序加分，好看的启动页能给用户留下美好的记忆印象

---

实现代码

---

.js

代码如下：

Page({
      /** 页面的初始数据 */
      data: {
            bg_img: 'start_bg.png',//背景图地址，可相对/绝对，可本地/远程
            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)
      },
})

.json

代码如下：

{
      "navigationStyle": "custom"
}

.wxml

代码如下：

<view wx:if="{{show_button}}" class="count_botton fade_in" bindtap="switchTab">跳过{{count}}s</view>
<image class="bg_img" src="{{bg_img}}"></image>

.wxss

代码如下：

page {
      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: 100%;
      height: 100%;
      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: 3s; /*动画持续时间*/
      animation-iteration-count: 1; /*动画次数*/
      animation-delay: 0s; /*延迟时间*/
}

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

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

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

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

写在最后

---

最后：感谢原作者 @橡皮糖

---

本文转载自博客: 橡皮糖.

---

完整源代码下载请: 点击这里.