前言

本文主要介绍了接口的扩展应用：设备相关的接口包括获取系统信息、网络状态、拨打电话、扫码等；导航栏的动态设置；下拉刷新、上拉加载更多的实现，通过动作链获取节点信息；用条件编译实现小程序、APP等多端兼容；提示框、Loading、模态弹窗等的交互反馈。

一、设备相关

1.系统信息

uni.getSystemInfo(OBJECT)接口用来异步获取系统信息。 OBJECT常见参数和含义如下：

参数名	类型	是否必填	说明
success	Function	是	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success返回的常见参数和含义如下：

参数	说明
brand	手机品牌
model	手机型号
pixelRatio	设备像素比
screenWidth	屏幕宽度
screenHeight	屏幕高度
windowWidth	可使用窗口宽度
windowHeight	可使用窗口高度
windowTop	可使用窗口的顶部位置
windowBottom	可使用窗口的底部位置
version	引擎版本号

hello uniapp项目中，index.vue如下：

1<template>
2	<view>
3		<button type="primary" @click="getinfo">获取系统信息</button>
4	</view>
5</template>
6
7<script>
8	export default {
9		data() {
10			return {
11			}
12		},
13		onLoad() {
14		},
15		onShow() {
16			console.log('index onshow')
17		},
18		onHide() {
19			console.log('index onhide')
20		},
21		methods: {
22			getinfo: function(){
23				uni.getSystemInfo({
24					success:function(res){
25						console.log(res)
26					}
27				})
28			}
29		}
30	}
31</script>
32
33<style>
34
35</style>
36

显示： uniapp interface extension device get system info

可以获取到当前设备比较全面的信息；其中，pixelRatio是设备像素比，可以根据该值和实际设备计算选择合适的像素值。

除了使用uni.getSystemInfo(OBJECT)异步获取设备信息，还可以使用uni.getSystemInfoSync()同步获取系统信息； uni.canIUse(String)可用于判断应用的 API、回调、参数、组件等是否在当前版本可用。

2.网络状态

uni.getNetworkType(OBJECT)用来获取网络类型。 OBJECT常见参数如下：

参数名	类型	必填	说明
success	Function	是	接口调用成功，返回网络类型 networkType
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.onNetworkStatusChange(CALLBACK)用于监听网络状态变化。 CALLBACK返回参数及含义如下：

参数	类型	说明
isConnected	Boolean	当前是否有网络连接
networkType	String	网络类型

如下：

1<template>
2	<view>
3		<button type="primary" @click="getNetworkType">获取网络类型</button>
4	</view>
5</template>
6
7<script>
8	export default {
9		data() {
10			return {}
11		},
12		onLoad() {
13		},
14		onShow() {
15			console.log('index onshow')
16		},
17		onHide() {
18			console.log('index onhide')
19		},
20		methods: {
21			getNetworkType: function(){
22				uni.getNetworkType({
23					success:function(res){
24						console.log(res.networkType);
25					}
26				});
27				uni.onNetworkStatusChange(function(res){
28					console.log(res)
29				})
30			},
31		}
32	}
33</script>
34
35<style>
36
37</style>
38

显示： uniapp interface extension device get network type

可以看到，获取到了当前的网络类型。

3.加速度计

uni.onAccelerometerChange(CALLBACK)用于监听加速度数据，频率为5次/秒，接口调用后会自动开始监听，可使用uni.offAccelerometer取消监听。 CALLBACK 返回参数和含义如下：

参数	类型	说明
x	Number	X 轴
y	Number	Y 轴
z	Number	Z 轴

uni.startAccelerometer(OBJECT)用于开始监听加速度数据。 OBJECT参数和含义如下：

参数名	类型	默认	必填	说明
interval	String	normal	否	接口调用成功的回调
success	Function	无	否	接口调用成功的回调
fail	Function	无	否	接口调用失败的回调函数
complete	Function	无	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.stopAccelerometer(OBJECT)用于停止监听加速度数据。 OBJECT 参数和含义如下：

参数名	类型	必填	说明
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

4.拨打电话

uni.makePhoneCall(OBJECT)用于拨打电话。

OBJECT 参数如下：

参数名	类型	必填	说明
phoneNumber	String	是	需要拨打的电话号码
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

如下：

