小程序OFO编写扫码之后的获取密码页

前端之家收集整理的这篇文章主要介绍了小程序OFO编写扫码之后的获取密码页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

编写扫码之后的获取密码页(scanresult文件夹)

1.页面布局

回首页去车辆报障

2.页面样式

3.页面数据逻辑

页面加载
  onLoad:function(options){
    // 获取解锁密码
    this.setData({
      password: options.password
    })
    // 设置初始计时秒数
    let time = 9;
    // 开始定时器
    this.timer = setInterval(() => {
      this.setData({
        time: -- time
      });
      // 读完秒后携带单车号码跳转到计费页
      if(time = 0){
        clearInterval(this.timer)
        wx.redirectTo({
          url: '../billing/index?number=' + options.number
        })
      }
    },1000)
  },// 点击去首页报障
  moveToWarn: function(){
    // 清除定时器
    clearInterval(this.timer)
    wx.redirectTo({
      url: '../index/index'
    })
  }
})

注意:这里的this.timer不会被传参到pages/index/index.js里的onload函数里,被传参到首页的定时器是计费页的定时器,后面会讲到

tips: onload函数参数说明: options的值是扫码成功后请求服务器获取的单车编号和开锁密码

获取密码通知
              wx.showLoading({
                title: '正在获取密码',                mask: true
              })
              // 请求服务器获取密码和车号
              wx.request({
                url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/password',                data: {},                method: 'GET', 
                success: function(res){
                  // 请求密码成功隐藏等待框
                  wx.hideLoading();
                  // 携带密码和车号跳转到密码页
                  wx.redirectTo({
                    url: '../scanresult/index?password=' + res.data.data.password + '&number=' + res.data.data.number,                    success: function(res){
                      wx.showToast({
                        title: '获取密码成功',                        duration: 1000
                      })
                    }
                  })           
                }
              })
            }
          })
        // 当前已经在计费就回退到计费页
        }else{
          wx.navigateBack({
            delta: 1
          })
        }  
        break;
// pages/scanresult/index.js
onload: function(options){
  console.log(options); // { password: "", number: "" }
}


猜你在找的微信小程序相关文章