微信小程序（五十二）开屏页面效果

注释很详细，直接上代码

上一篇

新增内容：

1.使用控件模拟开屏界面

2.倒计时逻辑

3.布局方法

4.TabBar隐藏复现

源码：

components/openPage/openPage.wxml

<view class="openPage-box">
  <image src="{{imagePath}}" mode="aspectFill"></image>
  <view class="openPage-header">
    <!-- 跳过按钮 -->
    <view class="openPage-btn" bindtap="skipOpenPage">跳过 {{second}}s</view>
  </view>
  <!-- 创意指导：拼夕夕 -->
  <view class="openPage-gif">
      <image src="{{gifUrl}}" mode="aspectFill"/>
  </view>
</view>


1
2
3
4
5
6
7
8
9
10
11
12
13

components/openPage/openPage.wxss

/* 切记：最外面的盒子不能直接用百分之的形式 */
.openPage-box {
  width: 100vh;
  height: 100vh;
}

.openPage-box>image {
  width: 100%;
  height: 100%;
}

/* 因为图片已经占据了所有位置，而我们需要让按钮悬浮在图片左上角，
所以需要使用absolute */
.openPage-header {
  position: absolute; 
  left:40rpx;
  top: 80rpx;
}

.openPage-btn {
  font-size: 20px;/* 调大点提高用户舒适度，你也不想有被开屏广告支配的感觉吧 */
  color: white;
  border: 1px solid white;
  padding: 2px 5px;
  border-radius: 12px;
}


.openPage-gif{
  position: absolute;
  left: 30%;
  top: 40%;
}

.openPage-gif>image{
  width: 300rpx;
  height: 300rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

components/openPage/openPage.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {//传入的数据
    imagePath: {
      type: String
    },
    second: {
      type: Number
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    gifUrl:'https://wimg.588ku.com/gif620/21/09/23/e14212e58c7e5da94ef8fca48ecd202e.gif',
    timer: null
  },

  lifetimes: {
    created: function () {
     
    },
    attached: function () {
      //在JavaScript中，this关键字的指向是动态的，取决于函数的调用方式。
      //比如普通调用方式里面的this则是这个函数，箭头函数则指的是外面的
      //如果里面不需要调用该函数这个this对象而只是需要访问外面的this对象则可以使用箭头函数
      //在某些情况下，为了在回调函数或异步操作中能够访问到外部的this对象并且访问这个函数的this对象，
      //可以将外部的this对象赋值给一个变量，通常命名为that或self
      let that = this;

      //timer是一个表示定时器的变量，其类型是number
      //在JavaScript中，setInterval函数会返回一个唯一的定时器标识符，
      //可以通过这个标识符来清除定时器，即使用clearInterval(timer)来停止定时器的执行
      const timer = setInterval(function () {//因为这个地方相当于嵌套了一层
        let nowSecond = --(that.data.second);//时间自减1
        console.log(nowSecond);

        if (nowSecond <= 0) {//计时到0则关闭开屏控件
          clearInterval(timer);//关闭计时器
          that.hideOpenPage();//隐藏开屏页面
        }
       
        that.setData({//赋值当前秒数（触发视图更新）
          second: nowSecond,//将计时器变量赋值给页面变量timer，方便在其他函数内关闭该计时器
          timer: timer
        });
      }, 1000);//延时1s

    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏开屏控件
    hideOpenPage: function () {
      //触发hide的事件，在`index.wxml`内容里面设置了bind:hide="onMyEvent",
      //则调用`index.js`里面的onMyEvent方法
      this.triggerEvent("hide");
    },
    //跳过开屏页面
    skipOpenPage: function () {
      this.hideOpenPage();//先隐藏开屏控件
      let timer = this.data.timer;//获取计时器变量
      if (timer) {//避免计时器还没初始化但用户已经点击跳过的情况（感觉只有yyds的李跳跳才能做到了）
        clearInterval(timer);//关闭计时器
      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

components/openPage/openPage.json

{
  "component": true,
  "usingComponents": {}
}
1
2
3
4

index.wxml

<openPage wx:if="{{openPageFlag}}" imagePath="{{url}}" second="{{5}}" bind:hide="onMyEvent"></openPage>

 <!-- 图个方便咱样式全写行内了(毕竟这也不是重点) -->
 <view style=" border-radius: 30rpx; ">
    <view style="padding:160rpx 0 0 0;display: flex;flex-direction: column; align-items: center;">
      <view>
        <image src="{{userInfo.avatar}}" mode="aspectFill" style="width: 100rpx ;height: 100rpx; border-radius: 50%;" />
      </view>

      <view style="margin-bottom: 20rpx;">
        <text style="color: pink;">{{userInfo.nickName}}</text>
      </view>
    </view>
  </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

index.wxss

page{
  background-image: url(https://pic3.zhimg.com/v2-a76bafdecdacebcc89b5d4f351a53e6a_r.jpg?source=1940ef5c);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
1
2
3
4
5

index.js

Page({
  data: {
    userInfo:{//这里是默认的用户头像昵称信息
      avatar:'https://profile-avatar.csdnimg.cn/06d540e9389b45649e01ca3798fdb924_m0_73756108.jpg',//csdn整来的头像链接
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/231753