前端小案例

发布于:2024-05-07 ⋅ 阅读:(23) ⋅ 点赞:(0)

      案例一:  在 onLoad 函数中,首先通过 wx.getStorageSync('userInfo') 获取用户信息,如果用户信息存在,则从中提取用户ID,并将其存储在页面数据中,以便后续使用。如果用户信息不存在,你可以根据实际需求进行相应的处理,例如重新获取用户信息或跳转到登录页面: 

Page({
  onLoad: function(options) {
    // 获取用户信息
    let userInfo = wx.getStorageSync('userInfo');
    if(userInfo) {
      // 如果用户信息存在,则获取用户ID并存储在页面数据中
      let userId = userInfo.id;
      this.setData({
        userId: userId
      });
    } else {
      // 如果用户信息不存在,则进行相应处理,例如重新获取用户信息或跳转到登录页面
      // 这里只是简单示例,具体操作根据你的需求来实现
      console.log('用户信息不存在,请重新获取或进行登录操作');
    }
  },
  // 其他页面代码
});

案例二:页面加载后会启动一个10秒的倒计时,当倒计时结束时,会自动返回上一页。

Page({
  data: {
    countdown: 10, // 初始倒计时时间为10秒
    timer: null // 定时器
  },

  onLoad: function (options) {
    var orderId = options.id;
    if (orderId) {
      this.setData({
        orderId: orderId
      })
    }
    // 启动倒计时
    this.startCountdown();
  },

  startCountdown: function () {
    var that = this;
    this.setData({
      timer: setInterval(function () {
        var countdown = that.data.countdown - 1;
        that.setData({
          countdown: countdown
        });
        if (countdown <= 0) {
          clearInterval(that.data.timer); // 停止定时器
          wx.navigateBack(); // 返回上一页
        }
      }, 1000) // 每秒执行一次
    });
  },

  // 其他生命周期函数和事件处理函数...
});

在前端展示倒计时:

<view class="container">
  <form bindsubmit='submitComment'>
    <view class="weui-cells weui-cells_after-title">
      请确认您的跑腿任务已经执行完成.....
    </view>
    <view class="weui-btn-area">
      <button type="primary" class="weui-btn" form-type="submit">确认完成</button>
    </view>
    <!-- 添加倒计时显示 -->
    <view class="countdown">{{countdown}}秒后自动返回</view>
  </form>
</view>