uniapp 交互反馈API介绍及使用

uni.showToast(Object)

此API是在页面上显示消息提示框，使用的场景如：登录时显示成功与失败提示、删除某个数据时显示删除状态、修改信息的时候显示修改状态等操作

Object参数

title：参数类型：String，用来显示提示的内容，提示内容显示的长度跟icon的取值有关系

icon：参数类型：String，显示的图标，如：操作成功、失败图标，默认值：success

image：参数类型：String，本地的自定义图标路径，注意：在App上暂且不支持.gif后缀的动态图标，在App、H5、微信小程序、百度小程序、抖音小程序（2.62.0+）上有效

mask：参数类型：Boolean，设置其显示消息提示框的时是否可以继续操作应用，默认值：false，在App、微信小程序、抖音小程序（2.47.0+）上有效

duration：参数类型：Number，提示消息显示的时间，单位：毫秒，默认值：1500(1.5秒)

position：参数类型：String，纯文字提示消息框，且只在App端有效，设置值后，只有title属性会生效，并且不支持通过uni.hideToast对其进行隐藏

success：参数类型：Function，接口调用成功后执行的回调函数

fail：参数类型：Function，接口调用失败后执行的回调函数

complete：参数类型：Function，接口调用结束后执行的回调函数，无论接口调用成功与失败都会执行

icon有效值

success：显示成功图标，且title属性在小程序中显示的字体长度最多是7个汉字，App只支持显示单行，支付宝小程序没有长度限制

error：显示错误图标，且title 文本在小程序中最多显示的字体长度是7个汉字，App仅支持单行显示，在支付宝小程序、快手小程序、抖音小程序、百度小程序、京东小程序、QQ小程序中不支持

fail：显示错误图标，这个时候的title属性没有长度限制，在支付宝小程序、抖音小程序上有效

exception：显示异常图标，这个时候的title属性没有长度限制，在支付宝小程序上有效

loading：显示加载图标，且title属性在小程序中显示的字体长度最多是7个汉字，在支付宝小程序中不支持

none：不显示图标，此时的title属性最多支持显示两行文字

使用示例

当icon值为success时

<template>
    <view class="layout">
        <button @click="onClick">点击</button>
    </view>
</template>

<script setup>
    import {ref} from "vue";
    const flag=ref(false);
    
    function onClick(){
        uni.showToast({
            title:"操作成功操作成功操作成功",//提示信息框的内容
            icon:"success",//显示图标为成功图标
            duration:2000,//显示提示信息框时间
            mask:true//在显示操作成功提示信息框的2秒内再次点击“点击”按钮时，会无效
        })
    }
</script>

<style lang="scss" scoped>
    
</style>

title的字体限制为7个汉字

当设置icon值为fail时

在支付宝小程序中运行的效果时title长度没有被限制，在微信小程序中显示的效果仍然是icon值为success时的效果，所以fail对微信小程序不起作用

使用image自定义图标

function onClick(){
        uni.showToast({
            title:"操作成功操作成功操作成功",//提示信息框的内容
            image:"../../static/success.png",
            duration:2000,//显示提示信息框时间
            mask:true//在显示操作成功提示信息框的2秒内再次点击“点击”按钮时，会无效
        })
    }

自定图标在微信小程序中有效，在支付宝小程序中无效

uniapp.hideToast()

隐藏消息提示框

uni.showLoading(Object)

显示loading提示框，如需关闭必须要主动调用uni.hideLoading()才能关闭提示框

Object参数

title：参数类型：String，提示的文字内容，显示在loading的下方

mask：参数类型：Boolean，设置出现提示框的时候是否可以继续操作应用，默认值：false，在H5、App、微信小程序、百度小程序、抖音小程序（2.47.0+）上支持

success：参数类型：Function，接口调用成功后的回调函数

fail：参数类型：Function，接口调用失败后的回调函数

complete：参数类型：Function，接口调用结束的回调函数，无论成功或失败都会执行

使用示例

<template>
    <view class="layout">
        <button @click="onClick">点击刷新</button>
        <view v-if="flag">模拟异步加载数据操作</view>
    </view>
</template>

<script setup>
    import {ref} from 'vue';
    const flag = ref(false);

    function onClick() {
        uni.showLoading({
            title: "加载中...",
            mask: true,
            success() {
                flag.value=false;
            }
        });
        setTimeout(()=>{
            //模拟异步加载数据延迟
            uni.hideLoading();
            flag.value=true;
            uni.showToast({
                title:"加载成功",
                icon:"success"
            })
        },3000)
    }
    
</script>

<style lang="scss" scoped>

</style>

页面效果

交互反馈之showLoading演示示例

这个示例就是在模拟在我们开发的过程中异步加载数据

uni.showToast与uni.showLoading区别

uni.showToast是用于显示一个轻量级的短暂的提示信息通常是用来给用户反馈操作结果，如：保存成功、操作成功等，并不会阻碍用户的其他操作

uni.showLoading是用于显示一个加载提示框，且uni.showLoading不是短暂的显示而是需要显式的调用uni.hideLoading()来关闭它，通常是用于处理用户的某些操作，如：文件上传、数据加载等，这个API是告诉用户应用正在处理操作，建议用户等待

uni.showModal(Object)

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮，就好像这个API整合了html中都alert和confirm一样

Object参数

title：参数类型：String，提示的标题

content：参数类型：String，提示的内容

showCancel：参数类型：Boolean，设置是否显示取消按钮，默认值：true

