nativeUI常见问题我要提意见

nativeUI管理系统原生界面,可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等。

方法:

对象:

回调方法:

权限:

5+功能模块(permissions)


{
// ...
"permissions":{
	// ...
	"NativeUI": {
		"description": "原生UI控件"
	}
}
}
			

actionSheet

弹出系统选择按钮框


NativeUIObj plus.nativeUI.actionSheet(actionsheetStyle, actionsheetCallback);
					

说明:

从底部动画弹出系统样式选择按钮框,可设置选择框的标题、按钮文字等。 弹出的提示框为非阻塞模式,用户点击选择框上的按钮后关闭,并通过actionsheetCallback回调函数通知用户选择的按钮。

参数:

返回值:

NativeUIObj : 系统原生界面基类对象

示例:


// 弹出系统选择按钮框
function actionSheet(){
	plus.nativeUI.actionSheet(
		{title:"Plus is ready!",
		cancel:"取消",
		buttons:[
			{
				title:"1"
			},{
				title:"2"
				}
		]},
		function(e){
			console.log("User pressed: "+e.index);
		}
	);
}
				

uni-app使用plus注意事项

alert

弹出系统提示对话框


void plus.nativeUI.alert(message, alertCB, title, buttonCapture);
					

说明:

创建并显示系统样式提示对话框,可设置提示对话框的标题、内容、按钮文字等。 弹出的提示对话框为非阻塞模式,用户点击提示对话框上的按钮后关闭,并通过alertCB回调函数通知对话框已关闭。

参数:

返回值:

void : 无

示例:


// 弹出系统提示对话框
function showAlert(){
	plus.nativeUI.alert("Hello HTML5 plus!", function(){
		console.log("User pressed!");
	}, "nativeUI", "OK");
}
				

uni-app使用plus注意事项

confirm

弹出系统确认对话框


void plus.nativeUI.confirm(message, confirmCB, styles);
void plus.nativeUI.confirm(message, confirmCB, title, buttons);	// deprecated
					

说明:

创建并显示系统样式确认对话框,可设置确认对话框的标题、内容、按钮数目及其文字。 弹出的确认对话框为非阻塞模式,用户点击确认对话框上的按钮后关闭,并通过confirmCB回调函数通知用户点击的按钮索引值。

参数:

返回值:

void : 无

平台支持:

示例:


// 弹出提示信息对话框
function showConfirm(){
	plus.nativeUI.confirm("Are you sure ready?", function(e){
		console.log("Close confirm: "+e.index);
	});
}
					

uni-app使用plus注意事项

closePreviewImage

关闭预览图片界面


void plus.nativeUI.closePreviewImage();
				

说明:

关闭已经显示的所有预览图片界面。
HBuilderX3.2.13+版本支持。

参数:

返回值:

void : 无

示例:


// 自动关闭系统等待对话框
function autoClosePreview(){
	plus.nativeUI.previewImage([
		"_www/logo.png",
		"http://img-cdn-qiniu.dcloud.net.cn/icon1.png",
		"http://img-cdn-qiniu.dcloud.net.cn/icon2.png",
		"http://img-cdn-qiniu.dcloud.net.cn/icon3.png"
	]);
	setTimeout(function(){
		plus.nativeUI.closePreviewImage();
	}, 5000);
}
				

uni-app使用plus注意事项

closeWaiting

关闭系统等待对话框


void plus.nativeUI.closeWaiting();
				

说明:

关闭已经显示的所有系统样式等待对话框,触发Waiting对象的onclose事件。

参数:

返回值:

void : 无

示例:


// 自动关闭系统等待对话框
function autoCloseWaiting(){
	plus.nativeUI.showWaiting( "等待中..." );
	setTimeout(function(){
		plus.nativeUI.closeWaiting();
	}, 5000);
}
				

uni-app使用plus注意事项

closeToast

关闭自动消失的提示消息


void plus.nativeUI.closeToast();
				

说明:

关闭已经显示的所有自动消失的提示框。

参数:

返回值:

void : 无

平台支持:

示例:


// 自动关闭系统等待对话框
function autoCloseToast(){
	plus.nativeUI.toast(
		"<font style=\"font-size:14px\">再按一次返回键退出<br/>点此可<a onclick=\"console.log('clicked')\">反馈意见</a></font>",
		{type:'richtext',
			duration:'long',
			richTextStyle:{align:'center'}
		}
	);
	setTimeout(function(){
		plus.nativeUI.closeToast();
	}, 500);
}
				

