[移动开发]微信小程序之流星雨个人页

前文说明

这里用到了vant组件库，具体引用可以查看我的这篇博客。。本篇博客约1w字，需要有小程序基础，阅读大概需要8分钟。涉及模版，可直接复制代码演示。

一、效果展示

二、个人页代码

主要用到了vant到骨架屏，这样可以使数据在请求的时候，让用户感觉加载等待，能起到一定的用户体验效果。如果不想用的话也可以把van-skeleton这层标签给删掉。里面的api属性具体可以查看vant文档，这里就不赘述了，主要讲讲流星雨的动效实现。

2.1、my.html

my.html：

<van-skeleton avatar-size="116px" avatar row="5" row-width="{{['100%', '50%', '100%', '50%', '100%']}}"
  loading="{{ skeletonLoading }}">
  <view class="my-container" wx:if="{{authFlag}}">
    <view class="profile-home" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
      <view class="jt-star-home">
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
        <view class="meteor"></view>
      </view>
      <view class="avatar-home">
        <image class="my-avatar" mode="widthFix" src="{{userInfo.avatarUrl}}"></image>
      </view>
      <view class="my-name">{{userInfo.nickName}}</view>
    </view>

    <view class="mem-point">
      <view class="mem-item">
        <view class="d-flex jc-center mb-10">
          <image class="w-54 mem-item-img" mode="widthFix" src="../../img/lvhua.png"></image>
        </view>
        <view class="point-title">绿化贡献</view>
        <view class="d-flex jc-center point-unit align-end">
          {{green_contribution}}
          <span class="ml-5 fs-13">up</span>
        </view>
      </view>
      <view class="mem-item">
        <view class="d-flex jc-center mb-10">
          <image class="w-54 height-auto" mode="widthFix" src="../../img/huishou.png"></image>
        </view>
        <view class="point-title">累计回收</view>
        <view class="d-flex jc-center point-unit align-end">
          {{cumulative_recovery}}
          <span class="ml-5 fs-13">kg</span>
        </view>
      </view>
      <view class="mem-item">
        <view class="d-flex jc-center mb-10">
          <image class="w-54 height-auto" mode="widthFix" src="../../img/shouyi.png"></image>
        </view>
        <view class="point-title">累计收益</view>
        <view class="d-flex jc-center point-unit align-end">
          {{accumulated_earnings}}
          <span class="ml-5 fs-13">￥</span>
        </view>
      </view>

    </view>
    <view class="profile-btn-home">
      <view class="profile-btn" bindtap="activeHandler">
        <view class="profile-img-home">
          <image mode="widthFix" class="my-icon height-auto" src="../../img/active.png"></image>
          <view class="profile-btn-title">都在玩</view>
        </view>
      </view>
      <view class="profile-btn" bindtap="addressHandler">
        <view class="profile-img-home">
          <image mode="widthFix" class="my-icon height-auto" src="../../img/address.png"></image>
          <view class="profile-btn-title">地址管理</view>
        </view>
      </view>
      <view class="profile-btn" bindtap="recycleHandler">
        <view class="profile-img-home">
          <image mode="widthFix" class="my-icon height-auto" src="../../img/recycle-btn.png"></image>
          <view class="profile-btn-title">立即下单</view>
        </view>
      </view>
      <view class="profile-btn" bindtap="orderHandler">
        <view class="profile-img-home">
          <image mode="widthFix" class="my-icon height-auto" src="../../img/my-order.png"></image>
          <view class="profile-btn-title">我的订单</view>
        </view>
      </view>
      <view class="profile-btn" bindtap="adviceHandler">
        <view class="profile-img-home">
          <image mode="widthFix" class="my-icon height-auto" src="../../img/advice.png"></image>
          <view class="profile-btn-title">建议反馈</view>
        </view>
      </view>
    </view>
  </view>
</van-skeleton>

可以看到我们这里定义了一个jt-star-home容器，里面包裹了十几个meteor容器，这些主要就是流星雨的dom元素了。

2.2、my.css

.my-container {
  margin-top: -130px;
  box-sizing: border-box;
  width: 100%;
}

