您好,登錄后才能下訂單哦!
這篇“uni-app登錄與支付功能怎么實(shí)現(xiàn)三秒后自動(dòng)跳轉(zhuǎn)”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“uni-app登錄與支付功能怎么實(shí)現(xiàn)三秒后自動(dòng)跳轉(zhuǎn)”文章吧。
需求描述:在購物車頁面,當(dāng)用戶點(diǎn)擊 “結(jié)算” 按鈕時(shí),如果用戶沒有登錄,則 3 秒后自動(dòng)跳轉(zhuǎn)到登錄頁面
在 my-settle
組件的 methods
節(jié)點(diǎn)中,聲明一個(gè)叫做 showTips
的方法,專門用來展示倒計(jì)時(shí)的提示消息:
data() { return { // 倒計(jì)時(shí)的秒數(shù) seconds: 3 } }
// 展示倒計(jì)時(shí)的相關(guān)信息 showTips(n){ uni.showToast({ icon:'none', title:'請(qǐng)登錄后再結(jié)算!'+n+'秒之后自動(dòng)跳轉(zhuǎn)到登錄界面', //點(diǎn)擊穿透,防止用戶點(diǎn)擊后面的值 mask:true, duration:1500 }) }
改造 結(jié)算
按鈕的 click
事件處理函數(shù),如果用戶沒有登錄,則預(yù)調(diào)用一個(gè)叫做 delayNavigate
的方法,進(jìn)行倒計(jì)時(shí)的導(dǎo)航跳轉(zhuǎn):
// 點(diǎn)擊了結(jié)算按鈕 settlement() { // 1. 先判斷是否勾選了要結(jié)算的商品 if (!this.checkedCount) return uni.$showMsg('請(qǐng)選擇要結(jié)算的商品!') // 2. 再判斷用戶是否選擇了收貨地址 if (!this.addstr) return uni.$showMsg('請(qǐng)選擇收貨地址!') // 3. 最后判斷用戶是否登錄了,如果沒有登錄,則調(diào)用 delayNavigate() 進(jìn)行倒計(jì)時(shí)的導(dǎo)航跳轉(zhuǎn) // if (!this.token) return uni.$showMsg('請(qǐng)先登錄!') if (!this.token) return this.delayNavigate() },
定義 delayNavigate
方法,初步實(shí)現(xiàn)倒計(jì)時(shí)的提示功能:
// 延遲導(dǎo)航到 my 頁面 delayNavigate() { // 1. 展示提示消息,此時(shí) seconds 的值等于 3 this.showTips(this.seconds) // 2. 創(chuàng)建定時(shí)器,每隔 1 秒執(zhí)行一次 setInterval(() => { // 2.1 先讓秒數(shù)自減 1 this.seconds-- // 2.2 再根據(jù)最新的秒數(shù),進(jìn)行消息提示 this.showTips(this.seconds) }, 1000) },
但是秒的邊界并沒有設(shè)置,因此值會(huì)變成負(fù)數(shù)
上述代碼的問題:定時(shí)器不會(huì)自動(dòng)停止,此時(shí)秒數(shù)會(huì)出現(xiàn)等于 0 或小于 0 的情況!
在 data
節(jié)點(diǎn)中聲明定時(shí)器的 Id 如下:
data() { return { // 倒計(jì)時(shí)的秒數(shù) seconds: 3, // 定時(shí)器的 Id timer: null } }
改造 delayNavigate
方法如下:
// 延遲導(dǎo)航到 my 頁面 delayNavigate() { this.showTips(this.seconds) // 1. 將定時(shí)器的 Id 存儲(chǔ)到 timer 中 this.timer = setInterval(() => { this.seconds-- // 2. 判斷秒數(shù)是否 <= 0 if (this.seconds <= 0) { // 2.1 清除定時(shí)器 clearInterval(this.timer) // 2.2 跳轉(zhuǎn)到 my 頁面 uni.switchTab({ url: '/pages/my/my' }) // 2.3 終止后續(xù)代碼的運(yùn)行(當(dāng)秒數(shù)為 0 時(shí),不再展示 toast 提示消息) return } this.showTips(this.seconds) }, 1000) },
上述代碼的問題:seconds 秒數(shù)不會(huì)被重置,導(dǎo)致第 2 次,3 次,n 次 的倒計(jì)時(shí)跳轉(zhuǎn)功能無法正常工作
這個(gè)秒數(shù)是有問題的,并沒有被重置
進(jìn)一步改造 delayNavigate
方法,在執(zhí)行此方法時(shí),立即將 seconds
秒數(shù)重置為 3
即可:
// 延遲導(dǎo)航到 my 頁面 delayNavigate() { // 把 data 中的秒數(shù)重置成 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) }
就是在每次調(diào)用這個(gè)方法時(shí),把這個(gè)seconds重置為3
核心實(shí)現(xiàn)思路:在自動(dòng)跳轉(zhuǎn)到登錄頁面成功之后,把返回頁面的信息存儲(chǔ)到 vuex 中,從而方便登錄成功之后,根據(jù)返回頁面的信息重新跳轉(zhuǎn)回去。
返回頁面的信息對(duì)象,主要包含 { openType, from } 兩個(gè)屬性,其中 openType 表示以哪種方式導(dǎo)航回之前的頁面;from 表示之前頁面的 url 地址;
在 store/user.js
模塊的 state
節(jié)點(diǎn)中,聲明一個(gè)叫做 redirectInfo
的對(duì)象如下:
// state 數(shù)據(jù) state: () => ({ // 收貨地址 address: JSON.parse(uni.getStorageSync('address') || '{}'), // 登錄成功之后的 token 字符串 token: uni.getStorageSync('token') || '', // 用戶的基本信息 userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}'), // 重定向的 object 對(duì)象 { openType, from } redirectInfo: null }),
在 store/user.js
模塊的 mutations
節(jié)點(diǎn)中,聲明一個(gè)叫做 updateRedirectInfo
的方法:
mutations: { // 更新重定向的信息對(duì)象 updateRedirectInfo(state, info) { state.redirectInfo = info } }
在 my-settle
組件中,通過 mapMutations
輔助方法,把 m_user
模塊中的 updateRedirectInfo
方法映射到當(dāng)前頁面中使用:
methods: { // 把 m_user 模塊中的 updateRedirectInfo 方法映射到當(dāng)前頁面中使用 ...mapMutations('m_user', ['updateRedirectInfo']), }
改造 my-settle
組件 methods 節(jié)點(diǎn)中的 delayNavigate
方法,當(dāng)成功跳轉(zhuǎn)到 my 頁面
之后,將重定向的信息對(duì)象存儲(chǔ)到 vuex 中:
// 延遲導(dǎo)航到 my 頁面 delayNavigate() { // 把 data 中的秒數(shù)重置成 3 秒 this.seconds = 3 this.showTips(this.seconds) this.timer = setInterval(() => { this.seconds-- if (this.seconds <= 0) { // 清除定時(shí)器 clearInterval(this.timer) // 跳轉(zhuǎn)到 my 頁面 uni.switchTab({ url: '/pages/my/my', // 頁面跳轉(zhuǎn)成功之后的回調(diào)函數(shù) success: () => { // 調(diào)用 vuex 的 updateRedirectInfo 方法,把跳轉(zhuǎn)信息存儲(chǔ)到 Store 中 this.updateRedirectInfo({ // 跳轉(zhuǎn)的方式 openType: 'switchTab', // 從哪個(gè)頁面跳轉(zhuǎn)過去的 from: '/pages/cart/cart' }) } }) return } this.showTips(this.seconds) }, 1000) }
在 my-login
組件中,通過 mapState
和 mapMutations
輔助方法,將 vuex 中需要的數(shù)據(jù)和方法,映射到當(dāng)前頁面中使用:
// 按需導(dǎo)入輔助函數(shù) import { mapMutations, mapState } from 'vuex' export default { computed: { // 調(diào)用 mapState 輔助方法,把 m_user 模塊中的數(shù)據(jù)映射到當(dāng)前用組件中使用 ...mapState('m_user', ['redirectInfo']), }, methods: { // 調(diào)用 mapMutations 輔助方法,把 m_user 模塊中的方法映射到當(dāng)前組件中使用 ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']), }, }
改造 my-login
組件中的 getToken
方法,當(dāng)?shù)卿洺晒χ螅A(yù)調(diào)用 this.navigateBack()
方法返回登錄之前的頁面:
// 調(diào)用登錄接口,換取永久的 token async getToken(info) { // 省略其它代碼... // 判斷 vuex 中的 redirectInfo 是否為 null // 如果不為 null,則登錄成功之后,需要重新導(dǎo)航到對(duì)應(yīng)的頁面 this.navigateBack() }
在 my-login
組件中,聲明 navigateBack
方法如下:
// 返回登錄之前的頁面 navigateBack() { // redirectInfo 不為 null,并且導(dǎo)航方式為 switchTab if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') { // 調(diào)用小程序提供的 uni.switchTab() API 進(jìn)行頁面的導(dǎo)航 uni.switchTab({ // 要導(dǎo)航到的頁面地址 url: this.redirectInfo.from, // 導(dǎo)航成功之后,把 vuex 中的 redirectInfo 對(duì)象重置為 null complete: () => { this.updateRedirectInfo(null) } }) } }
登錄成功跳轉(zhuǎn)到之前的頁面完成
以上就是關(guān)于“uni-app登錄與支付功能怎么實(shí)現(xiàn)三秒后自動(dòng)跳轉(zhuǎn)”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。