微信小程序欢迎页面demo

//login.js
//获取应用实例
var app = getApp();
Page({
  data: {
    remind: '加载中',
    angle: 0,
    userInfo: {}
  },
  goToIndex: function() {
    wx.navigateTo({
      url: '../../pages/logs/logs'
    })
  },
  onLoad: function() {
    var that = this
    wx.setNavigationBarTitle({
      title: wx.getStorageSync('mallName')
    })
  },
  onShow: function() {
    let that = this
    let userInfo = wx.getStorageSync('userInfo')
    if (!userInfo) {
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
          })
        }
      })
    } else {
      that.setData({
        userInfo: userInfo
      })
    }
  },
  onReady: function() {
    var that = this;
    setTimeout(function() {
      that.setData({
        remind: ''
      });
    }, 1000);
    wx.onAccelerometerChange(function(res) {
      var angle = -(res.x * 30).toFixed(1);
      if (angle > 14) {
        angle = 14;
      } else if (angle < -14) {
        angle = -14;
      }
      if (that.data.angle !== angle) {
        that.setData({
          angle: angle
        });
      }
    });
  }
});

<!--index.json-->
{
  "navigationBarTitleText": " ",
  "enablePullDownRefresh": false,
  "disableScroll": true
}

<!--index.wxml-->
<view class="container">
  <view class="remind-box" wx:if="{{remind}}">
    <image class="remind-img" src="../../images/loading.gif"></image>
  </view>
  <block wx:else>
    <image class="title" src="../../images/title8.png"></image>
    <view class="content">
      <view class="hd" style="transform:rotateZ({{angle}}deg);">
        <image class="logo" src="{{userInfo.avatarUrl}}"></image>
        <image class="wave" src="../../images/wave.png" mode="aspectFill"></image>
        <image class="wave wave-bg" src="../../images/wave.png" mode="aspectFill"></image>
      </view>
      <view class="bd">
        
        <view class="confirm-btn" bindtap='goToIndex'>
          <text >授权</text>
        </view>
        
      </view>
    </view>
  </block>
</view>

/**index.wxss**/
page{
  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
  font-size: 10pt;
  line-height: 150%;
  min-height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.container {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #69C3AA;
  align-items: stretch;
  padding: 0;
  height: 100%;
  overflow: hidden;
  justify-content: space-between;
  box-sizing: border-box;
} 
.content{
  flex: 1;
  display: flex;
  position: relative;
  z-index: 10;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-bottom: 450rpx;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4));
  opacity: 0;
  transform: translate3d(0,100%,0);
  animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards;
}

.remind-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 300rpx;
}
.remind-img {
  width: 250rpx;
  height: 250rpx;
  padding-bottom: 25rpx;
}

@keyframes rise{
  0% {opacity: 0;transform: translate3d(0,100%,0);}
  50% {opacity: 1;}
  100% {opacity: 1;transform: translate3d(0,450rpx,0);}
}
.title{
  position: absolute;
  top: 30rpx;
  left: 50%;
  width: 600rpx;
  height: 200rpx;
  margin-left: -300rpx;
  opacity: 0;
  animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
}

.smalltitle{
  position: absolute;
  top: 50rpx;
  left: 50%;
  width: 600rpx;
  height: 200rpx;
  margin-left: -300rpx;
  opacity: 0;
  animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
}

@keyframes show{
  0% {opacity: 0;}
  100% {opacity: .95;}
}

.hd {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1000rpx;
  margin-left: -500rpx;
  height: 200rpx;
  transition: all .35s ease;
}
.logo {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 200rpx;
  width: 160rpx;
  height: 160rpx;
  margin-left: -80rpx;
  border-radius: 160rpx;
  animation: sway 10s ease-in-out infinite;
  opacity: .95;
}
@keyframes sway{
  0% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
  17% {transform: translate3d(0,0rpx,0) rotate(25deg); }
  34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); }
  50% {transform: translate3d(0,-10rpx,0) rotate(15deg); }
  67% {transform: translate3d(0,10rpx,0) rotate(-25deg); }
  84% {transform: translate3d(0,15rpx,0) rotate(15deg); }
  100% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
}
.wave {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  opacity: 0.725;
  height: 260rpx;
  width: 2250rpx;
  animation: wave 10s linear infinite;
}
.wave-bg {
  z-index: 1;
  animation: wave-bg 10.25s linear infinite;
}
@keyframes wave{
  from {transform: translate3d(125rpx,0,0);}
  to {transform: translate3d(1125rpx,0,0);}
}
@keyframes wave-bg{
  from {transform: translate3d(375rpx,0,0);}
  to {transform: translate3d(1375rpx,0,0);}
}

.bd {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards;
  opacity: 0;
}
@keyframes bd-rise{
  from {opacity: 0; transform: translate3d(0,60rpx,0); }
  to {opacity: 1; transform: translate3d(0,0,0); }
}

.confirm-btn {
  font-size: 13pt;
  line-height: 85rpx;
  height: 85rpx;
  background: #69C3AA;
  color: #fff;
  text-align: center;
  border-radius: 100rpx;
  margin: 40% 20%;
}
.confirm-btn:active {
  opacity: .8;
}


.copyright {
  font-size: 28rpx;
  color: #999;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  text-align: center;
}