uni-app:登录与支付-- 三秒后自动跳转

这篇具有很好参考价值的文章主要介绍了uni-app:登录与支付-- 三秒后自动跳转。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 三秒后自动跳转

三秒后自动跳转到登录页面

需求描述:在购物车页面,当用户点击 “结算” 按钮时,如果用户没有登录,则 3 秒后自动跳转到登录页面

在 my-settle 组件的 methods 节点中,声明一个叫做 showTips 的方法,专门用来展示倒计时的提示消息:

data() {
  return {
    // 倒计时的秒数
    seconds: 3
  }
}
 // 展示倒计时的相关信息
      showTips(n){
        uni.showToast({
          icon:'none',
          title:'请登录后再结算!'+n+'秒之后自动跳转到登录界面',
    //点击穿透,防止用户点击后面的值
          mask:true,
          duration:1500
        })
      }

改造 结算 按钮的 click 事件处理函数,如果用户没有登录,则预调用一个叫做 delayNavigate 的方法,进行倒计时的导航跳转:

// 点击了结算按钮
settlement() {
  // 1. 先判断是否勾选了要结算的商品
  if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品!')

  // 2. 再判断用户是否选择了收货地址
  if (!this.addstr) return uni.$showMsg('请选择收货地址!')

  // 3. 最后判断用户是否登录了,如果没有登录,则调用 delayNavigate() 进行倒计时的导航跳转
  // if (!this.token) return uni.$showMsg('请先登录!')
  if (!this.token) return this.delayNavigate()
},

定义 delayNavigate 方法,初步实现倒计时的提示功能

// 延迟导航到 my 页面
delayNavigate() {
  // 1. 展示提示消息,此时 seconds 的值等于 3
  this.showTips(this.seconds)

  // 2. 创建定时器,每隔 1 秒执行一次
  setInterval(() => {
    // 2.1 先让秒数自减 1
    this.seconds--
    // 2.2 再根据最新的秒数,进行消息提示
    this.showTips(this.seconds)
  }, 1000)
},

 uni-app:登录与支付-- 三秒后自动跳转

uni-app:登录与支付-- 三秒后自动跳转 

 但是秒的边界并没有设置,因此值会变成负数

uni-app:登录与支付-- 三秒后自动跳转 

上述代码的问题:定时器不会自动停止,此时秒数会出现等于 0 或小于 0 的情况!

在 data 节点中声明定时器的 Id 如下:

data() {
  return {
    // 倒计时的秒数
    seconds: 3,
    // 定时器的 Id
    timer: null
  }
}

改造 delayNavigate 方法如下:

// 延迟导航到 my 页面
delayNavigate() {
  this.showTips(this.seconds)

  // 1. 将定时器的 Id 存储到 timer 中
  this.timer = setInterval(() => {
    this.seconds--

    // 2. 判断秒数是否 <= 0
    if (this.seconds <= 0) {
      // 2.1 清除定时器
      clearInterval(this.timer)

      // 2.2 跳转到 my 页面
      uni.switchTab({
        url: '/pages/my/my'
      })

      // 2.3 终止后续代码的运行(当秒数为 0 时,不再展示 toast 提示消息)
      return
    }

    this.showTips(this.seconds)
  }, 1000)
},

uni-app:登录与支付-- 三秒后自动跳转 uni-app:登录与支付-- 三秒后自动跳转

 文章来源地址https://www.toymoban.com/news/detail-402157.html

上述代码的问题:seconds 秒数不会被重置,导致第 2 次,3 次,n 次 的倒计时跳转功能无法正常工作

uni-app:登录与支付-- 三秒后自动跳转 这个秒数是有问题的,并没有被重置 

进一步改造 delayNavigate 方法,在执行此方法时,立即将 seconds 秒数重置为 3 即可:

// 延迟导航到 my 页面
delayNavigate() {
  // 把 data 中的秒数重置成 3 秒
  this.seconds = 3
  this.showTips(this.seconds)

  this.timer = setInterval(() => {
    this.seconds--

    if (this.seconds <= 0) {
      clearInterval(this.timer)
      uni.switchTab({
        url: '/pages/my/my'
      })
      return
    }

    this.showTips(this.seconds)
  }, 1000)
}

