plv
plv
  • 发布:2026-05-15 11:58
  • 更新:2026-05-15 11:59
  • 阅读:41

【报Bug】uni.showActionSheet会立马完成回调

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 11

HBuilderX类型: 正式

HBuilderX版本号: 5.06

浏览器平台: Chrome

浏览器版本: 123

项目创建方式: HBuilderX

示例代码:

vue3写法

<template>  
    <view class="content">  
<button @click="choose()">选中</button>  
    </view>  
</template>  

<script setup>  
    async function choose(){  
        try {  
            let tab = await uni.showActionSheet({  
                title:'操作1',  
                itemList:['1','2','3']  
            })  
            if (tab.errMsg !== 'showActionSheet:ok') return  
            await choose2()  
        } catch (error) {  

            //TODO handle the exception  
        }}  
    async function choose2(){  
        try {  
            let tab = await uni.showActionSheet({  
                title:'操作2',  
                itemList:['A','B','C']  
            })  
            if (tab.errMsg !== 'showActionSheet:ok') return  
            console.log(tab,'>>>>>>>')  
        } catch (error) {  
            console.log(err)  
            //TODO handle the exception  
        }  
    }  
</script>  

<style>  

</style>  

vue2写法


<template>  
    <view >  
        <button @click="choose()">选中</button>  
    </view>  
</template>  
<script>  
    // console.log('23452345234')  
    export default {  
            methods: {  
                async choose(){  
                    let tab = await uni.showActionSheet({  
                        title:'操作1',  
                        itemList:['1','2','3']  
                    })  
                    if (tab.errMsg !== 'showActionSheet:ok') return  
                    await this.choose2()  
                },  
                async  choose2(){  
                    let tab = await uni.showActionSheet({  
                        title:'操作2',  
                        itemList:['A','B','C']  
                    })  
                    if (tab.errMsg !== 'showActionSheet:ok') return  
                    console.log(tab,'>>>>>>>')  
                }  
            },    
    }  
</script>  
<style scoped>  

</style>  

操作步骤:

我现在有两个showActionSheet(showActionSheetA,showActionSheetB),是使用async/await调用,调用showActionSheetA(完成选中后),立马调用showActionSheetB(现在取消选中),然后再点击按钮(手动)调用showActionSheetA(完成选中),立马调用showActionSheetB。第二次调用showActionSheetB会立马选中了第一个

预期结果:

第二次调用showActionSheetB然要等待用户选中

实际结果:

第二次调用showActionSheetB立即回调了第一的选择,没有等用户选择

bug描述:

uni.showActionSheet会立马完成回调
我现在有两个showActionSheet(showActionSheetA,showActionSheetB),是使用async/await调用,调用showActionSheetA(完成选中后),立马调用showActionSheetB(现在取消选中),然后再点击按钮(手动)调用showActionSheetA(完成选中),立马调用showActionSheetB。第二次调用showActionSheetB会立马选中了第一个

vue2 和vue3均存在同样的问题

2026-05-15 11:58 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

作为官方人员,我对这个 bug 反馈进行评审。

反馈内容完整性分析

这个反馈整体上结构清晰,问题描述、代码示例、复现步骤、预期和实际结果都有提供,但有一些地方需要补充和完善。

  1. BUG描述与代码示例:描述较为清晰,说明了是在使用 async/await 连续调用 uni.showActionSheet 时遇到的问题。提供的代码示例基本展示了问题逻辑,但写法上存在一些不规范的地方,可能会引入其他干扰因素。例如,在 <script setup> 语法下混合使用了 export default 的选项式 API 写法,并且使用了 Vue2 风格的代码。这可能会影响对问题根源的判断。
  2. 复现步骤:复现步骤描述与问题描述基本一致,但关键的“取消选中”这个操作在代码中没有体现。描述中说“调用showActionSheetB(现在取消选中)”,但在提供的 choose2 方法里,如果用户取消,uni.showActionSheet 返回的 Promise 会进入 reject 状态,当前代码没有 catch 捕获,这可能会导致未捕获的异常,影响后续流程。复现步骤需要更精确地说明每一步的操作。
  3. 预期与实际结果:预期结果是合理的,即第二次调用应等待用户操作。实际结果描述了“立即回调了第一个的选择”,这是一个明确的问题。
  4. 分类信息:反馈缺少了关键的运行平台信息(如 App、H5、微信小程序等)和 Vue 版本。根据知识库 Vue 2 和 Vue 3 的 API Promise 化uni.showActionSheet 等 API 的 Promise 化行为在 Vue 2 和 Vue 3 中有显著差异。缺少这些信息,官方人员将无法准确判断问题的上下文。

Bug 成立性分析

这个 Bug 可能成立,但其表现与 Vue 版本和运行平台强相关,需要用户补充信息后才能最终确认。

从知识库中可以看到,uni.showActionSheet 在非 H5 端是原生控件。对于 Promise 化的行为,Vue 2 和 Vue 3 项目中的处理方式不同。在 Vue 2 中,uni.showActionSheet 的 Promise 返回的是一个数组 [err, res],而在 Vue 3 中,则是标准的 then/catch 模式。

用户提供的代码片段混合了 Vue 3 的 <script setup> 和 Vue 2 的选项式 API,写法不规范。如果是在 Vue 3 项目下,当用户在 showActionSheetB 中点击取消时,API 返回的 Promise 应被 reject。用户代码中没有 catch 捕获这个错误,这可能导致未处理的 Promise 拒绝,从而干扰后续的异步流程,可能会让下一次调用 showActionSheetB 时立即返回了一个之前缓存的结果或出现意料之外的行为。这更像是一个因错误用法和未捕获异常导致的流程控制问题。

此外,知识库中有一个类似的 H5 平台问题案例 【报Bug】调用uni.showModal,没有得到预期效果,应该是bug,指出在 H5 端,浏览器原生弹窗是单例的,连续调用可能导致异常。虽然 showActionSheet 在 App 端是原生控件,但此案例也说明了此类异步弹窗在连续调用时可能存在平台限制或时序问题。

总结与建议

综合来看,这个反馈有价值,但需要用户补充关键信息并修正代码示例。

  1. 请补充必要信息:务必明确说明出现问题的运行平台(如 iOS App、Android App、H5 还是微信小程序)以及项目使用的 Vue 版本(Vue 2 或 Vue 3)。这是定位问题的首要条件。
  2. 请修正代码示例
    • 请提供规范的、可完整运行的代码。如果是 Vue 3 项目,应使用标准的组合式 API (<script setup>) 写法。
    • async/await 调用时,必须添加 try...catch 来捕获用户取消操作(即 fail 回调)的情况,避免未捕获的异常影响程序逻辑。
  3. 替代方案:如果问题确实存在且暂时无法解决,可以考虑避免在第一个弹窗的回调中“立马”调用第二个弹窗,可以尝试添加一个较小的延时(例如 setTimeout),或者改用非 await 的链式调用方式,确保原生弹窗有足够时间完成生命周期。这在 【报Bug】调用uni.showModal,没有得到预期效果,应该是bug 的类似案例中也被提及为临时解决方案。

请用户补充以上信息并修正示例后,再提交反馈,这样能帮助我们更高效地定位和解决问题。

内容为 AI 生成,仅供参考

要回复问题请先登录注册