[{"data":1,"prerenderedAt":93},["ShallowReactive",2],{"content:\u002Fposts\u002F2022\u002Fminiprogram-showtoast-true-phone-bug":3,"surround:\u002Fposts\u002F2022\u002Fminiprogram-showtoast-true-phone-bug":82},{"id":4,"title":5,"body":6,"canonical":60,"categories":61,"date":63,"description":60,"draft":64,"extension":65,"image":66,"meta":67,"navigation":68,"path":69,"permalink":60,"readingTime":70,"recommend":60,"references":60,"seo":75,"sitemap":76,"stem":77,"tags":78,"type":60,"updated":63,"__hash__":81},"content\u002Fposts\u002F2022\u002Fminiprogram-showToast-true-phone-bug.md","showToast 在真机会闪退的问题及解决方案",{"type":7,"value":8,"toc":57},"minimark",[9,13,20,31,34,44,51],[10,11,12],"p",{},"当你在 uni-app 中使用 showLoading 进行加载状态的实现，然后数据返回后进行其他文字提示。你可能会遇到以下问题：",[14,15,16],"ul",{},[17,18,19],"li",{},"在微信开发者工具中是完美的，但是到实际手机上运行（预览版\u002F正式发布）会出现 loading 加载完成后，后面的提示问题一闪而过。",[10,21,22,23,27,28],{},"导致这个问题的原因是，在小程序底层 showLoading 和 showToast 其实都是 showToast 来实现的。在实机运行时，运行的顺序是 ",[24,25,26],"code",{"code":26},"showLoading -> showToast -> hideLoading","。而我们想要的效果是",[24,29,30],{"code":30},"showLoading -> hideLoading -> showToast",[10,32,33],{},"如何解决这个问题呢？在 uniapp 中，我们可以使用 showToast 来实现 loading 的效果",[35,36,42],"pre",{"className":37,"code":39,"language":40,"meta":41},[38],"language-js","uni.showToast({\n    icon: \"loading\",\n    duration: 300000,\n    mask: true,\n})\n","js","",[24,43,39],{"__ignoreMap":41},[10,45,46,47,50],{},"这里的 icon 为 loading 是，就和 showLoading 现实的状态是一致的。这里的延时",[24,48,49],{"code":49},"duration","我们尽可能的设置长一些，尽量达到接口超时时间，这样，就不必担心数据还未返回，loading 状态就消失不见了。下面是一个简单的示例：",[35,52,55],{"className":53,"code":54,"language":40,"meta":41},[38],"async function getUserList() {\n    try {\n        uni.showToast({\n            icon: \"loading\",\n            duration: 300000,\n            mask: true,\n        })\n        const { code, data, message } = await getUserListApi()\n        uni.hideToast()\n\n        uni.showToast({\n            icon: \"none\",\n            title: message,\n        })\n    }\n    catch (error) {\n        hideToast()\n    }\n}\n",[24,56,54],{"__ignoreMap":41},{"title":41,"searchDepth":58,"depth":58,"links":59},4,[],null,[62],"代码","2022-12-04 15:33:29",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fminiprogram-showToast-true-phone-bug.jpg",{},true,"\u002Fposts\u002F2022\u002Fminiprogram-showtoast-true-phone-bug",{"text":71,"minutes":72,"time":73,"words":74},"2 min read",1.445,86700,289,{"title":5,"description":60},{"loc":69},"posts\u002F2022\u002Fminiprogram-showToast-true-phone-bug",[79,80],"小程序","uniapp","0-cWWHmAXchdAiIi_Xe9u-lio2v8lNivleWa2GLrFfw",[83,88],{"title":84,"path":85,"stem":86,"date":87,"type":60,"children":-1},"扫码跳转至指定界面","\u002Fposts\u002F2022\u002Fminiprogram-scancode-jump-page","posts\u002F2022\u002Fminiprogram-scancode-jump-page","2022-12-04 15:32:48",{"title":89,"path":90,"stem":91,"date":92,"type":60,"children":-1},"uniapp中使用pinia","\u002Fposts\u002F2022\u002Fminiprogram-uniapp-use-pinia","posts\u002F2022\u002Fminiprogram-uniapp-use-pinia","2022-12-04 15:34:35",1789642596982]