uni-app使用plus注意事项

previewImage

预览图片


void plus.nativeUI.previewImage(urls, styles);
				

说明:

创建并显示全屏图片预览界面,用户点击图片或返回键退出预览界面。

参数:

返回值:

void : 无

示例:


// 图片预览
function previewImage(){
	plus.nativeUI.previewImage([
		"_www/logo.png",
		"http://img-cdn-qiniu.dcloud.net.cn/icon1.png",
		"http://img-cdn-qiniu.dcloud.net.cn/icon2.png",
		"http://img-cdn-qiniu.dcloud.net.cn/icon3.png"
	]);
}
				

uni-app使用plus注意事项

showWaiting

显示系统等待对话框


Waiting plus.nativeUI.showWaiting(title, styles);
				

说明:

创建并显示系统样式等待对话框,并返回等待对话框对象Waiting,显示后需调用其close方法进行关闭。

参数:

返回值:

Waiting : Waiting对象

示例:


// 弹出系统等待对话框
function showWaiting(){
	var w = plus.nativeUI.showWaiting("等待中...");
}
				

uni-app使用plus注意事项

pickDate

弹出系统日期选择对话框


void plus.nativeUI.pickDate( successCB, errorCB, styles );
					

说明:

创建并显示系统样式日期选择对话框,可进行日期的选择。 用户操作确认后通过successCB回调函数返回用户选择的日期,若用户取消选择则通过errorCB回调。

参数:

返回值:

void : 无

示例:


// 选择日期
function pickDate(){
	plus.nativeUI.pickDate(function(e){
		var d=e.date;
		console.log("选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate());
	}, function(e){
		console.log("未选择日期:"+JSON.stringify(e));
	});
}
				

uni-app使用plus注意事项

pickTime

弹出系统时间选择对话框


void plus.nativeUI.pickTime(successCB, errorCB, styles);
				

说明:

创建并弹出系统样式时间选择对话框,可进行时间的选择。 用户操作确认后通过successCB回调函数返回用户选择的时间,若用户取消选择则通过errorCB回调。

参数:

返回值:

void : 无

示例:


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

uni-app使用plus注意事项

prompt

弹出系统输入对话框


void plus.nativeUI.prompt(message, promptCB, title, tip, buttons);
				

说明:

创建并显示系统样式输入对话框,可设置输入对话框的标题、内容、提示输入信息、按钮数目及其文字。 弹出的输入对话框为非阻塞模式,其中包含编辑框供用户输入内容,用户点击输入对话框上的按钮后自动关闭,并通过promptCB回调函数返回用户点击的按钮及输入的内容。

参数:

返回值:

void : 无

示例:


// 弹出输入对话框
function showPrompt(){
	plus.nativeUI.prompt("Input your name: ", function(e){
		console.log(((e.index==0)?"OK: ":"Cancel")+e.value);
	}, "nativeUI", "your name", ["OK","Cancel"]);
}
				

uni-app使用plus注意事项

toast

显示自动消失的提示消息


void plus.nativeUI.toast(message, styles);
				

说明:

创建并显示系统样式提示消息,弹出的提示消息为非阻塞模式,显示指定时间后自动消失。 提示消息显示时间可通过styles的duration属性控制,长时间提示消息显示时间约为3.5s,短时间提示消息显示时间约为2s。

参数:

返回值:

void : 无

示例:


// 显示自动消失的提示消息
function showToast(){
	plus.nativeUI.toast("I'am toast information!");
}
				

uni-app使用plus注意事项

setUIStyle

设置原生界面样式(暗黑模式)


void plus.nativeUI.setUIStyle(style);
				

说明:

iOS13+系统支持暗黑模式,可设置原生界面的外观样式为浅色或深色(暗黑模式)。 即使应用没有设置"全局开启暗黑模式",也可以调用此方法强制设置原生界面外观样式。 HBuilderX2.6.3+版本支持,并且要求iOS13及以上系统。

参数:

返回值:

void : 无

平台支持:

示例:


// 设置原生界面为暗黑模式
function showToast(){
	plus.nativeUI.setUIStyle(‘dark’);
}
				

uni-app使用plus注意事项

ActionButtonStyles

原生选择按钮框上按钮的样式

属性:

示例:


// 弹出系统选择按钮框
function actionSheet(){
	var actionbuttons=[{title:"不同意",style:"destructive"},{title:"1"},{title:"2"},{title:"3"}];
	var actionstyle={title:"Hello HTML5 plus!",cancel:"取消",buttons:actionbuttons};
	plus.nativeUI.actionSheet(actionstyle, function(e){
		console.log("User pressed: "+e.index );
	});
}
				

uni-app使用plus注意事项

ActionSheetStyles

原生选择按钮框的样式

属性:

示例:


// 弹出系统选择按钮框
function actionSheet(){
	var actionbuttons=[{title:"不同意",style:"destructive"},{title:"1"},{title:"2"},{title:"3"}];
	var actionstyle={title:"Hello HTML5 plus!",cancel:"取消",buttons:actionbuttons};
	plus.nativeUI.actionSheet(actionstyle, function(e){
		console.log("User pressed: "+e.index );
	});
}
				

uni-app使用plus注意事项

ConfirmStyles

确认对话框的样式

属性:

示例:


// 弹出系统确认对话框
function showConfirm(){
	plus.nativeUI.confirm("Are you sure ready?", function(e){
			console.log("Close confirm: "+e.index);
		},
		{"title":"nativeUI",
			"buttons":["Yes","No"],
			"verticalAlign":"bottom"
		}
	);
}
					

uni-app使用plus注意事项

PreviewImageStyles

图片预览的样式

属性:

示例:


// 图片预览 
function previewImage(){
	plus.nativeUI.previewImage([
		"_www/img/h5p.jpg",
		"../img/shake/2.jpg",
		"http://img-cdn-qiniu.dcloud.net.cn/newpage/images/logo4.png"
	],{
		current:1,
		loop:true,
		onLongPress:function(e){	// 预览界面长按显示ActionSheet
			console.log('onLongPress: '+JSON.stringify(e));
			var bts=[{title:"警告",style:"destructive"},{title:"按钮1"},{title:"按钮2"},{title:"按钮3"}];
			plus.nativeUI.actionSheet({title:"ActionSheet标题",cancel:"取消",buttons:bts},
				function(e){
					console.log( "选择了\""+((e.index>0)?bts[e.index-1].title:"取消")+"\"");
				}
			);
		}
	});
}
				

uni-app使用plus注意事项

PickDateStyles

日期选择对话框的样式

属性:

示例:


// 选择日期
function pickDate(){
	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);
}
				

