前端小案例

案例一: 在 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>
相关推荐
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐8 小时前
前端图像处理(一)
前端