uni-app:登录与支付-- 三秒后自动跳转 就是在每次调用这个方法时,把这个seconds重置为3 

登录成功之后再返回之前的页面

核心实现思路:在自动跳转到登录页面成功之后,把返回页面的信息存储到 vuex 中,从而方便登录成功之后,根据返回页面的信息重新跳转回去。

返回页面的信息对象,主要包含 { openType, from } 两个属性,其中 openType 表示以哪种方式导航回之前的页面;from 表示之前页面的 url 地址

在 store/user.js 模块的 state 节点中,声明一个叫做 redirectInfo 的对象如下:

// state 数据
state: () => ({
  // 收货地址
  address: JSON.parse(uni.getStorageSync('address') || '{}'),
  // 登录成功之后的 token 字符串
  token: uni.getStorageSync('token') || '',
  // 用户的基本信息
  userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}'),
  // 重定向的 object 对象 { openType, from }
  redirectInfo: null
}),

在 store/user.js 模块的 mutations 节点中,声明一个叫做 updateRedirectInfo 的方法:

mutations: {
  // 更新重定向的信息对象
  updateRedirectInfo(state, info) {
    state.redirectInfo = info
  }
}

uni-app:登录与支付-- 三秒后自动跳转 

在 my-settle 组件中,通过 mapMutations 辅助方法,把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用:

methods: {
  // 把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用
  ...mapMutations('m_user', ['updateRedirectInfo']),
}

改造 my-settle 组件 methods 节点中的 delayNavigate 方法,当成功跳转到 my 页面 之后,将重定向的信息对象存储到 vuex 中:

// 延迟导航到 my 页面
delayNavigate() {
  // 把 data 中的秒数重置成 3 秒
  this.seconds = 3
  this.showTips(this.seconds)

  this.timer = setInterval(() => {
    this.seconds--

    if (this.seconds <= 0) {
      // 清除定时器
      clearInterval(this.timer)
      // 跳转到 my 页面
      uni.switchTab({
        url: '/pages/my/my',
        // 页面跳转成功之后的回调函数
        success: () => {
          // 调用 vuex 的 updateRedirectInfo 方法,把跳转信息存储到 Store 中
          this.updateRedirectInfo({
            // 跳转的方式
            openType: 'switchTab',
            // 从哪个页面跳转过去的
            from: '/pages/cart/cart'
          })
        }
      })

      return
    }

    this.showTips(this.seconds)
  }, 1000)
}

uni-app:登录与支付-- 三秒后自动跳转 

uni-app:登录与支付-- 三秒后自动跳转 在 my-login 组件中,通过 mapState 和 mapMutations 辅助方法,将 vuex 中需要的数据和方法,映射到当前页面中使用:

// 按需导入辅助函数
import { mapMutations, mapState } from 'vuex'

export default {
  computed: {
    // 调用 mapState 辅助方法,把 m_user 模块中的数据映射到当前用组件中使用
    ...mapState('m_user', ['redirectInfo']),
  },
  methods: {
    // 调用 mapMutations 辅助方法,把 m_user 模块中的方法映射到当前组件中使用
    ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
  },
}

改造 my-login 组件中的 getToken 方法,当登录成功之后,预调用 this.navigateBack() 方法返回登录之前的页面:

// 调用登录接口,换取永久的 token
async getToken(info) {
  // 省略其它代码...

  // 判断 vuex 中的 redirectInfo 是否为 null
  // 如果不为 null,则登录成功之后,需要重新导航到对应的页面
  this.navigateBack()
}

在 my-login 组件中,声明 navigateBack 方法如下:

// 返回登录之前的页面
navigateBack() {
  // redirectInfo 不为 null,并且导航方式为 switchTab
  if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
    // 调用小程序提供的 uni.switchTab() API 进行页面的导航
    uni.switchTab({
      // 要导航到的页面地址
      url: this.redirectInfo.from,
      // 导航成功之后,把 vuex 中的 redirectInfo 对象重置为 null
      complete: () => {
        this.updateRedirectInfo(null)
      }
    })
  }
}