uni-app使用plus注意事项

PickTimeStyles

时间选择对话框的样式

属性:

示例:


// 选择时间
function pickTime(){
	var styles = {};
	styles.title = "请选择时间:";	//设置标题
	styles.time = new Date(), styles.time.setHours(6,0); //设置默认显示时间为早上6点
	styles.is24Hour = false; //使用12小时制模式显示
	
	plus.nativeUI.pickTime(function(e){
		var d=e.date;
		console.log( "选择的时间:"+d.getHours()+":"+d.getMinutes() );
	}, function(e){
		console.log( "未选择时间:"+e.message );
	}, styles);
}
				

uni-app使用plus注意事项

NativeUIObj

系统原生界面基类对象


interface NativeUIObj{
	function void close();
}
				

方法:

close

关闭显示的系统原生界面


void uiobj.close();
						

说明:

调用plus.nativeUI.actionSheet方法创建并显示系统界面后,可通过其close方法将原生界面关闭。 此情况下触发界面关闭回调函数参数的index属性值为-1。 注意:一个系统原生界面只能关闭一次,多次调用将无任何作用。

参数:

返回值:

void : 无

示例:


// 弹出系统选择按钮框(5秒后自动关闭) 
function autoActionSheet(){
	var a = plus.nativeUI.actionSheet({title:'Plus is ready!',
			cancel:'取消',
			buttons:[{title:'1'},{title:'2'}]
		},
		function(e){
			console.log('User pressed: '+e.index);
			a=null;
		});
	setTimeout(function(){
		a&&a.close();
	}, 5000);
}
						

uni-app使用plus注意事项

WaitingObj

系统等待对话框对象

说明:

从NativeUIObj对象继承而来,通过plus.nativeUI.showWaiting方法创建时返回。 用于控制系统样式等待对话框的操作,如关闭、设置标题内容等。

方法:

事件:

setTitle

设置等待对话框上显示的文字内容


wobj.setTitle( title );
						

参数:

返回值:

void : 无

示例:


// 更新等待对话框上显示内容
function updateWaitingTitle(){
	// 弹出系统等待对话框
	var w = plus.nativeUI.showWaiting( "等待中..." );
	// 2秒后更新
	setTimeout(function(){
			w.setTitle( "正在更新" );
	}, 2000);
}
						

