主頁 > 移動端開發 > uni-app入門教程（6）介面的擴展應用

uni-app入門教程（6）介面的擴展應用

2021-01-02 11:40:28 移動端開發

文章目錄

  • 前言
  • 一、設備相關
    • 1.系統資訊
    • 2.網路狀態
    • 3.加速度計
    • 4.撥打電話
    • 5.掃碼
    • 6.剪貼板
    • 7.螢屏
    • 7.振動
    • 8.手機聯系人
  • 二、導航設定
  • 三、下拉和上拉
    • 1.下拉重繪
    • 2.案例--上拉加載更多
  • 四、跨端兼容
  • 五、互動反饋
    • 1.uni.showToast(OBJECT)和uni.hideToast()
    • 2.uni.showLoading(OBJECT)和uni.hideLoading()
    • 3.uni.showModal(OBJECT)
    • 4.uni.showActionSheet(OBJECT)
  • 總結

2021快樂

2021年的第一篇博客，愿自己2020年重在參與、2021年重在脫單，祝各位讀者如牛般舞出自己的錦繡前程、如牛般游出自己的甜美愛情、如牛般點燃自己的美麗心情，

前言

本文主要介紹了介面的擴展應用：設備相關的介面包括獲取系統資訊、網路狀態、撥打電話、掃碼等；導航欄的動態設定；下拉重繪和上拉加載更多的實作；用條件編譯實作小程式、APP等多端兼容；提示框、Loading、模態彈窗等的互動反饋，

一、設備相關

1.系統資訊

uni.getSystemInfo(OBJECT)介面用來異步獲取系統資訊，
OBJECT常見引數和含義如下：

引數名型別是否必填說明
successFunction是介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

success回傳的常見引數和含義如下：

引數說明
brand手機品牌
model手機型號
pixelRatio設備像素比
screenWidth螢屏寬度
screenHeight螢屏高度
windowWidth可使用視窗寬度
windowHeight可使用視窗高度
windowTop可使用視窗的頂部位置
windowBottom可使用視窗的底部位置
version引擎版本號

hello uniapp專案中，index.vue如下：

