当前位置：首页 > news >正文

uni-app——uni-app 小程序操作后功能未生效问题的排查与解决

news 2026/5/11 20:47:03

操作后功能未生效问题的排查与解决

问题背景

在开发审批流程功能时，遇到一个常见问题：审批状态的数据，点击撤回后功能没有生效。具体表现为：

点击"撤回到草稿箱"按钮后，操作没有生效
点击"彻底删除"后，数据没有被删除，反而出现在草稿箱中

问题复现

操作步骤：

提交一条审批申请
在待审批状态下，点击"撤回"按钮
期望数据回到草稿箱，但实际没有生效
点击"彻底删除"，数据没有删除，反而出现在草稿箱

问题分析

通过代码分析，发现问题主要出在以下几个方面：

1. 操作后页面未刷新

从编辑/操作页面返回列表页时，列表页的onLoad生命周期不会重新触发，导致数据未刷新。

2. API 调用后缺少状态同步

撤回和删除操作调用 API 成功后，前端状态没有正确更新。

3. 接口参数传递错误

删除和撤回接口需要的参数格式不正确，导致后端处理失败但前端显示成功。

解决方案

方案一：添加 onShow 生命周期刷新数据

问题：小程序/App 中页面返回时不触发onLoad，只触发onShow。

<script setup> import { ref } from 'vue'; import { onLoad, onShow } from '@dcloudio/uni-app'; const listData = ref([]); const isFirstLoad = ref(true); const currentStatus = ref('pending'); // pending/draft/deleted // 加载列表数据 const loadListData = async () => { try { const response = await getApprovalList({ status: currentStatus.value, pageNum: 1, pageSize: 20, }); listData.value = response.list || []; } catch (error) { console.error('加载失败:', error); } }; // 页面首次加载 onLoad((options) => { if (options.status) { currentStatus.value = options.status; } loadListData(); }); // 页面显示时刷新（关键修复点） onShow(() => { // 跳过首次加载，避免重复请求 if (isFirstLoad.value) { isFirstLoad.value = false; return; } // 从其他页面返回时重新加载数据 loadListData(); }); </script>

方案二：撤回功能的正确实现

<script setup> import { ref } from 'vue'; // 撤回到草稿箱 const handleWithdraw = async (item) => { try { // 显示确认弹窗 const confirmed = await showConfirmDialog({ title: '确认撤回', content: '撤回后将移至草稿箱，确定要撤回吗？', }); if (!confirmed) return; // 显示加载状态 showLoading('撤回中...'); // 调用撤回接口 - 注意参数格式 const result = await withdrawApproval({ instanceId: item.id, reason: '用户主动撤回', }); hideLoading(); if (result.success) { showToast('撤回成功'); // 方式1：从列表中移除该项（推荐） const index = listData.value.findIndex((i) => i.id === item.id); if (index > -1) { listData.value.splice(index, 1); } // 方式2：或者重新加载列表 // await loadListData(); } else { showToast(result.message || '撤回失败'); } } catch (error) { hideLoading(); showToast('操作失败，请重试'); console.error('撤回失败:', error); } }; </script>

方案三：删除功能的正确实现

<script setup> // 彻底删除 const handleDelete = async (item) => { try { const confirmed = await showConfirmDialog({ title: '确认删除', content: '删除后将无法恢复，确定要删除吗？', }); if (!confirmed) return; showLoading('删除中...'); // 关键：确保传递正确的参数 const result = await deleteApproval({ instanceId: item.id, deleteType: 'permanent', // 彻底删除标识 }); hideLoading(); if (result.success) { showToast('删除成功'); // 从列表中移除 listData.value = listData.value.filter((i) => i.id !== item.id); // 如果列表为空，可以显示空状态或返回上一页 if (listData.value.length === 0) { showEmptyState(); } } else { // 关键：正确处理失败情况 showToast(result.message || '删除失败'); } } catch (error) { hideLoading(); // 不要静默失败，要给用户反馈 showToast('删除失败，请重试'); console.error('删除失败:', error); } }; </script>

方案四：统一的操作结果处理