.avatar-home {
  width: 116px;
  height: 116px;
  margin: 0 auto;
  padding-top: 30px;
  margin-bottom: 13px;
}

.profile-home {
  height: 270px;
  width: 100% !important;
  background-color: #4d4343;
  background: linear-gradient(to right, #4d4343 0%, #2D2D2D 100%);
}
.my-avatar {
  display: block;
  width: 100%;
  border: 2px solid #fff;
  border-radius: 50%;
  height: auto;
}
.mem-item-img {
  height: auto;
}

.my-name {
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 22px;
  text-align: center;
  margin-bottom: 22px;
}

.my-money-home {
  display: flex;
  justify-content: center;
  align-items: center;
}

.my-money-title {
  font-size: 14px;
  letter-spacing: 0px;
  color: #ffffff;
}

.my-money {
  font-size: 16px;
  letter-spacing: 0px;
  color: #eecea6;
}

.profile-btn-home {
  padding: 0 27px;
  box-sizing: border-box;
  padding-top: 150px;
  transform: translateY(-30px);
  background-color: #fff;
  border-radius: 25px 25px 0 0;
}
.mem-item {
  width: 33%;
}

.profile-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 19px 18px;
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 10px 20px -2px rgba(0, 0, 0, 0.17);
}

.profile-img-home {
  display: flex;
  align-items: center;
}

.my-icon {
  width: 39px;
  margin-right: 17px;
  height: auto;
}

.profile-btn-title {
  font-size: 14px;
  font-weight: 600;
  color: #2D2D2D;
  line-height: 20px;
}

.icon-more {
  width: 6px;
}

.mem-point {
  color: #fff;
  display: flex;
  justify-content: space-around;
  position: absolute;
  width: 90%;
  top: 200px;
  background-color: #fff;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
  padding: 20px 0;
  box-shadow: 0 2px 4px 0 rgba(60, 64, 67, 0.3);
  z-index: 99;
}

.point-title {
  color: #4d4343;
  text-align: center;
}

.point-unit {
  color: green;
  margin-top: 5px;
}

.van-skeleton {
  position: relative;
}

.van-skeleton__avatar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.van-skeleton__content {
  margin-top: 130px;
}
.jt-star-home {
  position: fixed;
  width: 100%;
  height: 80px;
  -webkit-transform: rotate(45deg);
  transform: rotateZ(45deg);
  -webkit-animation: sky 200000ms linear infinite;
  animation: sky 200000ms linear infinite;
}

.meteor {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  -webkit-filter: drop-shadow(0 0 6px #699bff);
  filter: drop-shadow(0 0 6px #699bff);
  -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
  animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}

.meteor::before,
.meteor::after {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  -webkit-transform: translateX(50%) rotateZ(45deg);
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
  animation: shining 3000ms ease-in-out infinite;
}

.meteor::after {
  -webkit-transform: translateX(50%) rotateZ(-45deg);
  transform: translateX(50%) rotateZ(-45deg);
}

/* 1 */
.meteor:nth-child(1) {
  top: calc(50% - 185px);
  left: calc(50% - 150px);
  -webkit-animation-delay: 8888ms;
  animation-delay: 8888ms;
}

.meteor:nth-child(1)::before,
.meteor:nth-child(1)::after,
.meteor:nth-child(1)::after {
  -webkit-animation-delay: 8888ms;
  animation-delay: 8888ms;
}

/* 2 */
.meteor:nth-child(2) {
  top: calc(50% - 50px);
  left: calc(50% - 180px);
  -webkit-animation-delay: 9288ms;
  animation-delay: 9288ms;
}

.meteor:nth-child(2)::before,
.meteor:nth-child(2)::after,
.meteor:nth-child(2)::after {
  -webkit-animation-delay: 9288ms;
  animation-delay: 9288ms;
}

.meteor:nth-child(3) {
  top: calc(50% - 145px);
  left: calc(50% - 135px);
  -webkit-animation-delay: 8600ms;
  animation-delay: 8600ms;
}

.meteor:nth-child(3)::before,
.meteor:nth-child(3)::after,
.meteor:nth-child(3)::after {
  -webkit-animation-delay: 8600ms;
  animation-delay: 8600ms;
}

.meteor:nth-child(4) {
  top: calc(50% - 78px);
  left: calc(50% - 155px);
  -webkit-animation-delay: 3288ms;
  animation-delay: 3288ms;
}

.meteor:nth-child(4)::before,
.meteor:nth-child(4)::after,
.meteor:nth-child(4)::after {
  -webkit-animation-delay: 3288ms;
  animation-delay: 3288ms;
}

.meteor:nth-child(5) {
  top: calc(50% - 183px);
  left: calc(50% - 8px);
  -webkit-animation-delay: 5588ms;
  animation-delay: 5588ms;
}

.meteor:nth-child(5)::before,
.meteor:nth-child(5)::after,
.meteor:nth-child(5)::after {
  -webkit-animation-delay: 5588ms;
  animation-delay: 5588ms;
}

.meteor:nth-child(6) {
  top: calc(50% - 30px);
  left: calc(50% - 195px);
  -webkit-animation-delay: 9388ms;
  animation-delay: 9388ms;
}

.meteor:nth-child(6)::before,
.meteor:nth-child(6)::after,
.meteor:nth-child(6)::after {
  -webkit-animation-delay: 9388ms;
  animation-delay: 9388ms;
}

.meteor:nth-child(7) {
  top: calc(50% - 95px);
  left: calc(50% - 70px);
  -webkit-animation-delay: 2588ms;
  animation-delay: 2588ms;
}

.meteor:nth-child(7)::before,
.meteor:nth-child(7)::after,
.meteor:nth-child(7)::after {
  -webkit-animation-delay: 2588ms;
  animation-delay: 2588ms;
}

.meteor:nth-child(8) {
  top: calc(50% - 60px);
  left: calc(50% - 70px);
  -webkit-animation-delay: 5288ms;
  animation-delay: 5288ms;
}

.meteor:nth-child(8)::before,
.meteor:nth-child(8)::after,
.meteor:nth-child(8)::after {
  -webkit-animation-delay: 5288ms;
  animation-delay: 5288ms;
}

.meteor:nth-child(9) {
  top: calc(50% - 75px);
  left: calc(50% - 250px);
  -webkit-animation-delay: 888ms;
  animation-delay: 888ms;
}

.meteor:nth-child(9)::before,
.meteor:nth-child(9)::after,
.meteor:nth-child(9)::after {
  -webkit-animation-delay: 888ms;
  animation-delay: 888ms;
}

.meteor:nth-child(9) {
  top: calc(50% - 76px);
  left: calc(50% - 240px);
  -webkit-animation-delay: 2388ms;
  animation-delay: 2388ms;
}

.meteor:nth-child(9)::before,
.meteor:nth-child(9)::after,
.meteor:nth-child(9)::after {
  -webkit-animation-delay: 2388ms;
  animation-delay: 2388ms;
}

.meteor:nth-child(10) {
  top: calc(50% - 85px);
  left: calc(50% - 6px);
  -webkit-animation-delay: 3588ms;
  animation-delay: 3588ms;
}

.meteor:nth-child(10)::before,
.meteor:nth-child(10)::after,
.meteor:nth-child(10)::after {
  -webkit-animation-delay: 3588ms;
  animation-delay: 3588ms;
}

.meteor:nth-child(11) {
  top: calc(50% - 135px);
  left: calc(50% - 260px);
  -webkit-animation-delay: 2888ms;
  animation-delay: 2888ms;
}

.meteor:nth-child(11)::before,
.meteor:nth-child(11)::after,
.meteor:nth-child(11)::after {
  -webkit-animation-delay: 2888ms;
  animation-delay: 2888ms;
}

.meteor:nth-child(12) {
  top: calc(50% - 15px);
  left: calc(50% - 8px);
  -webkit-animation-delay: 388ms;
  animation-delay: 388ms;
}

.meteor:nth-child(12)::before,
.meteor:nth-child(12)::after,
.meteor:nth-child(12)::after {
  -webkit-animation-delay: 388ms;
  animation-delay: 388ms;
}

.meteor:nth-child(13) {
  top: calc(50% - 155px);
  left: calc(50% - 50px);
  -webkit-animation-delay: 7288ms;
  animation-delay: 7288ms;
}

.meteor:nth-child(13)::before,
.meteor:nth-child(13)::after,
.meteor:nth-child(13)::after {
  -webkit-animation-delay: 7288ms;
  animation-delay: 7288ms;
}

.meteor:nth-child(14) {
  top: calc(50% - 28px);
  left: calc(50% - 80px);
  -webkit-animation-delay: 8888ms;
  animation-delay: 8888ms;
}

.meteor:nth-child(14)::before,
.meteor:nth-child(14)::after,
.meteor:nth-child(14)::after {
  -webkit-animation-delay: 8888ms;
  animation-delay: 8888ms;
}

@-webkit-keyframes tail {
  0% {
    width: 0;
  }

  30% {
    width: 100px;
  }

  100% {
    width: 0;
  }
}

@keyframes tail {
  0% {
    width: 0;
  }

  30% {
    width: 100px;
  }

  100% {
    width: 0;
  }
}

@-webkit-keyframes shining {
  0% {
    width: 0;
  }

  50% {
    width: 30px;
  }

  1000% {
    width: 0;
  }
}

@keyframes shining {
  0% {
    width: 0;
  }

  50% {
    width: 30px;
  }

  1000% {
    width: 0;
  }
}

@-webkit-keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
  }
}

@keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
  }
}

@-webkit-keyframes sky {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  100% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}

@keyframes sky {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  100% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}
.height-auto {
  height: auto;
}

可以看到我们给每个流星雨都指定了特定的动画，并且使用到了关键帧，去改变方向。

2.3、my.js

// pages/my/my.js
let token;
const WXAPI = require('../../wxapi/index');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    authFlag: false,
    userInfo: {},
    green_contribution: 0,
    cumulative_recovery: 0,
    accumulated_earnings: 0,
    skeletonLoading: true,
  },
  /**地址管理列表 */
  addressHandler() {
    wx.navigateTo({
      url: '/pages/address/address',
    })
  },
  /** 活动页面 */
  activeHandler() {
    wx.navigateTo({
      url: '/pages/active/active',
    })
  },
  /**获取个人积分情况 */
  getMemberPoints() {
    const self = this;
    WXAPI.userApi.getMemberPoints().then((res) => {
      console.log(res)
      if (res.meta && res.meta.status_code == 1) {
        self.setData({
          green_contribution: res.data.green_contribution,
          cumulative_recovery: res.data.cumulative_recovery,
          accumulated_earnings: res.data.accumulated_earnings,
        })
      }
      self.setData({
        skeletonLoading: false
      })
    }, (err) => {
      console.log(err)
      self.setData({
        skeletonLoading: false
      })
    })
  },
  recycleHandler() {
    wx.navigateTo({
      url: '/pages/wasterecovery/wasterecovery',
    })
  },
  adviceHandler() {
    wx.navigateTo({
      url: '/pages/advice/advice',
    })
  },  /**
   * 跳转我的订单
   */
  orderHandler: function () {
    wx.switchTab({
      url: '/pages/order/order',
    })
  },
  // 授权判断
  authHandler: function () {
    const self = this;
    let authFlag = wx.getStorageSync('authFlag');
    if (authFlag) {
      token = wx.getStorageSync('token');
      this.getMemberPoints();

      let userInfo = wx.getStorageSync('userInfo')
      self.setData({
        userInfo,
        authFlag
      })
    }
    else {
      wx.navigateTo({
        url: '../authpage/authpage',
      })
      wx.showToast({
        title: '请先授权登录',
        icon: 'none'
      })
    }
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.authHandler()
  },
})

可以看到在js这里，我们引入了自己封装的api接口，如果只涉及到模版的话，这个引入可以删掉。

1、可以看到我们先将skeletonLoading骨架屏的状态设置成了true，让它已进入到个人页就开始展示，等数据请求回来，设置成false。
2、剩下的就是一些授权的判断。

2.4、my.json

{
  "usingComponents": {
    "van-skeleton": "@vant/weapp/skeleton/index"
  },
  "navigationBarTitleText": "个人中心"
}

可以看到我们这里引入了vant组件库的骨架屏。

如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持，如果你有更好的思路，也可留言指出。