前端小案例 - 技术栈

前端小案例

明日春风2024-05-07 14:37

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

java 复制代码

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

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

java 复制代码

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) // 每秒执行一次
    });
  },

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

在前端展示倒计时：

java 复制代码

<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>