// utils/approval.tsinterfaceOperationResult{success:boolean;message?:string;data?:any;}// 统一的操作处理函数exportasyncfunctionhandleApprovalOperation(operationType:'withdraw'|'delete'|'submit',params:{instanceId:string|number;[key:string]:any},callbacks:{onSuccess?:(data:any)=>void;onError?:(error:any)=>void;onFinally?:()=>void;}={}):Promise<OperationResult>{constoperationMap={withdraw:{api:withdrawApproval,loadingText:'撤回中...',successText:'撤回成功',},delete:{api:deleteApproval,loadingText:'删除中...',successText:'删除成功',},submit:{api:submitApproval,loadingText:'提交中...',successText:'提交成功',},};constoperation=operationMap[operationType];if(!operation){return{success:false,message:'未知操作类型'};}try{showLoading(operation.loadingText);constresult=awaitoperation.api(params);hideLoading();if(result.success||result.code===200){showToast(operation.successText);callbacks.onSuccess?.(result.data);return{success:true,data:result.data};}else{consterrorMsg=result.message||'操作失败';showToast(errorMsg);callbacks.onError?.(newError(errorMsg));return{success:false,message:errorMsg};}}catch(error:any){hideLoading();consterrorMsg=error.message||'网络异常，请重试';showToast(errorMsg);callbacks.onError?.(error);return{success:false,message:errorMsg};}finally{callbacks.onFinally?.();}}// 使用示例consthandleWithdraw=async(item)=>{constresult=awaithandleApprovalOperation('withdraw',{instanceId:item.id},{onSuccess:()=>{// 从列表中移除listData.value=listData.value.filter((i)=>i.id!==item.id);},});};

方案五：API 接口层的错误处理

// api/approval.tsimport{http}from'@/utils/request';// 撤回审批exportfunctionwithdrawApproval(data:{instanceId:number|string;reason?:string}){returnhttp({url:'/approval/instance/withdraw',method:'POST',data:{instanceId:Number(data.instanceId),// 确保类型正确reason:data.reason||'',},});}// 删除审批exportfunctiondeleteApproval(data:{instanceId:number|string;deleteType?:string}){returnhttp({url:'/approval/instance/delete',method:'POST',data:{instanceId:Number(data.instanceId),// 确保类型正确deleteType:data.deleteType||'permanent',},});}// 请求拦截器中添加响应处理http.interceptors.response.use((response)=>{const{code,data,message}=response.data;// 统一处理业务错误码if(code!==200&&code!==0){// 不要静默处理，返回错误信息returnPromise.reject({success:false,code,message:message||'请求失败',data:null,});}return{success:true,code,message,data,};},(error)=>{// 网络错误处理console.error('请求错误:',error);returnPromise.reject({success:false,code:-1,message:error.message||'网络异常',data:null,});});

方案六：完整的列表页面示例

