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

注释很详细，直接上代码

上一篇

新增内容：

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}}sview>
  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整来的头像链接😎😎😎
      nickName:'眨眼睛'
    },
    //开屏控件是否存在标记
    openPageFlag: true,
    //开屏广告图片内容
    url:'https://ts1.cn.mm.bing.net/th/id/R-C.a4616e92a020b344cec039516ac755d3?rik=1pgZKObA0CxALA&riu=http%3a%2f%2fsjbz.fd.zol-img.com.cn%2ft_s1080x1920c%2fg5%2fM00%2f00%2f02%2fChMkJ1fJUwuIUssCAA39sthJrGMAAU9nwNNNewADf3K734.jpg&ehk=oX398mB4NzTaBxvWpwJIR3bS7NzghbGRvY4qp7jJPuE%3d&risl=&pid=ImgRaw&r=0'
  },
  //第一次加载这个页面触发一次，也就是开屏内容展现的时候
  onLoad: function () {
    //在有TabBar的情况下默认是不会隐藏的，所以我们手动隐藏一下
    wx.hideTabBar();
  },

  //当该控件隐藏时触发
  onMyEvent: function () {
    //打印关闭
    console.log("开屏控件关闭！！！");
    this.setData({//将开屏控件的存在标记设为否
      openPageFlag: false
    });
    //显示TabBar（前面隐藏了）
    wx.showTabBar();
  }
})
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

index.json

{
  "usingComponents": {
    "openPage": "/components/openPage/openPage"
  },
  
  "navigationStyle": "custom"
}

1
2
3
4
5
6
7
8

效果演示：