小程序setTimeout 定时隐藏元素

setTimeout实现定时隐藏元素

需求：用户每日第一次打开此小程序，会弹出气泡，提示用户收藏小程序，5秒后该气泡消失。

用到的方法：wx.getStorageSync() ，wx.setStorageSync()，setTimeout()

setTimeout:

• number setTimeout(function callback, number delay, any rest)
  设定一个定时器。在定时到期以后执行注册的回调函数
• 参数
  function callback
  回调函数
• number delay
  延迟的时间，函数的调用会在该延迟之后发生，单位 ms。
• any rest
  param1, param2, ..., paramN 等附加参数，它们会作为参数传递给回调函数。
• 返回值
  number
  定时器的编号。这个值可以传递给 [clearTimeout]来取消该定时。

wx.setStorageSync()：

• wx.setStorageSync(KEY,DATA)
  将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
• 参数说明：
  key string 本地缓存中的指定的 key
  data obj/string 需要存储的内容
• 示例代码:
  wx.setStorageSync('key', 'value')

wx.getStorageSync():

• 和wx.setStorageSync基本一致，不细讲。

思路：

载入小程序后读取缓存中的时间，如果与当日一致，flag为false；如果与当日时间不一致，flag为true，弹出气泡，并且将今日时间写入到缓存中。

效果图（以某小程序截图为例）：

QQ20190502-103744-HD.gif

代码如下：

// wxml
<view wx:if="{{isShowBubble}}" class='bubble-wrap'>
  <image class='bubble' src='/images/bubble.png'></image>
</view>

// js
  data: {
    isShowBubble: false,
  },
onLoad: function (options) {
    const todayDate = new Date().getDate();
    const storeTodayDate = wx.getStorageSync('storeTodayDate');
    if (todayDate !== storeTodayDate) {
      this.setData({ isShowBubble: true });
      wx.setStorageSync('storeTodayDate', todayDate);
      setTimeout(() => this.setData({ isShowBubble: false }), 5000);
    } 
  },

// wxss
.bubble-wrap{
  padding: 4rpx 24rpx 16rpx 24rpx;
  text-align: center;
  background-color: #ffffff;
  z-index: 1000;
  position:fixed;
  top: 0;
}

喜欢的小伙伴点个赞，每日更新。