当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 5+ API，管理系统原生界面，可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框，预览图片等

5+ API，管理系统原生界面，可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框，预览图片等

2020年07月24日  | 移动技术网IT编程  | 我要评论

在uniapp内使用5+ API 实现原生对话框操作

弹出原生toast提示框

plus.nativeUI.toast('原生的toast提示框');

在这里插入图片描述

原生图片预览，长按提示保存

plus.nativeUI.previewImage([
	"http://www.qc888.info/uploads/share/QJESUK.png",
	"http://img-cdn-qiniu.dcloud.net.cn/newpage/images/logo4.png"
	],{
	current:0,
	loop:true,
	onLongPress:function(e){	// 预览界面长按显示ActionSheet
		console.log('长按获取当前图片数据: '+JSON.stringify(e));
		var bts=[{title:"保存"}];
		plus.nativeUI.actionSheet({title:"保存图片",cancel:"取消",buttons:bts},
			function(e){
				console.log(JSON.stringify(e))
				console.log(e.index == 0 ? '取消' :'保存')
			}
		);
	}
});

在这里插入图片描述

弹出系统日期选择对话框

var styles = {};
styles.title = "请选择日期："; // 显示标题
styles.date = new Date(), styles.date.setFullYear(2018,8,8);// 默认显示的日期
styles.minDate = new Date(), styles.minDate.setFullYear(2010,0,1);// 设置最小可选日期为“2010-01-01”
styles.maxDate = new Date(), styles.maxDate.setFullYear(2020,11,31);// 设置最大可选日期为“2020-12-31”
plus.nativeUI.pickDate(function(e){
	var d=e.date;
	console.log( "选择的日期："+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
}, function(e){
	console.log( "未选择日期："+e.message );
}, styles);

在这里插入图片描述

弹出系统时间选择对话框

plus.nativeUI.pickTime(function(e){
	var d=e.date;
		console.log("选择的时间："+d.getHours()+":"+d.getMinutes());
	}, function(e){
		console.log("未选择时间："+JSON.stringify(e));
});

在这里插入图片描述
在这里插入图片描述

弹出系统确认对话框

plus.nativeUI.confirm("内容", function(e){
	console.log((e.index==0 ? "确认" : "取消") + e.index);
	},
	{"title":"标题",
		"buttons":["确认","取消"],
		"verticalAlign":"center"
	}
);

在这里插入图片描述
API地址：

图片预览并保存到本地请参考我的另一篇文章：保存图片到系统相册

本文地址：https://blog.csdn.net/qq_40745143/article/details/107507071

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网