1<template>
2	<view>
3		<button type="primary" @click="tel">拨打电话</button>
4	</view>
5</template>
6
7<script>
8	export default {
9		data() {
10			return {}
11		},
12		onLoad() {
13		},
14		onShow() {
15			console.log('index onshow')
16		},
17		onHide() {
18			console.log('index onhide')
19		},
20		methods: {
21			tel: function(){
22				uni.makePhoneCall({
23					phoneNumber: '10086'
24				})
25			},
26		}
27	}
28</script>
29
30<style>
31
32</style>
33

显示： uniapp interface extension device make phone call

可以看到，模拟了拨打电话。

除了拨打电话，还可以实现发送短信等。

5.扫码

uni.scanCode(OBJECT)用于调起客户端扫码界面，并在扫码成功后返回对应的结果。

OBJECT 参数及其含义如下：

参数名	类型	必填	说明
onlyFromCamera	Boolean	否	是否只能从相机扫码，不允许从相册选择图片
scanType	Array	否	扫码类型，参数类型是数组，二维码是'qrCode'，一维码是'barCode'，DataMatrix是‘datamatrix’，pdf417是‘pdf417’
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数（识别失败、用户取消等情况下触发）
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

其中，success 返回参数如下：

参数	说明
result	所扫码的内容
scanType	所扫码的类型
charSet	所扫码的字符集
path	当所扫的码为当前应用的合法二维码时，会返回此字段，内容为二维码携带的 path

简单使用如下：

1<template>
2	<view>
3		<button type="primary" @click="sca">扫描二维码</button>
4	</view>
5</template>
6
7<script>
8	export default {
9		data() {
10			return {}
11		},
12		onLoad() {
13		},
14		onShow() {
15			console.log('index onshow')
16		},
17		onHide() {
18			console.log('index onhide')
19		},
20		methods: {
21			sca: function(){
22				uni.scanCode({
23					success:function(res){
24						console.log(res)
25					}
26				})
27			},
28		}
29	}
30</script>
31
32<style>
33
34</style>
35

6.剪贴板

uni.setClipboardData(OBJECT)用于设置系统剪贴板的内容。 OBJECT参数和含义如下：

参数名	类型	必填	说明
data	String	是	需要设置的内容
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.getClipboardData(OBJECT)用于获取系统剪贴板内容。 OBJECT 参数和含义如下：

参数名	类型	必填与否	说明
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

如下：

1<template>
2	<view>
3		<button type="primary" @click="sca">复制文字</button>
4		<text>{{txt}}</text>
5	</view>
6</template>
7
8<script>
9	var _self;
10	export default {
11		data() {
12			return {
13				txt: "hello"
14			}
15		},
16		onLoad() {
17			_self = this
18		},
19		onShow() {
20			console.log('index onshow')
21		},
22		onHide() {
23			console.log('index onhide')
24		},
25		methods: {
26			
27			sca: function(){
28				uni.setClipboardData({
29					data: 'https://blog.csdn.net/CUFEECR',
30					success:function(res){
31						console.log(res);
32						uni.getClipboardData({
33							success:function(gres){
34								console.log(gres.data)
35								_self.txt = gres.data
36							}
37						})
38					}
39				})
40			},
41		}
42	}
43</script>
44
45<style>
46
47</style>
48

显示： uniapp interface extension device get clipboard data

7.屏幕

uni.setScreenBrightness(OBJECT)用于设置屏幕亮度。 OBJECT 参数如下：

参数名	类型	必填与否	说明
value	Number	是	屏幕亮度值，范围 0~1，0 最暗，1 最亮
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.getScreenBrightness(OBJECT)用于获取屏幕亮度。 OBJECT 参数如下：

参数名	类型	必填与否	说明
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.setKeepScreenOn(OBJECT)用于设置是否保持常亮状态。仅在当前应用生效，离开应用后设置失效。 OBJECT 参数如下：

参数名	类型	必填与否	说明
keepScreenOn	Boolean	是	是否保持屏幕常亮
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

例如：

1<template>
2	<view>
3		<button type="primary" @click="srn">设置屏幕亮度</button>
4	</view>
5</template>
6
7<script>
8	var _self;
9	export default {
10		data() {
11			return {
12				txt: "hello"
13			}
14		},
15		onLoad() {
16			_self = this
17		},
18		onShow() {
19			console.log('index onshow')
20		},
21		onHide() {
22			console.log('index onhide')
23		},
24		methods: {			
25			srn: function(){
26				uni.setScreenBrightness({
27					value: 0.1,
28					success:function(){
29						console.log('set success')
30					}
31				})
32			},
33		}
34	}
35</script>
36
37<style>
38
39</style>
40
41

7.振动

uni.vibrate(OBJECT)用于使手机发生振动。

OBJECT 参数如下：

参数名	类型	必填与否	说明
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.vibrateLong(OBJECT)用于使手机发生较长时间的振动（400ms），uni.vibrateShort(OBJECT)用于使手机发生较短时间的振动（15ms），OBJECT参数与uni.vibrate(OBJECT)相同。

8.手机联系人

uni.addPhoneContact(OBJECT)调用后，用户可以选择将该表单以“新增联系人”或“添加到已有联系人”的方式，写入手机系统通讯录，完成手机通讯录联系人和联系方式的增加。

参数名	类型	必填与否	说明
photoFilePath	String	否	头像本地文件路径
lastName	String	否	姓氏
firstName	String	是	名字
mobilePhoneNumber	String	否	手机号
workPhoneNumber	String	否	工作电话
email	String	否	电子邮件
url	String	否	网站
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

二、导航设置

之前导航栏是通过配置实现的，但是不够灵活，这时可以使用接口实现导航栏。

uni.setNavigationBarTitle(OBJECT)用于动态设置当前页面的标题。 OBJECT参数如下：

参数名	类型	必填与否	说明
title	String	是	页面标题
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.setNavigationBarColor(OBJECT)用于设置页面导航条颜色。如果需要进入页面就设置颜色，请延迟执行，防止被框架内设置颜色逻辑覆盖。 OBJECT参数如下：

参数名	类型	必填与否	说明
frontColor	String	是	前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
backgroundColor	String	是	背景颜色值，有效值为十六进制颜色
animation	Object	否	动画效果，{duration,timingFunc}
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.showNavigationBarLoading(OBJECT)用于在当前页面显示导航条加载动画，uni.hideNavigationBarLoading(OBJECT)在当前页面隐藏导航条加载动画。它们的OBJECT参数如下：

参数名	类型	必填与否	说明
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例如下：

1<template>
2	<view>
3		<button type="primary" @click="setTitle">设置标题</button>
4	</view>
5</template>
6
7<script>
8	var _self;
9	export default {
10		data() {
11			return {
12				txt: "hello"
13			}
14		},
15		onLoad() {
16			uni.showNavigationBarLoading();
17		},
18		onShow() {
19			console.log('index onshow')
20		},
21		onHide() {
22			console.log('index onhide')
23		},
24		methods: {			
25			setTitle: function(){
26				uni.setNavigationBarTitle({
27					title: 'hello...'
28				});
29				uni.hideNavigationBarLoading();
30			},
31		}
32	}
33</script>
34
35<style>
36
37</style>
38

显示： uniapp interface extension tabbar settitle

可以看到，实现了设置标题和控制加载。

三、界面下拉、上拉和节点信息

1.下拉刷新

onPullDownRefresh是一个处理函数，和onLoad等生命周期函数同级，用于监听该页面用户下拉刷新事件。使用前，需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh；当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

uni.startPullDownRefresh(OBJECT)用于开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

参数名	类型	必填与否	说明
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.stopPullDownRefresh()用于停止当前页面下拉刷新。

如下：

1<template>
2	<view>
3		<view v-for="(item, index) in newslist" class="newslist">{{item}}</view>
4	</view>
5</template>
6
7<script>
8	var _self;
9	export default {
10		data() {
11			return {
12				newslist: []
13			}
14		},
15		onLoad() {
16			_self = this
17		},
18		onShow() {
19			console.log('index onshow')
20		},
21		onHide() {
22			console.log('index onhide')
23		},
24		onPullDownRefresh() {
25			this.getNews()
26		},
27		methods: {			
28			getNews: function() {
29				uni.showNavigationBarLoading();
30				uni.request({
31					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=1',
32					success:function(res){
33						console.log(res);
34						var newslist = res.data.split('--hcSplitor--');
35						_self.newslist = newslist;
36						uni.stopPullDownRefresh();
37						uni.hideNavigationBarLoading();
38					}
39				})
40			}
41		}
42	}
43</script>
44
45<style>
46	.newslist {
47		line-height: 2em;
48		padding: 20px;
49	}
50</style>
51

显示： uniapp interface extension pulldown refresh

可以看到，实现了下拉刷新加载数据。

2.案例--上拉加载更多

上拉加载更多有两种实现方式：

通过scroll-view组件，识别滚动区域，滚动到底部出发加载事件；
识别页面滚动到底部来触发加载事件。

这里使用第二种方式，即生命周期函数onReachBottom来实现，即滚动条滚动到底部时触发事件。

初步实现如下：

1<template>
2	<view>
3		<view v-for="(item, index) in newslist" class="newslist">{{item}}</view>
4	</view>
5</template>
6
7<script>
8	// 添加page全局变量
9	var _self, page;
10	export default {
11		data() {
12			return {
13				newslist: []
14			}
15		},
16		onLoad() {
17			_self = this
18		},
19		onShow() {
20			console.log('index onshow')
21		},
22		onHide() {
23			console.log('index onhide')
24		},
25		onPullDownRefresh() {
26			this.getNews()
27		},
28		onReachBottom() {
29			this.getMoreNews()
30		},
31		methods: {			
32			getNews: function() {
33				page = 1;
34				uni.showNavigationBarLoading();
35				uni.request({
36					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
37					success:function(res){
38						console.log(res);
39						var newslist = res.data.split('--hcSplitor--');
40						_self.newslist = _self.newslist.concat(newslist);
41						uni.stopPullDownRefresh();
42						uni.hideNavigationBarLoading();						
43						page++;
44					}
45				})
46			},
47			getMoreNews: function() {
48				uni.showNavigationBarLoading();
49				uni.request({
50					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
51					success:function(res){
52						console.log(res);
53						uni.hideNavigationBarLoading();
54						if(res.data == null){
55							return false
56						};
57						var newslist = res.data.split('--hcSplitor--');
58						_self.newslist = newslist;
59						uni.stopPullDownRefresh();
60						page++;
61					}
62				})
63			}
64		}
65	}
66</script>
67
68<style>
69	.newslist {
70		line-height: 2em;
71		padding: 20px;
72	}
73</style>
74

其中，添加全局变量page用于指定需要请求的数据的页数；定义函数分别实现第一次获取数据和加载更多数据。

显示： uniapp interface extension pullup load first

可以看到，加载了2页数据后，就不能再加载数据了。

此时还可以进行完善，如添加“加载更多”文本提示。如下：

1<template>
2	<view>
3		<view v-for="(item, index) in newslist" class="newslist">{{item}}</view>
4		<view class="loading">{{loadingText}}</view>
5	</view>
6</template>
7
8<script>
9	// 添加page、timer全局变量
10	var _self, page, timer = null;
11	export default {
12		data() {
13			return {
14				newslist: [],
15				loadingText: "下拉加载"
16			}
17		},
18		onLoad() {
19			_self = this
20		},
21		onShow() {
22			console.log('index onshow')
23		},
24		onHide() {
25			console.log('index onhide')
26		},
27		onPullDownRefresh() {
28			this.getNews()
29		},
30		onReachBottom() {			
31			if(timer != null){
32				clearTimeout(timer)
33			};
34			timer = setTimeout(function(){
35				_self.getMoreNews()
36			}, 500);
37		},
38		methods: {			
39			getNews: function() {
40				page = 1;
41				uni.showNavigationBarLoading();
42				uni.request({
43					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
44					success:function(res){
45						console.log(res);
46						var newslist = res.data.split('--hcSplitor--');
47						_self.newslist = _self.newslist.concat(newslist);
48						uni.stopPullDownRefresh();
49						uni.hideNavigationBarLoading();						
50						page++;
51					}
52				})
53			},
54			getMoreNews: function() {
55				if(_self.loadingText == "已加载完毕"){
56					return false
57				};
58				_self.loadingText = "加载中";
59				uni.showNavigationBarLoading();
60				uni.request({
61					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
62					success:function(res){
63						console.log(res);
64						uni.hideNavigationBarLoading();
65						if(res.data == null){
66							_self.loadingText = "已加载完毕";
67							return false
68						};
69						var newslist = res.data.split('--hcSplitor--');
70						_self.newslist = newslist;
71						uni.stopPullDownRefresh();
72						_self.loadingText = "加载更多";
73						page++;
74					}
75				})
76			}
77		}
78	}
79</script>
80
81<style>
82	.newslist {
83		line-height: 2em;
84		padding: 20px;
85	}
86	.loading {
87		line-height: 2em;
88		text-align: center;
89		color: #DD524D;
90		margin-top: 30px;
91	}
92</style>
93

使用延时器让页面先渲染完，再加载数据；同时在getMoreNews函数中，先判断是否加载完毕，如果已加载完毕则可以不再执行该函数。

显示： uniapp interface extension pullup load finish

显然，此时表现更好。

3.获取节点信息

uni.createSelectorQuery()创建一个 SelectorQuery 对象，这个对象可以调用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息； selectorQuery.select(selector)在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息； nodesRef.fields(object,callback)获取节点的相关信息，第一个参数是节点相关信息配置（必选），第二参数是方法的回调函数，参数是指定的相关节点信息； selectorQuery.exec(callback)执行所有的请求，请求结果按请求次序构成数组，在callback的第一个参数中返回。

其中，nodesRef.fields(object,callback)的object参数的常见属性和含义如下：

字段名	类型	默认值	必填	含义
id	Boolean	false	否	是否返回节点 id
dataset	Boolean	false	否	是否返回节点 dataset App、微信小程序、H5
rect	Boolean	false	否	是否返回节点布局位置（left right top bottom）
size	Boolean	false	否	是否返回节点尺寸（width height）
scrollOffset	Boolean	false	否	是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport

简单使用如下：

1<template>
2	<view class="">
3		<view class="" style="width: 500upx; height: 300upx; background: #F0AD4E;" id="demo">
4			Container
5		</view>
6	</view>
7</template>
8
9<script>
10	var _self;
11	export default {
12		data() {
13			return {
14
15			}
16		},
17		onLoad() {
18			_self = this;
19		},
20		onReady: function() {
21			console.log('Ready...');
22			uni.createSelectorQuery().select('#demo').fields({
23				size: true,
24				id: true,
25				rect: true,
26				scrollOffset: true
27			}, function(res) {
28				console.log(res)
29			}).exec()
30		},
31		onShow() {},
32		onHide() {},
33		methods: {},
34	}
35</script>
36
37<style>
38
39</style>
40

显示： uniapp nodeinfo selector

可以看到，获取到了指定元素的相关信息；返回的节点信息中包含了元素的大小，包括尺寸和布局位置等，可以根据这些数据结合uni.getSystemInfo(OBJECT)获取到的设备像素比给元素计算、设置合理的位置和大小。

四、跨端兼容

很多时候，每个平台有自己的一些特性，小程序和APP上实现是有一定区别的，可能不一定能兼容所有平台。此时需要使用条件编译，即用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台，即使用#ifdef、#ifndef和#endif来判断平台类型，其中：

符号	含义
#ifdef	if defined 仅在某平台存在
#ifndef	if not defined 除了某平台均存在
%PLATFORM%	平台名称

对于API、组件、样式等，有不同的注释方式，具体如下：

方式	适用平台
API和pages.json	`// #ifdef PLATFORM`和`// #endif`
组件	`<!-- #ifdef PLATFORM -->`和`<!-- #endif -->`
样式	`/* #ifdef PLATFORM /`和`/ #endif */`

测试如下：

1<template>
2	<view>
3		<!-- #ifdef MP-WEIXIN -->
4		<view class="wx">微信小程序</view>
5		<!-- #endif -->
6		<!-- #ifdef APP-PLUS -->
7		<view class="h5">H5+APP</view>
8		<!-- #endif -->
9	</view>
10</template>
11
12<script>
13	export default {
14		data() {
15			return {
16			}
17		},
18		onLoad() {
19			//#ifdef MP-WEIXIN
20			console.log('wx...')
21			//#endif
22			//#ifdef APP-PLUS
23			console.log('app...')
24			//#endif
25		},
26		onShow() {
27			console.log('index onshow')
28		},
29		onHide() {
30			console.log('index onhide')
31		},
32		methods: {			
33		}
34	}
35</script>
36
37<style>
38</style>
39

显示： uniapp interface extension crossend

显然，判断出了当前为微信小程序平台。

五、交互反馈

交互反馈包括提示框、加载等的设置。

1.showToast(OBJECT)和hideToast()

分别用于显示和隐藏消息提示框。 OBJECT参数和含义如下：

参数名	类型	必填与否	说明
title	String	是	提示的内容，长度与 icon 取值有关
icon	String	否	图标，有效值详见下方说明。
image	String	否	自定义图标的本地路径
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
position	String	否	纯文本轻提示显示位置，填写有效值后只有 title 属性生效，有效值详见下方说明。
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

2.showLoading(OBJECT)和hideLoading()

前者用于显示 loading 提示框，需主动调用后者才能关闭提示框。 OBJECT参数和含义如下：

参数名	类型	必填与否	说明
title	String	是	提示的内容
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

测试如下：

1<template>
2	<view>
3		<button type="default" @click="showToast">显示提示框</button>
4		<button type="default" @click="showLoading">显示并关闭Loading提示框</button>
5	</view>
6</template>
7
8<script>
9	export default {
10		data() {
11			return {
12			}
13		},
14		onLoad() {
15		},
16		onShow() {
17			console.log('index onshow')
18		},
19		onHide() {
20			console.log('index onhide')
21		},
22		methods: {
23			showToast: function(){
24				uni.showToast({
25					title: 'hello...',
26					icon: 'success'
27				})
28			},
29			showLoading: function(){
30				uni.showLoading({
31					title: 'loading...',
32					mask: true,
33					success:function(){
34						setTimeout(function(){
35							uni.hideLoading()
36						}, 3000)
37					}
38				})
39			}
40		}
41	}
42</script>
43
44<style>
45</style>
46

显示： uniapp interface extension interact toast loading

可以看到，可正常显示、关闭提示框和loading。

3.showModal(OBJECT)

用于显示模态弹窗，类似于标准 html 的消息框alert、confirm。 OBJECT参数和含义如下：

参数名	类型	必填与否	说明
title	String	否	提示的标题
content	String	否	提示的内容
showCancel	Boolean	否	是否显示取消按钮，默认为 true
cancelText	String	否	取消按钮的文字，默认为"取消"，最多 4 个字符
cancelColor	HexColor	否	取消按钮的文字颜色，默认为"#000000"
confirmText	String	否	确定按钮的文字，默认为"确定"，最多 4 个字符
confirmColor	HexColor	否	确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#3CC51F"，百度小程序平台默认为"#3c76ff"
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

4.showActionSheet(OBJECT)

用于显示操作菜单。 OBJECT参数和含义如下：

参数名	类型	必填与否	说明
itemList	Array<String>	是	按钮的文字数组
itemColor	HexColor	否	按钮的文字颜色，字符串格式，默认为"#000000"
success	Function	否	接口调用成功的回调函数，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

测试如下：

1<template>
2	<view>
3		<button type="default" @click="showModal">显示模态弹窗</button>
4		<button type="default" @click="showActionSheet">显示操作菜单</button>
5	</view>
6</template>
7
8<script>
9	var actions = ['Music', 'Reading'];
10	export default {
11		data() {
12			return {
13			}
14		},
15		onLoad() {
16		},
17		onShow() {
18			console.log('index onshow')
19		},
20		onHide() {
21			console.log('index onhide')
22		},
23		methods: {
24			showModal: function(){
25				uni.showModal({
26					title: 'hello...',
27					content: 'Modal Window',
28					success:function(res){
29						if(res.confirm){
30							console.log('Confirm')
31						}else if(res.cancel){
32							console.log('Cancel')
33						}
34					}
35				})
36			},
37			showActionSheet: function(){
38				uni.showActionSheet({
39					itemList: actions,
40					success:function(res){
41						console.log(actions[res.tapIndex])
42					},
43					fail:function(res){
44						console.log(res.errMsg)
45					}
46				})
47			}
48		}
49	}
50</script>
51
52<style>
53</style>
54

显示： uniapp interface extension interact model actionsheet

可以看到，可以对模态弹窗和操作菜单进行操作。

总结

uni-app的家口为开发者提供了丰富的功能，包括设备、界面等，我们只需要直接调用即可实现所需功能，减少了自己开发的麻烦，有利于快速开发。

本文原文首发来自博客专栏移动应用开发，由本人转发至https://www.helloworld.net/p/KP9ru5af3lHmw，其他平台均属侵权，可点击https://blog.csdn.net/CUFEECR/article/details/112067894查看原文，也可点击https://blog.csdn.net/CUFEECR浏览更多优质原创内容。

uni-app入门教程（6）接口的扩展应用

前言

一、设备相关

1.系统信息

2.网络状态

3.加速度计

4.拨打电话

5.扫码

6.剪贴板

7.屏幕

7.振动

8.手机联系人

二、导航设置

三、界面下拉、上拉和节点信息

1.下拉刷新

2.案例--上拉加载更多

3.获取节点信息

四、跨端兼容

五、交互反馈

1.showToast(OBJECT)和hideToast()

2.showLoading(OBJECT)和hideLoading()

3.showModal(OBJECT)

4.showActionSheet(OBJECT)

总结

评论区

相关推荐