微信小程序開屏動畫組件封裝以及使用示例

思路

• 首先調用wx.hideTabbar() 隱藏微信小程序的tabbar
• 封裝一個開屏動畫組件，在幾秒後自動關閉
• 在關閉的時候調用 wx.showTabber();來使tabbar顯示出來

效果展示

git倉庫地址

git倉庫地址

https://github.com/MrITzhongzi/small_routine_components.git

示例目錄結構

核心代碼

• kaiping_component.wxml

<view class="kaiping_box">
  <image src="{{imagepath}}" mode="aspectFill"></image>
  <view class="kaiping-header">
    <view class="kaiping-btn" bindtap="skipAnimation">跳過 {{second}}s</view>
  </view>
</view>

• kaiping_component.js

// component/kaiping_component.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    imagepath: {
      type: String
    },
    second: {
      type: Number
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
    timer: null
  },

  lifetimes: {
    created: function () {
     
    },
    attached: function () {
      let secondTime = this.data.second;
      let that = this;

      const timer = setInterval(function () {
        let nowSecond = --that.data.second;
        if (nowSecond <= 0) {
          clearInterval(timer);
          that.hideKaiping();
        }
        console.log(nowSecond);
        that.setData({
          second: nowSecond
        });
      }, 1000);
      this.setData({
        timer: timer
      });
    }
  },

  /**
   * 組件的方法列表
   */
  methods: {
    hideKaiping: function () {
      this.triggerEvent("hide");
      
    },
    skipAnimation: function () {
      this.hideKaiping();
      let timer = this.data.timer;
      if (timer) {
        clearInterval(timer);
      }
    }
  }
})

• kaiping_component.wxss

/* component/kaiping_component.wxss */

.kaiping_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}

.kaiping_box image {
  width: 100%;
  height: 100%;
}

.kaiping-header {
  position: absolute;
  top: 100rpx;
  left: 5px;
  width: 96%;
  display: flex;
}
.kaiping-second, .kaiping-btn {
  font-size: 12px;
  color: white;
  border: 1px solid white;
  padding: 1px 6px;
  border-radius: 10px;
}

• kaiping_component.json

{
  "component": true,
  "usingComponents": {}
}

使用示例

• index.wxml

<view class="intro">歡迎使用代碼片段，可在控制檯查看代碼片段的說明和文檔</view>

<kaiping-component wx:if="{{kaipingFlag}}" 
imagepath="/image/image.png" 
second="{{10}}" 
bind:hide="onMyEvent"   ></kaiping-component>

• index.json

{
  "usingComponents": {
    "kaiping-component": "/component/kaiping_component"
  },
  "navigationStyle": "custom"
}

• index.js

const app = getApp()

Page({
  data: {
    kaipingFlag: true
  },
  onLoad: function () {
    wx.hideTabBar();
  },
  onMyEvent: function () {
    console.log("close");
    this.setData({
      kaipingFlag: false
    });
    wx.showTabBar();
  }
})