小程序返回上一页详解

一、小程序返回上一页前提示

当用户点击返回按钮时，如果需要弹窗提示，可以使用uni-app框架提供的返回按钮的beforeBackEvent函数。代码如下：

// 在页面中定义方法
methods: {
    beforeBackEvent: function (e) {
        uni.showModal({
            title: '提示',
            content: '确定要返回上一页吗？',
            success: function (res) {
                if (res.confirm) {
                    // 用户点击确定，执行返回操作
                    uni.navigateBack({
                        delta: 1
                    });
                } else if (res.cancel) {
                    // 用户点击取消，不做任何操作
                    console.log('用户点击取消');
                }
            }
        });
    }
},
// 在页面中定义返回按钮的config参数
onLoad: function() {
    uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#007aff',
        animation: {
            duration: 400,
            timingFunc: 'easeIn'
        }
    })
    //设置返回按钮的config
    uni.setNavigationBarColor({
        backgroundColor: '#007aff',
        animation: {
            duration: 400,
            timingFunc: 'easeIn'
        },
        backBtn: true,
        beforeBackEvent: this.beforeBackEvent // beforeBackEvent返回函数
    });
},

二、小程序返回上一页不刷新数据

小程序返回上一页时，默认是不刷新数据的，如果需要更新数据，可以在onUnload函数中执行一些操作。代码如下：

// 上一个页面的data对象
onUnload: function () {
    var pages = getCurrentPages();//获取页面栈
    var prevPage = pages[pages.length - 2];//上一个页面对象
    //直接调用上一个页面的setData()方法，把数据存储到上一个页面即可
    prevPage.setData({
        message: '你好，小程序'
    })
},

三、小程序返回上一页会执行onload吗

小程序返回上一页时，如果是通过navigateBack或redirectTo跳转到的页面，则不会执行onload函数；如果是通过switchTab或navigateTo跳转到的页面，则会执行onload函数。

四、小程序返回上一页事件

小程序返回上一页时，可以通过uni-app框架提供的navigateBack函数实现。代码如下：

// 返回上一页
uni.navigateBack({
    delta: 1
});

五、小程序返回上一页带参数

小程序返回上一页时，带参数可以使用navigateBack函数的参数query，将参数传递到上一页。代码如下：

// 上一页的js代码
onLoad: function (options) {
    console.log(options.name); // 打印参数name的值
}

// 当前页面的js代码
uni.navigateBack({
    delta: 1,
    query: {
        name: 'jack'
    }
});

六、返回上一页小程序

返回上一页小程序时，可以使用uni-app框架提供的navigateBackMiniProgram函数实现。代码如下：

// 返回上一页小程序
uni.navigateBackMiniProgram({
    extraData: {
        name: 'Jack',
        age: 18
    },
    success: function () {
        console.log('返回上一页小程序成功');
    }
});

七、小程序返回上一页更新数据

小程序返回上一页时，可以更新上一页的数据，通过uni-app提供的navigateBack函数的delta参数，可以指定返回的页面数。代码如下：

// 上一页的js代码
onLoad: function () {
    console.log('上一页的数据已更新');
}

// 当前页面的js代码
uni.navigateBack({
    delta: 1
});

八、小程序返回上一页并执行事件

小程序返回上一页时，可以同时执行上一页的某些事件，通过uni-app提供的navigateBack函数的delta参数和animation参数分别指定返回的页面数和返回动画。代码如下：

// 上一页的js代码
pageScroll: function () {
    console.log('页面已滚动');
}

// 当前页面的js代码
uni.navigateBack({
    delta: 1,
    animationType: 'slide-out-right',
    animationDuration: 500,
    success: function () {
        // 执行上一页的pageScroll函数
        var pages = getCurrentPages();//获取页面栈
        var prevPage = pages[pages.length - 2];//上一个页面对象
        prevPage.pageScroll()
    }
});

九、微信小程序返回上一页弹窗提示

微信小程序返回上一页时，可以使用wx.showModal弹窗提示用户。代码如下：

wx.showModal({
    title: '提示',
    content: '确定要返回上一页吗？',
    success: function (res) {
        if (res.confirm) {
            // 用户点击确定，执行返回操作
            wx.navigateBack({
                delta: 1
            });
        } else if (res.cancel) {
            // 用户点击取消，不做任何操作
            console.log('用户点击取消');
        }
    }
});

十、微信小程序返回上一页调用方法

微信小程序返回上一页时，可以通过wx.navigateBack函数完成。如果需要调用上一页的某些方法，可以通过获取页面栈的方式获取到上一页对象，然后直接调用该对象的方法即可。代码如下：

// 上一页的js代码
Page({
    data: {},
    onLoad: function () {},
    refresh: function () {
        console.log('数据已刷新');
    }
})

// 当前页面的js代码
var pages = getCurrentPages();//获取页面栈
var prevPage = pages[pages.length - 2];//上一个页面对象
prevPage.refresh();
wx.navigateBack({
    delta: 1
});