更新记录

1.0.0（2023-06-26） 下载此版本

介绍

平时经常在写提示完成后再跳转时要多写好几行代码，还要加个定时器，比较麻烦，那么这个代码片段即可帮你解决这个问题，ts使用很得劲

安装

直接复制粘贴到项目中

导入

import { Oops } from "xxx"

import Oops from "xxx"

使用

0. 类型介绍

   interface Oops {
   oh(msg: string, options?: Options, func: () => void)
   }

1. 简单使用

   Oops.oh("提示信息")

2. 带图标

   type ico = "success" | "error" | "loading" | "none";
   Oops.oh("提示信息", { ico: "success" })

3. 提示完成后自动跳转

   Oops.oh("提示信息", { ico: "success" }, () => {
   To.go("/pages/home/index", { type: "switchTab" });
   });

4. 其他参数介绍，依次追加到 { ico: "success" } 后面即可，无先后顺序

   • ico: 图标 ?:（"success" | "error" | "loading" | "none"）
   • duration: 展示时间 ?:number 默认1500ms
   • mask: 提示中是否允许点击屏幕 ?: boolean 默认false
   • image: 自定义图片 ?:string

平台兼容性

介绍

相信对于刚接触uniapp的同学们对 提示完后再跳转 的需求真的是又爱又恨，为什么呢？因为我们在使用uni.showToast进行提示的过程中又写了uni.navigateTo需要跳转，再比如提交表单，提交完成需要先为用户提示是否成功之后再进行跳转。会发现，提示几乎是一闪而过甚至看不到提示信息，这是因为uni.showToast为异步方法，没有等待提示完成即跳转了页面。

我们的需求将是优雅的解决这个问题！

通常解决方案

通常我们都会使用以下写法来阻止立马跳转。但是！一行代码就可以搞定的事情为什么要写9行代码呢？

// 提示
uni.showToast({
    title: "hello world",
    duration: 2000
})
// 延时跳转
setTimeout(() => {
    uni.navigateTo({
        url: "/pages/index/index"
    })
}, 2000)

那么oopsoh它来了。请继续往下看👇

oopsoh

安装 🚀

npm i oopsoh or pnpm add oopsoh

导入

import { oh } from 'oopsoh'

使用

0. 类型介绍

interface Oops {
  oh(msg: string, options?: Options, func: () => void): void
}

1. 简单提示

oh('hello world')

2. 带图标的提示

oh('hello world', { ico: 'success' })

3. 提示完成后跳转页面

   只需要在oh函数第三个参数中传入一个函数，当提示完成之后即可自动执行该函数，假如你需要自定义提示时间，请往下看参数介绍

oh('提示信息', { ico: 'success' }, () => {
  Page.go('pages/home/index', { type: 'switchTab' }) // 页面跳转
})

这里的Page.go(xxx)等同于原生uni跳转的几个函数，我也无效封装了一个ts支持友好版本的。 链接：https://blog.csdn.net/qq_45602658/article/details/133888595

4. 详细参数介绍

   • ico ?: "success" | "error" | "loading" | "none" 默认 none
   • duration ?:number 默认1500ms 提示停留时间
   • mask ?:boolean 默认 false 提示中是否允许点击遮罩层
   • image ?:string 展示自定义图片
   • success ?: () => void 成功回调，一般用不到
   • fail ?: () => void 失败回调，一般用不到

5. 建议与意见

   从这里下载的是oopsoh的源码，下载到本地复制到项目中即可，使用 cli 的朋友推荐下载 npm包，npm i oopsoh

欢迎提更改意见。