<template>
	<view>
		<button type="primary" @click="getinfo">獲取系統資訊</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {
			getinfo: function(){
				uni.getSystemInfo({
					success:function(res){
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style>

</style>

顯示：
uniapp interface extension device get system info

可以獲取到當前設備比較全面的資訊，

除了使用uni.getSystemInfo(OBJECT)異步獲取設備資訊，還可以使用uni.getSystemInfoSync()同步獲取系統資訊；
uni.canIUse(String)可用于判斷應用的 API、回呼、引數、組件等是否在當前版本可用，

2.網路狀態

uni.getNetworkType(OBJECT)用來獲取網路型別，
OBJECT常見引數如下：

引數名型別必填說明
successFunction是介面呼叫成功，回傳網路型別 networkType
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

uni.onNetworkStatusChange(CALLBACK)用于監聽網路狀態變化，
CALLBACK回傳引數及含義如下：

引數型別說明
isConnectedBoolean當前是否有網路連接
networkTypeString網路型別

如下：

<template>
	<view>
		<button type="primary" @click="getNetworkType">獲取網路型別</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {
			getNetworkType: function(){
				uni.getNetworkType({
					success:function(res){
						console.log(res.networkType);
					}
				});
				uni.onNetworkStatusChange(function(res){
					console.log(res)
				})
			},
		}
	}
</script>

<style>

</style>

顯示：
uniapp interface extension device get network type

可以看到，獲取到了當前的網路型別，

3.加速度計

uni.onAccelerometerChange(CALLBACK)用于監聽加速度資料，頻率為5次/秒，介面呼叫后會自動開始監聽，可使用uni.offAccelerometer取消監聽，
CALLBACK 回傳引數和含義如下：

引數型別說明
xNumberX 軸
yNumberY 軸
zNumberZ 軸

uni.startAccelerometer(OBJECT)用于開始監聽加速度資料，
OBJECT引數和含義如下：

引數名型別默認必填說明
intervalStringnormal否介面呼叫成功的回呼
successFunction無否介面呼叫成功的回呼
failFunction無否介面呼叫失敗的回呼函式
completeFunction無否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

uni.stopAccelerometer(OBJECT)用于停止監聽加速度資料，
OBJECT 引數和含義如下：

引數名型別必填說明
successFunction否介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

4.撥打電話

uni.makePhoneCall(OBJECT)用于撥打電話，

OBJECT 引數如下：

引數名型別必填說明
phoneNumberString是需要撥打的電話號碼
successFunction否介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

如下：

<template>
	<view>
		<button type="primary" @click="tel">撥打電話</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {
			tel: function(){
				uni.makePhoneCall({
					phoneNumber: '10086'
				})
			},
		}
	}
</script>

<style>

</style>

顯示：
uniapp interface extension device make phone call

可以看到，模擬了撥打電話，

除了撥打電話，還可以實作發送短信等，

5.掃碼

uni.scanCode(OBJECT)用于調起客戶端掃碼界面，并在掃碼成功后回傳對應的結果，

OBJECT 引數及其含義如下：

引數名型別必填說明
onlyFromCameraBoolean否是否只能從相機掃碼，不允許從相冊選擇圖片
scanTypeArray否掃碼型別，引數型別是陣列，二維碼是’qrCode’，一維碼是’barCode’，DataMatrix是‘datamatrix’，pdf417是‘pdf417’
successFunction否介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式（識別失敗、用戶取消等情況下觸發）
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

其中，success 回傳引數如下：

引數說明
result所掃碼的內容
scanType所掃碼的型別
charSet所掃碼的字符集
path當所掃的碼為當前應用的合法二維碼時，會回傳此欄位，內容為二維碼攜帶的 path

簡單使用如下：

<template>
	<view>
		<button type="primary" @click="sca">掃描二維碼</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {
			sca: function(){
				uni.scanCode({
					success:function(res){
						console.log(res)
					}
				})
			},
		}
	}
</script>

<style>

</style>

6.剪貼板

uni.setClipboardData(OBJECT)用于設定系統剪貼板的內容，
OBJECT引數和含義如下：

引數名型別必填說明
dataString是需要設定的內容
successFunction否介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

uni.getClipboardData(OBJECT)用于獲取系統剪貼板內容，
OBJECT 引數和含義如下：

引數名型別必填與否說明
successFunction否介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

如下：

<template>
	<view>
		<button type="primary" @click="sca">復制文字</button>
		<text>{{txt}}</text>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				txt: "hello"
			}
		},
		onLoad() {
			_self = this
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {
			
			sca: function(){
				uni.setClipboardData({
					data: 'https://blog.csdn.net/CUFEECR',
					success:function(res){
						console.log(res);
						uni.getClipboardData({
							success:function(gres){
								console.log(gres.data)
								_self.txt = gres.data
							}
						})
					}
				})
			},
		}
	}
</script>

<style>

</style>

顯示：
uniapp interface extension device get clipboard data

7.螢屏

uni.setScreenBrightness(OBJECT)用于設定螢屏亮度，
OBJECT 引數如下：

引數名型別必填與否說明
valueNumber是螢屏亮度值，范圍 0~1，0 最暗，1 最亮
successFunction否介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

uni.getScreenBrightness(OBJECT)用于獲取螢屏亮度，
OBJECT 引數如下：

引數名型別必填與否說明
successFunction否介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

uni.setKeepScreenOn(OBJECT)用于設定是否保持常亮狀態，僅在當前應用生效，離開應用后設定失效，
OBJECT 引數如下：

引數名型別必填與否說明
keepScreenOnBoolean是是否保持螢屏常亮
successFunction否介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

例如：

<template>
	<view>
		<button type="primary" @click="srn">設定螢屏亮度</button>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				txt: "hello"
			}
		},
		onLoad() {
			_self = this
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {			
			srn: function(){
				uni.setScreenBrightness({
					value: 0.1,
					success:function(){
						console.log('set success')
					}
				})
			},
		}
	}
</script>

<style>

</style>

7.振動

uni.vibrate(OBJECT)用于使手機發生振動，

OBJECT 引數如下：

引數名型別必填與否說明
successFunction否介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

uni.vibrateLong(OBJECT)用于使手機發生較長時間的振動（400ms），uni.vibrateShort(OBJECT)用于使手機發生較短時間的振動（15ms），OBJECT引數與uni.vibrate(OBJECT)相同，

8.手機聯系人

uni.addPhoneContact(OBJECT)呼叫后，用戶可以選擇將該表單以“新增聯系人”或“添加到已有聯系人”的方式，寫入手機系統通訊錄，完成手機通訊錄聯系人和聯系方式的增加，

引數名型別必填與否說明
photoFilePathString否頭像本地檔案路徑
lastNameString否姓氏
firstNameString是名字
mobilePhoneNumberString否手機號
workPhoneNumberString否作業電話
emailString否電子郵件
urlString否網站
successFunction否介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

二、導航設定

之前導航欄是通過配置實作的，但是不夠靈活，這時可以使用介面實作導航欄，

uni.setNavigationBarTitle(OBJECT)用于動態設定當前頁面的標題，
OBJECT引數如下：

引數名型別必填與否說明
titleString是頁面標題
successFunction否介面呼叫成功的回呼
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

uni.setNavigationBarColor(OBJECT)用于設定頁面導航條顏色，如果需要進入頁面就設定顏色，請延遲執行，防止被框架內設定顏色邏輯覆寫，
OBJECT引數如下：

引數名型別必填與否說明
frontColorString是前景顏色值，包括按鈕、標題、狀態欄的顏色，僅支持 #ffffff 和 #000000
backgroundColorString是背景顏色值，有效值為十六進制顏色
animationObject否影片效果，{duration,timingFunc}
successFunction否介面呼叫成功的回呼函式
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

uni.showNavigationBarLoading(OBJECT)用于在當前頁面顯示導航條加載影片，uni.hideNavigationBarLoading(OBJECT)在當前頁面隱藏導航條加載影片，
它們的OBJECT引數如下：

引數名型別必填與否說明
successFunction否介面呼叫成功的回呼函式
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

示例如下：

<template>
	<view>
		<button type="primary" @click="setTitle">設定標題</button>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				txt: "hello"
			}
		},
		onLoad() {
			uni.showNavigationBarLoading();
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {			
			setTitle: function(){
				uni.setNavigationBarTitle({
					title: 'hello...'
				});
				uni.hideNavigationBarLoading();
			},
		}
	}
</script>

<style>

</style>

顯示：
uniapp interface extension tabbar settitle

可以看到，實作了設定標題和控制加載，

三、下拉和上拉

1.下拉重繪

onPullDownRefresh是一個處理函式，和onLoad等生命周期函式同級，用于監聽該頁面用戶下拉重繪事件，
使用前，需要在 pages.json 里，找到的當前頁面的pages節點，并在 style 選項中開啟 enablePullDownRefresh；
當處理完資料重繪后，uni.stopPullDownRefresh 可以停止當前頁面的下拉重繪，

uni.startPullDownRefresh(OBJECT)用于開始下拉重繪，呼叫后觸發下拉重繪影片，效果與用戶手動下拉重繪一致，

引數名型別必填與否說明
successFunction否介面呼叫成功的回呼函式
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

uni.stopPullDownRefresh()用于停止當前頁面下拉重繪，

如下：

<template>
	<view>
		<view v-for="(item, index) in newslist" class="newslist">{{item}}</view>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				newslist: []
			}
		},
		onLoad() {
			_self = this
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		onPullDownRefresh() {
			this.getNews()
		},
		methods: {			
			getNews: function() {
				uni.showNavigationBarLoading();
				uni.request({
					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=1',
					success:function(res){
						console.log(res);
						var newslist = res.data.split('--hcSplitor--');
						_self.newslist = newslist;
						uni.stopPullDownRefresh();
						uni.hideNavigationBarLoading();
					}
				})
			}
		}
	}
</script>

<style>
	.newslist {
		line-height: 2em;
		padding: 20px;
	}
</style>

顯示：
uniapp interface extension pulldown refresh

可以看到，實作了下拉重繪加載資料，

2.案例–上拉加載更多

上拉加載更多有兩種實作方式：

  • 通過scroll-view組件，識別滾動區域，滾動到底部出發加載事件；
  • 識別頁面滾動到底部來觸發加載事件，

這里使用第二種方式，即生命周期函式onReachBottom來實作，即滾動條滾動到底部時觸發事件，

初步實作如下：

<template>
	<view>
		<view v-for="(item, index) in newslist" class="newslist">{{item}}</view>
	</view>
</template>

<script>
	// 添加page全域變數
	var _self, page;
	export default {
		data() {
			return {
				newslist: []
			}
		},
		onLoad() {
			_self = this
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		onPullDownRefresh() {
			this.getNews()
		},
		onReachBottom() {
			this.getMoreNews()
		},
		methods: {			
			getNews: function() {
				page = 1;
				uni.showNavigationBarLoading();
				uni.request({
					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
					success:function(res){
						console.log(res);
						var newslist = res.data.split('--hcSplitor--');
						_self.newslist = _self.newslist.concat(newslist);
						uni.stopPullDownRefresh();
						uni.hideNavigationBarLoading();						
						page++;
					}
				})
			},
			getMoreNews: function() {
				uni.showNavigationBarLoading();
				uni.request({
					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
					success:function(res){
						console.log(res);
						uni.hideNavigationBarLoading();
						if(res.data == null){
							return false
						};
						var newslist = res.data.split('--hcSplitor--');
						_self.newslist = newslist;
						uni.stopPullDownRefresh();
						page++;
					}
				})
			}
		}
	}
</script>

<style>
	.newslist {
		line-height: 2em;
		padding: 20px;
	}
</style>

其中，添加全域變數page用于指定需要請求的資料的頁數；
定義函式分別實作第一次獲取資料和加載更多資料，

顯示：
uniapp interface extension pullup load first

可以看到，加載了2頁資料后，就不能再加載資料了，

此時還可以進行完善，如添加“加載更多”文本提示，
如下：

<template>
	<view>
		<view v-for="(item, index) in newslist" class="newslist">{{item}}</view>
		<view class="loading">{{loadingText}}</view>
	</view>
</template>

<script>
	// 添加page、timer全域變數
	var _self, page, timer = null;
	export default {
		data() {
			return {
				newslist: [],
				loadingText: "下拉加載"
			}
		},
		onLoad() {
			_self = this
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		onPullDownRefresh() {
			this.getNews()
		},
		onReachBottom() {			
			if(timer != null){
				clearTimeout(timer)
			};
			timer = setTimeout(function(){
				_self.getMoreNews()
			}, 500);
		},
		methods: {			
			getNews: function() {
				page = 1;
				uni.showNavigationBarLoading();
				uni.request({
					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
					success:function(res){
						console.log(res);
						var newslist = res.data.split('--hcSplitor--');
						_self.newslist = _self.newslist.concat(newslist);
						uni.stopPullDownRefresh();
						uni.hideNavigationBarLoading();						
						page++;
					}
				})
			},
			getMoreNews: function() {
				if(_self.loadingText == "已加載完畢"){
					return false
				};
				_self.loadingText = "加載中";
				uni.showNavigationBarLoading();
				uni.request({
					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
					success:function(res){
						console.log(res);
						uni.hideNavigationBarLoading();
						if(res.data == null){
							_self.loadingText = "已加載完畢";
							return false
						};
						var newslist = res.data.split('--hcSplitor--');
						_self.newslist = newslist;
						uni.stopPullDownRefresh();
						_self.loadingText = "加載更多";
						page++;
					}
				})
			}
		}
	}
</script>

<style>
	.newslist {
		line-height: 2em;
		padding: 20px;
	}
	.loading {
		line-height: 2em;
		text-align: center;
		color: #DD524D;
		margin-top: 30px;
	}
</style>

使用延時器讓頁面先渲染完，再加載資料；
同時在getMoreNews函式中，先判斷是否加載完畢，如果已加載完畢則可以不再執行該函式，

顯示：
uniapp interface extension pullup load finish

顯然，此時表現更好，

四、跨端兼容

很多時候，每個平臺有自己的一些特性，小程式和APP上實作是有一定區別的，可能不一定能兼容所有平臺，
此時需要使用條件編譯，即用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平臺，即使用#ifdef、#ifndef和#endif來判斷平臺型別，其中：

符號含義
#ifdefif defined 僅在某平臺存在
#ifndefif not defined 除了某平臺均存在
%PLATFORM%平臺名稱

對于API、組件、樣式等，有不同的注釋方式，具體如下：

方式適用平臺
API和pages.json// #ifdef PLATFORM和// #endif
組件<!-- #ifdef PLATFORM -->和<!-- #endif -->
樣式/* #ifdef PLATFORM */和/* #endif */

測驗如下：

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="wx">微信小程式</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="h5">H5+APP</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			console.log('wx...')
			//#endif
			//#ifdef APP-PLUS
			console.log('app...')
			//#endif
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {			
		}
	}
</script>

<style>
</style>

顯示：
uniapp interface extension crossend

顯然，判斷出了當前為微信小程式平臺，

五、互動反饋

互動反饋包括提示框、加載等的設定，

1.uni.showToast(OBJECT)和uni.hideToast()

分別用于顯示和隱藏訊息提示框，
OBJECT引數和含義如下：

引數名型別必填與否說明
titleString是提示的內容，長度與 icon 取值有關
iconString否圖示，有效值詳見下方說明，
imageString否自定義圖示的本地路徑
maskBoolean否是否顯示透明蒙層，防止觸摸穿透，默認：false
durationNumber否提示的延遲時間，單位毫秒，默認：1500
positionString否純文本輕提示顯示位置，填寫有效值后只有 title 屬性生效， 有效值詳見下方說明，
successFunction否介面呼叫成功的回呼函式
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

2.uni.showLoading(OBJECT)和uni.hideLoading()

前者用于顯示 loading 提示框，需主動呼叫后者才能關閉提示框，
OBJECT引數和含義如下：

引數名型別必填與否說明
titleString是提示的內容
maskBoolean否是否顯示透明蒙層，防止觸摸穿透，默認：false
successFunction否介面呼叫成功的回呼函式
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

測驗如下：

<template>
	<view>
		<button type="default" @click="showToast">顯示提示框</button>
		<button type="default" @click="showLoading">顯示并關閉Loading提示框</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {
			showToast: function(){
				uni.showToast({
					title: 'hello...',
					icon: 'success'
				})
			},
			showLoading: function(){
				uni.showLoading({
					title: 'loading...',
					mask: true,
					success:function(){
						setTimeout(function(){
							uni.hideLoading()
						}, 3000)
					}
				})
			}
		}
	}
</script>

<style>
</style>

顯示：
uniapp interface extension interact toast loading

可以看到，可正常顯示、關閉提示框和loading，

3.uni.showModal(OBJECT)

用于顯示模態彈窗，類似于標準 html 的訊息框alert、confirm，
OBJECT引數和含義如下：

引數名型別必填與否說明
titleString否提示的標題
contentString否提示的內容
showCancelBoolean否是否顯示取消按鈕，默認為 true
cancelTextString否取消按鈕的文字，默認為"取消"，最多 4 個字符
cancelColorHexColor否取消按鈕的文字顏色，默認為"#000000"
confirmTextString否確定按鈕的文字，默認為"確定"，最多 4 個字符
confirmColorHexColor否確定按鈕的文字顏色，H5平臺默認為"#007aff"，微信小程式平臺默認為"#3CC51F"，百度小程式平臺默認為"#3c76ff"
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

4.uni.showActionSheet(OBJECT)

?用于顯示操作選單，
OBJECT引數和含義如下：

引數名型別必填與否說明
itemListArray是按鈕的文字陣列
itemColorHexColor否按鈕的文字顏色，字串格式，默認為"#000000"
successFunction否介面呼叫成功的回呼函式，詳見回傳引數說明
failFunction否介面呼叫失敗的回呼函式
completeFunction否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

測驗如下：

<template>
	<view>
		<button type="default" @click="showModal">顯示模態彈窗</button>
		<button type="default" @click="showActionSheet">?顯示操作選單</button>
	</view>
</template>

<script>
	var actions = ['Music', 'Reading'];
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {
			showModal: function(){
				uni.showModal({
					title: 'hello...',
					content: 'Modal Window',
					success:function(res){
						if(res.confirm){
							console.log('Confirm')
						}else if(res.cancel){
							console.log('Cancel')
						}
					}
				})
			},
			showActionSheet: function(){
				uni.showActionSheet({
					itemList: actions,
					success:function(res){
						console.log(actions[res.tapIndex])
					},
					fail:function(res){
						console.log(res.errMsg)
					}
				})
			}
		}
	}
</script>

<style>
</style>

顯示：
uniapp interface extension interact model actionsheet

可以看到，可以對模態彈窗和操作選單進行操作，

總結

uni-app的家口為開發者提供了豐富的功能，包括設備、界面等，我們只需要直接呼叫即可實作所需功能，減少了自己開發的麻煩，有利于快速開發，

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/243610.html

標籤：其他

上一篇：（兩百八十七）Android 更新R aosp原始碼

下一篇：解決：/system/bin/sh: ./hello: No such file or directory

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 【從零開始擼一個App】Dagger2

    Dagger2是一個IOC框架，一般用于Android平臺，第一次接觸的朋友，一定會被搞得暈頭轉向。它延續了Java平臺Spring框架代碼碎片化，注解滿天飛的傳統。嘗試將各處代碼片段串聯起來，理清思緒，真不是件容易的事。更不用說還有各版本細微的差別。 與Spring不同的是，Spring是通過反射 ......

    uj5u.com 2020-09-10 06:57:59 more
  • Flutter Weekly Issue 66

    新聞 Flutter 季度調研結果分享 教程 Flutter+FaaS一體化任務編排的思考與設計 詳解Dart中如何通過注解生成代碼 GitHub 用對了嗎？Flutter 團隊分享如何管理大型開源專案 插件 flutter-bubble-tab-indicator A Flutter librar ......

    uj5u.com 2020-09-10 06:58:52 more
  • Proguard 常用規則

    介紹 Proguard 入口，如何查看輸出，如何使用 keep 設定入口以及使用實體，如何配置壓縮，混淆，校驗等規則。

    ......

    uj5u.com 2020-09-10 06:59:00 more
  • Android 開發技術周報 Issue#292

    新聞 Android即將獲得類AirDrop功能：可向附近設備快速分享檔案 谷歌為安卓檔案管理應用引入可安全隱藏資料的Safe Folder功能 Android TV新主界面將顯示電影、電視節目和應用推薦內容 泄露的Android檔案暗示了傳說中的谷歌Pixel 5a與折疊屏新機 谷歌發布Andro ......

    uj5u.com 2020-09-10 07:00:37 more
  • AutoFitTextureView Error inflating class

    報錯： Binary XML file line #0: Binary XML file line #0: Error inflating class xxx.AutoFitTextureView 解決： <com.example.testy2.AutoFitTextureView android: ......

    uj5u.com 2020-09-10 07:00:41 more
  • 根據Uri，Cursor沒有獲取到對應的屬性

    Android： 背景：呼叫攝像頭，拍攝視頻，指定保存的地址，但是回傳的Cursor檔案，只有名稱和大小的屬性，沒有其他諸如時長，連ID屬性都沒有 使用 cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DURATIO ......

    uj5u.com 2020-09-10 07:00:44 more
  • Android連載29-持久化技術

    一、持久化技術 我們平時所使用的APP產生的資料，在記憶體中都是瞬時的，會隨著斷電、關機等丟失資料，因此android系統采用了持久化技術，用于存盤這些“瞬時”資料 持久化技術包括：檔案存盤、SharedPreference存盤以及資料庫存盤，還有更復雜的SD卡記憶體儲。 二、檔案存盤 最基本存盤方式， ......

    uj5u.com 2020-09-10 07:00:47 more
  • Android Camera2Video整合到自己專案里

    背景： Android專案里呼叫攝像頭拍攝視頻，原本使用的 MediaStore.ACTION_VIDEO_CAPTURE， 后來因專案需要，改成了camera2 1.Camera2Video 官方demo有點問題，下載后，不能直接整合到專案 問題1.多次拍攝視頻崩潰 問題2.雙擊record按鈕， ......

    uj5u.com 2020-09-10 07:00:50 more
  • Android 開發技術周報 Issue#293

    新聞 谷歌為Android TV開發者提供多種新功能 Android 11將自動填表功能整合到鍵盤輸入建議中 谷歌宣布Android Auto即將支持更多的導航和數字停車應用 谷歌Pixel 5只有XL版本 搭載驍龍765G且將比Pixel 4更便宜 [圖]Wear OS將迎來重磅更新：應用啟動時間 ......

    uj5u.com 2020-09-10 07:01:38 more
  • 海豚星空掃碼投屏 Android 接收端 SDK 集成 六步驟

    掃碼投屏，開放網路，獨占設備，不需要額外下載軟體，微信掃碼，發現設備。支持標準DLNA協議，支持倍速播放。視頻，音頻，圖片投屏。好點意思。還支持自定義基于 DLNA 擴展的操作動作。好像要收費，沒體驗。 這里簡單記錄一下集成程序。 一 跟目錄的build.gradle添加私有mevan倉庫 mave ......

    uj5u.com 2020-09-10 07:01:43 more
最新发布
  • 歡迎頁輪播影片

    如圖，引導開始，球從上落下，同時淡入文字，然后文字開始輪播，最后一頁時停止，點擊進入首頁。 在來看看效果圖。 重力球先不講，主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView，用于影片展示 文本是類似的，最后會有個圖片箭頭影片，布局很簡單，就是一個 TextVi ......

    uj5u.com 2023-04-20 08:40:31 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一． 問題描述 使用華為推送服務下發IM訊息時，下發訊息請求成功且code碼為80000000，但是手機總是收不到訊息； 在華為推送自助分析（Beta）平臺查看發現，訊息發送觸發了頻控。 二． 問題原因及背景 2023年1月05日起，華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理，具體 ......

    uj5u.com 2023-04-20 08:40:11 more
  • 歡迎頁輪播影片

    如圖，引導開始，球從上落下，同時淡入文字，然后文字開始輪播，最后一頁時停止，點擊進入首頁。 在來看看效果圖。 重力球先不講，主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView，用于影片展示 文本是類似的，最后會有個圖片箭頭影片，布局很簡單，就是一個 TextVi ......

    uj5u.com 2023-04-20 08:39:36 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一． 問題描述 使用華為推送服務下發IM訊息時，下發訊息請求成功且code碼為80000000，但是手機總是收不到訊息； 在華為推送自助分析（Beta）平臺查看發現，訊息發送觸發了頻控。 二． 問題原因及背景 2023年1月05日起，華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理，具體 ......

    uj5u.com 2023-04-20 08:39:13 more
  • iOS從UI記憶體地址到讀取成員變數（oc/swift）

    開發除錯時，我們發現bug時常首先是從UI顯示發現例外，下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具，但是很多人可能還沒有形成一套穩定的除錯流程，因此本文嘗試解決這個問題，順便提出一個暴論：UI顯示例外問題只需要兩個步驟就能完成定位作業的80%： 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:16:23 more
  • FIDE重磅更新！性能飛躍！體驗有禮！

    FIDE 開發者工具重構升級啦！實作500%性能提升，誠邀體驗！ 一直以來不少開發者朋友在社區反饋，在使用 FIDE 工具的程序中，時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況，十分影響開發體驗。 作為技術團隊，我們深知一件趁手的開發工具對開發者的重要性，因此，在2023年開年，FinC ......

    uj5u.com 2023-04-19 09:16:15 more
  • 游戲內嵌社區服務開放，助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力，支持玩家直接在游戲內瀏覽帖子和交流互動，助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區？ 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口，為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:15:46 more
  • iOS從UI記憶體地址到讀取成員變數（oc/swift）

    開發除錯時，我們發現bug時常首先是從UI顯示發現例外，下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具，但是很多人可能還沒有形成一套穩定的除錯流程，因此本文嘗試解決這個問題，順便提出一個暴論：UI顯示例外問題只需要兩個步驟就能完成定位作業的80%： 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:14:53 more
  • FIDE重磅更新！性能飛躍！體驗有禮！

    FIDE 開發者工具重構升級啦！實作500%性能提升，誠邀體驗！ 一直以來不少開發者朋友在社區反饋，在使用 FIDE 工具的程序中，時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況，十分影響開發體驗。 作為技術團隊，我們深知一件趁手的開發工具對開發者的重要性，因此，在2023年開年，FinC ......

    uj5u.com 2023-04-19 09:14:08 more
  • 游戲內嵌社區服務開放，助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力，支持玩家直接在游戲內瀏覽帖子和交流互動，助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區？ 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口，為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:08:34 more

Copyright © 2010-2020 有解無憂