<template> <view class="approval-list"> <!-- 状态标签页 --> <view class="tabs"> <view v-for="tab in tabs" :key="tab.value" :class="['tab-item', { active: currentStatus === tab.value }]" @click="switchTab(tab.value)" > {{ tab.label }} <text v-if="tab.count" class="count">{{ tab.count }}</text> </view> </view> <!-- 列表内容 --> <scroll-view scroll-y class="list-container" @scrolltolower="loadMore" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh" > <view v-if="listData.length > 0"> <view v-for="item in listData" :key="item.id" class="approval-item"> <view class="item-header"> <text class="title">{{ item.title }}</text> <text :class="['status', item.status]">{{ getStatusText(item.status) }}</text> </view> <view class="item-content"> <text>申请时间：{{ item.createTime }}</text> <text>申请金额：¥{{ item.amount }}</text> </view> <!-- 操作按钮 --> <view class="item-actions"> <!-- 待审批状态可撤回 --> <button v-if="item.status === 'pending'" class="btn btn-withdraw" @click="handleWithdraw(item)" > 撤回 </button> <!-- 草稿状态可编辑和删除 --> <template v-if="item.status === 'draft'"> <button class="btn btn-edit" @click="handleEdit(item)">编辑</button> <button class="btn btn-delete" @click="handleDelete(item)">删除</button> </template> </view> </view> </view> <!-- 空状态 --> <view v-else class="empty-state"> <image src="/static/empty.png" class="empty-image" /> <text>暂无数据</text> </view> </scroll-view> </view> </template> <script setup> import { ref, computed } from 'vue'; import { onLoad, onShow } from '@dcloudio/uni-app'; import { getApprovalList, withdrawApproval, deleteApproval } from '@/api/approval'; const tabs = [ { label: '待审批', value: 'pending', count: 0 }, { label: '草稿箱', value: 'draft', count: 0 }, { label: '已完成', value: 'completed', count: 0 }, ]; const currentStatus = ref('pending'); const listData = ref([]); const isRefreshing = ref(false); const isFirstLoad = ref(true); const pageNum = ref(1); const hasMore = ref(true); // 加载列表 const loadListData = async (isLoadMore = false) => { try { if (!isLoadMore) { pageNum.value = 1; hasMore.value = true; } const response = await getApprovalList({ status: currentStatus.value, pageNum: pageNum.value, pageSize: 20, }); const newList = response.list || []; if (isLoadMore) { listData.value = [...listData.value, ...newList]; } else { listData.value = newList; } hasMore.value = newList.length >= 20; } catch (error) { console.error('加载失败:', error); uni.showToast({ title: '加载失败', icon: 'none' }); } }; // 切换标签 const switchTab = (status) => { if (currentStatus.value === status) return; currentStatus.value = status; loadListData(); }; // 下拉刷新 const onRefresh = async () => { isRefreshing.value = true; await loadListData(); isRefreshing.value = false; }; // 加载更多 const loadMore = () => { if (!hasMore.value) return; pageNum.value++; loadListData(true); }; // 撤回操作 const handleWithdraw = async (item) => { try { const [error] = await uni.showModal({ title: '确认撤回', content: '撤回后将移至草稿箱，确定吗？', }); if (error || !error.confirm) return; uni.showLoading({ title: '撤回中...' }); const result = await withdrawApproval({ instanceId: item.id }); uni.hideLoading(); if (result.success) { uni.showToast({ title: '撤回成功', icon: 'success' }); // 从当前列表移除 listData.value = listData.value.filter((i) => i.id !== item.id); } else { uni.showToast({ title: result.message || '撤回失败', icon: 'none' }); } } catch (error) { uni.hideLoading(); uni.showToast({ title: '操作失败', icon: 'none' }); } }; // 删除操作 const handleDelete = async (item) => { try { const [error, res] = await uni.showModal({ title: '确认删除', content: '删除后无法恢复，确定吗？', }); if (error || !res.confirm) return; uni.showLoading({ title: '删除中...' }); const result = await deleteApproval({ instanceId: item.id, deleteType: 'permanent', }); uni.hideLoading(); if (result.success) { uni.showToast({ title: '删除成功', icon: 'success' }); listData.value = listData.value.filter((i) => i.id !== item.id); } else { uni.showToast({ title: result.message || '删除失败', icon: 'none' }); } } catch (error) { uni.hideLoading(); uni.showToast({ title: '操作失败', icon: 'none' }); } }; // 编辑 const handleEdit = (item) => { uni.navigateTo({ url: `/pages/approval/edit?id=${item.id}`, }); }; // 获取状态文本 const getStatusText = (status) => { const map = { pending: '待审批', draft: '草稿', completed: '已完成', rejected: '已驳回', }; return map[status] || status; }; // 生命周期 onLoad(() => { loadListData(); }); // 关键：页面显示时刷新数据 onShow(() => { if (isFirstLoad.value) { isFirstLoad.value = false; return; } // 从编辑页返回时刷新 loadListData(); }); </script> <style lang="scss" scoped> .approval-list { min-height: 100vh; background: #f5f5f5; } .tabs { display: flex; background: #fff; padding: 20rpx; gap: 20rpx; .tab-item { flex: 1; text-align: center; padding: 16rpx; border-radius: 8rpx; background: #f0f0f0; font-size: 28rpx; &.active { background: #1890ff; color: #fff; } .count { margin-left: 8rpx; font-size: 24rpx; } } } .approval-item { background: #fff; margin: 20rpx; padding: 24rpx; border-radius: 12rpx; .item-header { display: flex; justify-content: space-between; margin-bottom: 16rpx; .title { font-size: 32rpx; font-weight: 500; } .status { font-size: 24rpx; padding: 4rpx 12rpx; border-radius: 4rpx; &.pending { background: #fff7e6; color: #fa8c16; } &.draft { background: #f0f0f0; color: #666; } } } .item-actions { display: flex; gap: 16rpx; margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid #eee; .btn { flex: 1; font-size: 28rpx; padding: 16rpx; border-radius: 8rpx; border: none; &.btn-withdraw { background: #fff7e6; color: #fa8c16; } &.btn-edit { background: #e6f7ff; color: #1890ff; } &.btn-delete { background: #fff1f0; color: #ff4d4f; } } } } .empty-state { display: flex; flex-direction: column; align-items: center; padding: 100rpx; color: #999; } </style>