uni-app uni.showToast()的success回调支付宝和微信小程序平台兼容问题

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app uni.showToast()的success回调支付宝和微信小程序平台兼容问题

开发环境 版本号 项目创建方式
Mac 12.3 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：12.3

HBuilderX类型：正式

HBuilderX版本号：4.36

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：模拟器

手机机型：iphone15 max

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 操作步骤：
```plaintext
console.log('a')  
uni.showToast({  
    title: '错误消息',  
    icon: 'none',  
    duration: 3000,  
    success:function(){  
        console.log('b')  
    }  
})

预期结果：

console.log('a')  
uni.showToast({  
    title: '错误消息',  
    icon: 'none',  
    duration: 3000,  
    success:function(){  
        console.log('b')  
    }  
})

实际结果：

console.log('a')  
uni.showToast({  
    title: '错误消息',  
    icon: 'none',  
    duration: 3000,  
    success:function(){  
        console.log('b')  
    }  
})

bug描述：

uni.showToast，相同代码在支付宝小程序中3秒后才会调用suceess的回调方法，在微信直接就调success方法没有等duration延迟后在调用


Harmonyos Next教程
2 回复

这个不是bug吧 编译后为原生代码并不是uniapp的问题 success应该是接口成功调用的回调 不是提示显示时的回调 你可以用条件编译和定时器来解决你这问题 uni.showToast({
title: ‘错误消息’,
icon: ‘none’,
duration: 3000,
success: function() {
// #ifdef MP-WEIXIN
// 微信小程序使用定时器
setTimeout(() => {
console.log(‘b’)
},3000)
// #endif
// #ifndef MP-WEIXIN
// 支付宝小程序不使用定时器
console.log(‘b’)
// #endif
}
}) 各家小程序都会有些不同 你可以去微信社区或者支付宝社区问下这个问题


在uni-app中，uni.showToast() 方法用于显示消息提示框。然而，不同平台（如支付宝小程序和微信小程序）在实现上可能存在一些细微的差别，特别是在回调处理方面。为了确保代码在不同平台上都能正常工作，我们可以编写一些兼容性处理代码。

首先，需要明确的是，uni.showToast() 方法的基本用法如下：

uni.showToast({
    title: '提示内容',
    icon: 'success',
    duration: 2000,
    success: function () {
        console.log('提示框显示成功');
    }
});

在这个例子中，success 回调会在提示框成功显示后被调用。然而，不同平台对回调的处理可能有所不同。为了确保兼容性，我们可以考虑以下几点：

  1. 检查平台类型：使用 uni.getSystemInfoSync().platform 来获取当前平台类型，并针对不同平台编写特定的代码。

  2. 统一回调处理：虽然回调可能在不同平台上有细微差别，但大多数情况下，我们可以编写通用的回调逻辑。

下面是一个兼容支付宝小程序和微信小程序的代码示例：

function showToast(title, icon = 'success', duration = 2000) {
    const platform = uni.getSystemInfoSync().platform;

    // 支付宝小程序和微信小程序对 toast 的处理可能有所不同
    // 但在这里，我们可以先尝试使用统一的写法
    uni.showToast({
        title: title,
        icon: icon,
        duration: duration,
        success: function () {
            // 通用回调逻辑
            console.log('Toast 显示成功，平台：', platform);

            // 如果需要针对特定平台执行不同逻辑，可以在这里进行判断
            if (platform === 'alipay') {
                // 支付宝小程序特有的处理逻辑
                console.log('这是支付宝小程序');
            } else if (platform === 'ios' || platform === 'android') {
                // 微信小程序（运行在iOS或Android上）特有的处理逻辑
                // 注意：微信小程序实际上不会返回 'weixin' 作为平台值，而是 'ios' 或 'android'
                console.log('这是微信小程序');
            }
        },
        fail: function (err) {
            console.error('Toast 显示失败：', err);
        }
    });
}

// 使用示例
showToast('操作成功', 'success', 3000);

在这个例子中，我们定义了一个 showToast 函数，它接受标题、图标和持续时间作为参数，并显示一个提示框。在回调函数中，我们打印了当前平台的信息，并可以根据平台类型执行不同的逻辑。同时，我们还添加了一个 fail 回调来处理显示失败的情况。

这种写法可以在大多数情况下保证兼容性，并且便于后续维护和扩展。

回到顶部