cancelText：参数类型：String，设置显示的取消按钮的文字，默认值：取消

cancelColor：参数类型：HexColor，设置取消按钮的文字颜色，默认值：#000000，在H5、微信小程序、百度小程序、抖音小程序（2.62.0+）上有效

confirmText：参数类型：String，确定按钮的文字，默认值：确定

confirmColor：参数类型：String，设置确认按钮的文字演示，默认值：H5：#007aff，微信小程序：#576B95，百度小程序：#3c76ff，在H5、微信小程序、百度小程序、抖音小程序（2.62.0+）上有效

editable：参数类型：Boolean，是否显示输入框，一般用于在删除重要数据时，让用户输入确认与否，在H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）上有效

placeholderText：参数类型：String，editable为ture时显示输入框内的提示文本，H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）上有效

其中：成功、失败、执行完成这三个参数跟上面的API都是相同的这里就不介绍了

success返回值参数

confirm：值类型：Boolean，当其值为true时，则表示用户点击的是确认按钮，如：用户修改或删除重要数据时，点击确定后执行异步操作

cancel：值类型：Boolean，其值为true时，则表示用户点击了取消按钮，可用于区分Android系统中的点击蒙层关闭还是点击按钮关闭

content：值类型：String，其值是editable为true时，用户输入的文字，如：判断用户输入了确定还是取消然后进行对应操作，在H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）上有效

使用示例

<template>
    <view class="layout">
        <button @click="onClick">删除</button>
    </view>
</template>

<script setup>
    function onClick(){
        uni.showModal({
            title:"删除",
            // content:"确认要删除吗？",
            showCancel:true,
            cancelColor:"#00bfff",
            confirmColor:"#dd524d",
            editable:true,
            placeholderText:"请输入确认或取消",
            success:function(res){
                if(res.confirm&&res.content=="确认"){
                    //模拟点击确定后进行异步删除延迟
                    setTimeout(()=>{
                        uni.showToast({
                            title:"删除成功",
                            icon:"success"
                        })
                    },1000)
                    console.log("用户操作确认执行");
                }else if(res.cancel||res.content!="确认"){
                    uni.showToast({
                        title:"操作取消",
                        image:"../../static/cancel.png"
                    })
                    console.log("用户操作取消执行");
                }
            }
        })
    }
</script>

<style lang="scss" scoped>
    
</style>

页面效果

交互反馈之showModal模糊弹出

注意：如果确认和取消按钮同时出现的时候，不同的平台按钮的左右顺序不一样，有些时取消在左边，有些时取消在右边，如果想要取消在右边的话就把确认的文字改成取消，然后取消的操作在，confirm中执行

uni.showActionSheet(Object)

从底部向上弹出操作菜单，可以通过点击不同的菜单项，来实现不同的操作，如：切换应用主题颜色

Object参数

title：参数类型：String，设置显示菜单标题，在App、H5、支付宝小程序、钉钉小程序、微信小程序 3.4.5+中仅真机有效

alertText：参数类型：String，设置警示文案，在微信小程序 3.4.5+中仅真机有效

itemList：参数类型：Array<String>，弹出的菜单按钮数组，在微信、百度、抖音小程序数组长度最大为6个

itemColor：参数类型：HexColor，设置显示按钮的文字颜色，默认值：#000000，在App-iOS、飞书小程序不支持

popover：参数类型：Object，设置显示大屏设备弹出原生选择按钮框的指示区域，默认的显示位置为：居中，在App-iPad（2.6.6+）、H5（2.9.2）上有效，有效值见：uni.showToast(OBJECT) | uni-app官网

其中：成功、失败、执行完成这三个参数跟上面的API都是相同的这里就不介绍了

success有效返回值

tapIndex：值类型：Number，用户点击菜单中的按钮项，从上到下的顺序，从0开始

使用示例

<template>
    <view :style="themeStyle">
        今天又是美好的一天，依旧是学习打卡,^_^
        <button @click="onClick" :style="themeStyle.buttonStyle">切换主题</button>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
    const themeStyle=reactive({
        height: '100vh',//view高度为整个页面的高度，模拟切换背景
        background: '#242424',
        color: 'white',
        buttonStyle:{
            background:'#242424',
            color:'white',
            border:'1px solid white',
            marginTop: '100px'
        }
    })
    const color=ref('white');
    function onClick(){
        uni.showActionSheet({
            title:"切换主体颜色",
            itemList:['日间模式','夜间模式'],
            success:function(res){
                if(res.tapIndex==0){ 
                        //切换日间模式，重新赋值themeStyle
                        themeStyle.background = '#f0f0f0';
                        themeStyle.color = 'black';
                        themeStyle.buttonStyle.background = '#f0f0f0';
                        themeStyle.buttonStyle.color = 'black';
                        themeStyle.buttonStyle.border='1px solid black';
                      }else{ 
                        //切换夜间模式，重新赋值themeStyle
                        themeStyle.background = '#242424';
                        themeStyle.color = 'white';
                        themeStyle.buttonStyle.background = '#242424';
                        themeStyle.buttonStyle.color = 'white';
                        themeStyle.buttonStyle.border='1px solid white';
                      } 
                uni.showToast({
                    title:"切换成功",
                    icon:"success"
                })
            }
        })
    }
</script>

<style lang="scss" scoped>
</style>

页面效果

交互反馈之showActionSheet向上弹出的菜单按钮

通过点击不同的菜单项来实现主题效果的切换