【uni-app】基础

news2025/10/31 9:58:04

一、官网

网址：https://zh.uniapp.dcloud.io/tutorial/
其他辅助网页讲解：https://www.wenjiangs.com/doc/7y94pldun2
插件下载free：https://ext.dcloud.net.cn/

二、提示框

用uni.showToast提醒的次数超过7个字的时候就会导致文字显示不全，达不到提醒的效果，这种时候我们就需要使用uni.showModal显示态弹窗

1.showToast

（1）uni.showToast参数

在这里插入图片描述

（2）icon图标的参数

在这里插入图片描述

(3) 用法

uni.showToast({
	title: '没有更多了',//标题 必填
	icon: 'none',//图标
    image: '',//自定义图标的本地路径（app端暂不支持gif）
    mask: true,//是否显示透明蒙层，防止触摸穿透，默认：false
    duration: '',//提示的延迟时间，单位毫秒，默认：1500
    position: '',//纯文本轻提示显示位置，填写有效值后只有 title 属性生效，且不支持通过         uni.hideToast 隐藏。有效值详见下方说明。	App
    success: '',//接口调用成功的回调函数	
    fail: '',//接口调用失败的回调函数	
    complete: '',//接口调用结束的回调函数（调用成功、失败都会执行）
});

（4）icon区别

openToast(){
    uni.showToast({
		title: 'success',
		icon: 'success',
	});

在这里插入图片描述

（5）隐藏消息框提示

uni.hideToast();

2.showModal

（1）uni.showModal参数

在这里插入图片描述

（2）success返回参数

在这里插入图片描述

（3）基本实现

在这里插入图片描述

uni.showModal({
	title: '提示',
	content: '这是一个模态框！',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});

在这里插入图片描述

openModel() {
	uni.showModal({
		title: '提示',
		content: '这是一个模态框！',
		editable: true,
		placeholderText: '显示输入框',
	});
}

3.showLoading 和 hideLoading

（1）参数


uni.showLoading({
	title: '',//提示的文字内容，显示在loading的下方
    mask: '',//Boolean 	是否显示透明蒙层，防止触摸穿透，默认：false
    success: function (res) {},//接口调用成功的回调函数	
    fail: '',//接口调用失败的回调函数
    complete: '',//接口调用结束的回调函数（调用成功、失败都会执行）
    });

（2）用法

在这里插入图片描述

uni.showLoading({
	title: '加载中',
	mask: true,
});
 
setTimeout(function () {
	uni.hideLoading();
}, 2000);

4.showActionSheet

在这里插入图片描述

uni.showActionSheet({
			    itemList: ['选项一', '选项二', '选项三'],
			    // 字体颜色
			    itemColor: "#55aaff",
			    success (res) {
			       // 选择其中任意一项后，获取其索引（res.tapIndex），从0开始
			       console.log(res.tapIndex) 
			    },
			    fail (res) {
			       // 取消后的操作
			    }
			})