uni-app:登录与支付-- 三秒后自动跳转

登录成功跳转到之前的页面完成 

uni-app:登录与支付-- 三秒后自动跳转

 

到了这里,关于uni-app:登录与支付-- 三秒后自动跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app6种跳转方式

    1、 uni.navigateTo:保留当前页面,跳转到应用内的某个页面。 2、uni.redirectTo:关闭当前页面,跳转到应用内的某个页面。 3、uni.reLaunch:关闭所有页面,打开到应用内的某个页面。 4、 uni.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 5、uni.navigateBack:关闭当前页

    2024年02月13日
    浏览(38)
  • Uni-app中使用uni.navigateTo跳转失败

    在初次使用navigateTo的时候,难免会出现一些小的问题,已经使用了但是频繁的跳转失败 ① 第一个问题就是没有在pages.json的文件中添加当前的/pages/Approval/rules这个路径 这是出现的第一个错误 ②还有可能的是即使添加了这个也会报错,这可能是因为路径的问题,在输入url的时

    2024年02月15日
    浏览(38)
  • uni-app | 小程序嵌入H5页面实现支付功能

    前一阵在做公司小程序时,有个需要对接支付的功能。但是本着订单数据和支付统一入口的设计原则,计划是对接公司商城现有的支付体系。故本方案是分析对接商城支付几种可行方案以及每种方案的可行性,最后综合选出一种最佳的方案。 实现方式 跳转商城小程序支付 跳

    2024年02月07日
    浏览(66)
  • uni-app uni.switchTab和uni.reLaunch跳转tabbar页面

    uni.switchTab: 跳转列表不会刷新 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 uni.reLaunch: 跳转列表会刷新 关闭所有页面,打开到应用内的某个页面。( 可以跳转到tabBar 页面 ) 但如果是列表的自定义表头有多个title的时候需要加参数才能返回到对应的列表 如下图所示

    2024年02月11日
    浏览(51)
  • uni-app基础详解(组件、弹窗、数据缓存、页面跳转)

    uni-app组件 scroll-view 回到顶部 swiper text 文本 属性 说明 selectable 是否选中 decode 解码 例如: lt; , gt; 等 space 是否显示空格 space的参数值 参数 说明 emsp 中文字符空格大小 ensp 中文字符空格一半大小 nbsp 根据字体设置的空格大小 button 按钮 input 输入框 属性名 类型 默认值 说明

    2024年01月18日
    浏览(43)
  • Uni-App 快捷登录

    uniapp 实现一键登录前置条件: 开通uniCloud, 开通一键登录功能参考的文档 : 官网 - 一键登录uniapp指南 : https://uniapp.dcloud.net.cn/univerify.html#%E6%A6%82%E8%BF%B0 官网 - 一键登录开通指南 : https://ask.dcloud.net.cn/article/37965 官网 - unicloud使用指南 https://uniapp.dcloud.net.cn/uniCloud/quickstart.html# 官网

    2024年02月06日
    浏览(42)
  • 【uni-app教程】四、UniAPP 路由配置及页面跳转

    uni-app 页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。 uni-app 有两种页面路由跳转

    2024年01月16日
    浏览(73)
  • uni-app 之 短信验证码登录

    uni-app 之 短信验证码登录 image.png image.png

    2024年02月07日
    浏览(49)
  • uni-app使用支付宝小程序开发者工具开发钉钉小程序

    一、添加运行配置 在项目的 package.json 文件中添加以下配置 配置完毕后在 HBuilderX 中会显示运行钉钉小程序按钮  二、设置钉钉小程序开发工具路径(支付宝小程序开发者工具)  三、通过 HBuilderX  把 uniapp 项目编译成钉钉小程序 编译成功后会自动打开钉钉小程序开发工具,编

    2024年02月11日
    浏览(57)
  • uni-app中使用微信一键登录

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 一、微信一键登录是什么? 二、使用步骤 1.在onLoad获取用户登录信息code 2.编写页面button按钮          3.根据pen-type=\\\"getPhoneNumber\\\"获取的用户信息传值给后端 总结 在uni-app中使用微信一键登录分析和

    2024年02月09日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包