微信小程序内页跳转登录，登录完成后携带参数重新回到之前页面实现方法

原创已于 2023-09-22 15:31:09 修改 · 2.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #前端

于 2023-09-22 15:25:01 首次发布

文章介绍了在微信小程序中如何通过`setCallbackUrl`和`getCallBackUrl`方法来保存和恢复页面路径及参数，确保用户登录后能正确跳转回原页面或执行默认操作。

第一步：在app.js或utils.js中添加以下两个方法：

// 拿到需要返回的页面路径和参数并保存 （跳转之前调用此方法）
setCallbackUrl: function(mode) {
    return new Promise((resolve,reject) => {
        let pages = getCurrentPages(); //获取历史页面记录
        let currentPage = pages[pages.length - 1]; //获取当前页面
        let urlPage = ''; 
        let url = currentPage.route; //拿到当前页面url
        let argumentsStr = '';
        let options = currentPage.options; //拿到参数对象
        for (let key in options) {
                let value = options[key];
                argumentsStr += key + '=' + value + '&';
        }
        if(argumentsStr) {
             argumentsStr = argumentsStr.substring(0, argumentsStr.length - 1);
             urlPage = url + '?' + argumentsStr;
        } else {
            urlPage = url;
        }
        let callbackObj = {
            callbackUrl: `/${urlPage}`,
            mode: mode || 'redirectTo'
        }
         wx.setStorageSync('callbackObj', JSON.stringify(callbackObj));
         resolve();
    })
},

// 提取本地存储的要返回的页面地址和参数，并返回之前的页面（登录完成后调用此方法）
getCallBackUrl: function() {
    return new Promise((resolve,reject) => {
        const callbackObj = wx.getStorageSync('callbackObj');
        if(callbackObj) {
            let resultObj = JSON.parse(callbackObj);
            let callbackUrl = resultObj.callbackUrl;
            let mode = resultObj.mode;
            mode == 'redirectTo' && wx.redirectTo({url: callbackUrl});
            mode == 'switchTab' && wx.switchTab({url: callbackUrl});
            mode == 'reLaunch' && wx.reLaunch({url: callbackUrl});
            mode == 'navigateTo' && wx.navigateTo({url: callbackUrl});
        } else {
            reject();
        }
    })
},

第二步：在跳转到登录页面跳转前调用setCallbackUrl方法（获当前页面的路径和参数存本地），登录页面登录成功后调用getCallBackUrl方法（提取之前存的路径和参数返回），如果没有就在catch中执行登录后的正常逻辑，比如跳转到默认userInfo页面。

app.getCallBackUrl().catch(() => {
    // 不需要跳转到原来页面时，给个默认页面
    wx.redirectTo({
        url: '/pages/userInfo/userInfo'
    })
})