uni-app使用plus注意事项

close

关闭显示的系统等待对话框


wobj.close();
						

说明:

调用plus.nativeUI.showWaiting方法创建并显示系统等待界后,可通过其close方法将原生等待控件关闭。 一个系统等待对话框只能关闭一次,多次调用将无任何作用。

参数:

返回值:

void : 无

示例:


// 自动关闭等待框
function autoClosWaiting(){
	var w = plus.nativeUI.showWaiting( "等待中..." );
	// 2秒后关闭
	setTimeout(function(){
			w.close();
	}, 2000);
}
						

uni-app使用plus注意事项

onclose

等待对话框关闭事件


wobj.onclose = function() {
	console.log( "Waiting closed!" );
};
						

说明:

SuccessCallback 类型

等待框关闭时触发,当调用close方法或用户点击返回按钮导致等待框关闭时触发。

示例:


// 弹出系统等待对话框
function showWaiting(){
	var w = plus.nativeUI.showWaiting("等待中...");
	// 关闭事件
	w.onclose = function() {
		console.log("Waiting onclose!");
	}
}
						

uni-app使用plus注意事项

WaitingStyles

原生等待对话框的样式

属性:

WaitingLoadingStyles

JSON对象,原生等待对话框上loading图标自定义样式

属性:

ToastStyles

系统提示消息框的样式

属性:

示例:


// 显示自动消失的富文本提示消息
function showRichToast(){
	plus.nativeUI.toast("<font style=\"font-size:14px\">再按一次返回键退出<br/>点此可<a onclick=\"console.log('clicked')\">反馈意见</a></font>",
		{type:'richtext',
			duration:'long',
			richTextStyle:{
				align:'center'
			}
		});
}
				

uni-app使用plus注意事项

ActionSheetCallback

系统选择按钮框的回调函数


void onActioned( Event event ){
	// actionsheet handled code.
	var index=event.index; // 用户关闭时点击按钮的索引值
}
				

参数:

返回值:

void : 无

示例:


// 弹出系统选择按钮框
function showActionsheet(){
	var actionbuttons=[{title:"不同意",style:"destructive"},{title:"test1"},{title:"test2"},{title:"3"}];
	var actionstyle={title:"Plus is ready!",cancel:"取消",buttons:actionbuttons};
	plus.nativeUI.actionSheet( actionstyle, function(e){
		if(e.index>0){
			console.log( "User pressed: "+actionbuttons[e.index-1].title );
		}else{
			console.log( "User pressed 取消" );
		}
	} );
}
				

uni-app使用plus注意事项

AlertCallback

系统提示框确认的回调函数


void onAlerted( Event event ){
	// Alert handled code.
	var index=event.index; // 用户关闭提示对话框点击按钮的索引值
}
				

参数:

返回值:

void : 无

平台支持:

ConfirmCallback

关闭确认对话框的回调函数


void onConfirmed( Event event ) {
	// Confirm handled code.
	var index=event.index; // 用户关闭确认对话框点击按钮的索引值
}
				

参数:

返回值:

void : 无

平台支持:

PromptCallback

系统输入对话框关闭后的回调函数


function void onPrompted( Event event ) {
	// Prompt handled code.
	var index=event.index; // 用户关闭输入对话框点击按钮的索引值
	var value=event.value; // 用户输入的内容
}
				

参数:

返回值:

void : 无

平台支持:

PickDatetimeSuccessCallback

选择日期或时间操作成功的回调函数


function void onPickSuccess( Event event ) {
	// Date picked code.
	var date = event.date;// 用户选择的日期或时间
}
				

参数:

返回值:

void : 无

PickDatetimeErrorCallback

选择日期或时间操作取消或失败的回调函数


function void onPickError( Exception error ) {
	// Date picked error.
	var code = error.code; // 错误编码
	var message = error.message; // 错误描述信息
}
				

参数:

返回值:

void : 无

PreviewImageLongPressCallback

图片预览长按事件


function void onlongPress(event) {
	// longpress event
	var index = event.index; 			// 长按图片的索引
	var url = event.url;					// 长按图片的url地址
	var path = event.path;				// 长按图片的本地图片路径(系统绝对路径)
}
				

说明:

在图片预览界面长按时触发。

参数:

返回值:

void : 无

SuccessCallback

操作成功回调函数


void onSuccess(){
	// Success code.
}
				

说明:

操作成功后触发回调函数。

参数:

返回值:

void : 无