前端小案例

案例一: 在 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>
相关推荐
泯泷几秒前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
抹茶san3 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
Senar31 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言1 小时前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12542 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx2 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron