前端小案例

案例一: 在 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>
相关推荐
小政爱学习!14 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。19 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼26 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093329 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石2 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程2 小时前
【前端基础】CSS基础
前端·css