今天学习了uni-app的api下的界面，
交互反馈
showToast和hideToast
showToast，这是消息提示框，使用方法是：uni.showToast(){}
hideToast,这是取消提示框的，使用的方法是：uni.hideToast()
<template>
<view class="content">
<navigator open-type="switchTab" url="/pages/user/user">跳转用户页面</navigator>
<button @click="show">显示</button>
<button @click="hide">隐藏</button>
</view>
</template>
<script setup>
function show() {
uni.showToast({
title: "操作成功",
// 默认是success,是成功
icon: 'success',
// 可以设置失败
// title:"操作失败",
// icon:'error',
// title默认是只能显示7个字,在小程序中只能显示一行,如果要显示多个字的时候,需要把icon设置成,none
// title:"今天是星期三，在上两天班就放假了",
// icon:'none',
// 设置显示的时长
duration: 5000,
// 设置一个图标
image: "../../static/logo.png",
// 默认是false,这个功能就是当出现弹出窗的时候,页面是否可以操作其他,设置成true,是不能操作其他的
// 这里穿插下,页面跳转,在使用navigator的时候,跳转不能直接跳转到tabBar中,需要设置open-type
mask: true
})
}
function hide(){
uni.hideToast();
}
</script>
showLoading和hideLoading
这是加载提示框，虽然showToast也能实现，但是需要设置显示时长，这个一般是获取网络数据的时候使用的，如果设置了时长，不一定能达到效果，因此是有专门的api来使用加载过程
使用的方法和showToast相同，，hideLoading是取消显示，这个是网络请求成功或者失败都可以让提示框关闭。
<template>
<view class="">
个人中心
</view>
</template>
<script setup>
uni.showLoading({
title:"加载中...",
// 添加了mask后,页面是不能点击的
mask:true
})
// 这里添加定时器,是为了验证加载框
setInterval(()=>{
uni.hideLoading();
},6000)
</script>
showModal
显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。
<template>
<view class="">
<button @click="dele">删除</button>
</view>
</template>
<script setup>
import { ref } from 'vue';
function dele(){
uni.showModal({
title:'是否删除', //提示的标题
content:'这是删除，不会在有了',//提示的内容
showCancel:true,//是否显示取消按钮，默认为 true
cancelText:'不删除了',//取消按钮的文字，默认为"取消"
cancelColor:'red',//取消按钮的文字颜色，默认为"#000000"
confirmText:'真要删除',//确定按钮的文字，默认为"确定"
confirmColor:'#0000cd',//确定按钮的文字颜色，H5默认为"#007aff"，微信小程序默认为"#576B95"，百度小程序默认为"#3c76ff"
editable:false,//是否显示输入框
placeholderText:"请填写删除原因",//显示输入框时的提示文本
//当不显示输入框的时候，这里的ref就监听点击的是确定按钮还是取消按钮，
// 当点击了确定按钮:ref.confirm=true
// 当点击了取消按钮:ref.cancel=true
// 如果添加了输入框后,ref获取输入的内容是在:content中,获取方式:ref.content
// success: function(ref){
// if(ref.confirm){uni.showToast({
// title:"删除成功了"
// })}
// };
// success还有一种写法:
success:ref=>{
if(ref.confirm)uni.showToast({
title:"成功"
})
}
})
}
</script>
根据官方文档，这里有需要注意的地方，
弹框同时使用确定取消时，需注意不同平台的确认取消按钮位置不同。在微信、H5中，确认按钮默认在右边。在App中，iOS的确认按钮默认在右边，而Android默认在左边。产生这种差异的原因是uni.showModal在App和小程序上调用的是原生提供的弹出框，原生平台的策略本身就不同。如果需要调整，可以通过自行控制按钮的文字，即“确定”按钮的文字其实可以设置为“取消”；
showModal不满足需求时，可以自行开发组件弹框。插件市场有很多自定义弹框的组件，需注意在非H5平台，前端组件无法覆盖原生组件（如地图、video），遮罩也无法盖住tabbar和navigationbar。如需覆盖原生组件或遮罩tabbar等，App端推荐使用subNvue；
小程序平台，cancelText和confirmText有长度限制，最多允许 4 个字符；
钉钉小程序真机与模拟器表现有差异，真机title，content均为必填项
各家小程序平台对于 confirm、cancel 字段返回规则可能不尽相同，包含两种情况：{ confirm: true, cancel: false } 或 { confirm: true }，但并不影响使用 if 去做判断
showActionSheet
这是从底部向上弹出操作菜单
这里添加一个按钮，点击后出现弹出框，然后选择后在页面显示出来
<template>
<view>
<button @click="learn">学历</button>
<text>{{learnName}}</text>
</view>
</template>
<script setup>
let arry = ["高中", "大专", "本科", "研究生"];
const learnName=ref("");
function learn() {
uni.showActionSheet({
title: "提示框", //菜单标题
alertText: "警示文案", //警示文案（同菜单标题）,只在小程序真机有用
// itemList 按钮的文字数组
itemList: arry,
// itemColor 按钮的文字颜色，字符串格式，默认为"#000000"
itemColor: "red",
// popover:ccc ,//大屏设备弹出原生选择按钮框的指示区域，默认居中显示，详细说明：top（指示区域坐标，使用原生 navigationBar 时一般需要加上 navigationBar 的高度）、left（指示区域坐标）、width（指示区域宽度）、height（指示区域高度），
// success 接口调用成功的回调函数，详见返回参数说明 参数:tapIndex.用户点击的按钮，从上到下的顺序，从0开始
success: ref => {
console.log(ref);
learnName.value=arry[ref.tapIndex];
}
})
}
</script>
这就把界面下的交互反馈学完了，这几个交互使用的频率高，使用也简单
加油！！！