uni-app移動應(yīng)用開發(fā)課件 6-常用API-2

移動應(yīng)用

開發(fā)UniApp常用API-2第

六

章本章導(dǎo)讀

本章主要講解uni-app的常用API接口，包括音頻、視頻、錄音管理、相機管理、文件操作、設(shè)備操作、第三方服務(wù)等。最后通過一個“仿網(wǎng)易云”音樂播放器項目，來綜合應(yīng)用本章各API。學(xué)習(xí)目標(biāo)

知識目標(biāo)

掌握各個API接口的使用開發(fā)并完善音樂播放器項目掌握自定義組件的方法

能力目標(biāo)

具備熟練應(yīng)用各種API的能力具備使用開發(fā)自定義組件的能力具備項目測試能力

素質(zhì)目標(biāo)有團(tuán)隊協(xié)作精神具有良好的軟件編碼規(guī)范素養(yǎng)具有獨立思考、分析問題、解決問題的能力提升音樂素養(yǎng)，樹立正確的審美觀、人生觀和價值觀媒體控制第

一

節(jié)audio音頻組件及API實現(xiàn)音頻播放功能1video視頻組件及視頻API實現(xiàn)視頻播放功能2camera相機組件及相機API實現(xiàn)相機拍照功能3liver-player組件實現(xiàn)實時音視頻播放功能4live-pusher組件實現(xiàn)實時音視頻錄制功能5目錄CONTENTS6.1.1音頻組件控制1.uni.createInnerAudioContext()創(chuàng)建并返回InnerAudioContext對象。屬性類型說明只讀平臺差異說明srcString音頻的數(shù)據(jù)鏈接，用于直接播放。否微信小程序不支持本地路徑startTimeNumber開始播放的位置（單位：s），默認(rèn)0否

autoplayBoolean是否自動開始播放，默認(rèn)false否

loopBoolean是否循環(huán)播放，默認(rèn)false否

obeyMuteSwitchBoolean是否遵循系統(tǒng)靜音開關(guān)，當(dāng)此參數(shù)為false時，即使用戶打開了靜音開關(guān)，也能繼續(xù)發(fā)出聲音，默認(rèn)值true否微信、百度、字節(jié)跳動、飛書、京東、快手（僅IOS）小程序durationNumber當(dāng)前音頻的長度（單位：s），src合法時返回，在onCanplay中獲取是

currentTimeNumber當(dāng)前音頻的播放位置（單位：s、小數(shù)），src合法時返回，保留小數(shù)點后6位是

pausedBoolean當(dāng)前是是否暫?；蛲Ｖ?fàn)顟B(tài)，true表示暫?；蛲Ｖ?，false表示正在播放是

bufferedNumber音頻緩沖的時間點，僅保證當(dāng)前播放時間點到此時間點內(nèi)容已緩沖。是

volumeNumber音量。范圍0~1。否

InnerAudioContext對象屬性InnerAudioContext對象的方法方法參數(shù)說明play

播放（H5端部分瀏覽器需在用戶交互時進(jìn)行）pause

暫停stop

停止seekposition跳轉(zhuǎn)到指定位置，單位sdestroy

銷毀當(dāng)前實例onCanplay、offCanplaycallback音頻進(jìn)入可以播放狀態(tài)，但不保證后面可以流暢播放；offCanplay：取消監(jiān)聽onCanplay事件onPlay、offPlaycallback音頻播放事件；offPlay：取消監(jiān)聽onPlay事件onPause、offPausecallback音頻暫停事件；offPause：取消監(jiān)聽onPause事件onStop offStopcallback音頻停止事件；offStop取消監(jiān)聽onStop事件onEnded、offEndedcallback音頻自然播放結(jié)束事件；offEnded取消監(jiān)聽onEnded事件onTimeUpdate、offTimeUpdatecallback音頻播放進(jìn)度更新事件；offTimeUpdate取消監(jiān)聽onTimeUpdate事件6.1.1音頻組件控制演示音頻api6.1.1音頻組件控制2.uni.getBackgroundAudioManager()獲取全局唯一的背景音頻管理器BackgroundAudioManager對象實例。背景音頻，是類似QQ音樂那樣，App在后臺時，仍然在播放音樂。6.1.1音頻組件控制閱讀類型說明只讀durationNumber當(dāng)前音頻的長度（單位：s），只有在當(dāng)前有合法的src時返回是currentTimeNumber當(dāng)前音頻的播放位置（單位：s），只有在當(dāng)前有合法的src時返回是pausedBoolean當(dāng)前是是否暫停或停止?fàn)顟B(tài)，true表示暫停或停止，false表示正在播放是srcString音頻的數(shù)據(jù)源，默認(rèn)為空字符串，**當(dāng)設(shè)置了新的src時，會自動開始播放，**目前支持的格式有m4a,aac,mp3,wav否startTimeNumber音頻開始播放的位置（單位：s）否bufferedNumber音頻緩沖的時間點，僅保證當(dāng)前播放時間點到此時間點內(nèi)容已緩沖。是titleString音頻標(biāo)題，用于做原生音頻播放器音頻標(biāo)題。原生音頻播放器中的分享功能，分享出去的卡片標(biāo)題，也將使用該值。否epnameString專輯名，原生音頻播放器中的分享功能，分享出去的卡片簡介，也將使用該值。否singerString歌手名，原生音頻播放器中的分享功能，分享出去的卡片簡介，也將使用該值。否coverImgUrlString封面圖url，用于做原生音頻播放器背景圖。原生音頻播放器中的分享功能，分享出去的卡片配圖及背景也將使用該圖。否webUrlString頁面鏈接，原生音頻播放器中的分享功能，分享出去的卡片簡介，也將使用該值。否protocolString音頻協(xié)議。默認(rèn)值為'http'，設(shè)置'hls'可以支持播放HLS協(xié)議的直播音頻，App平臺暫不支持否playbackRateNumber播放的倍率?？扇≈担?.5/0.8/1.0/1.25/1.5/2.0，默認(rèn)值為1.0。(App3.4.5+、微信基礎(chǔ)庫2.11.0+、支付寶小程序、字節(jié)小程序2.33.0+、快手小程序、百度小程序3.120.2+)否BackgroundAudioManager對象的屬性6.1.1音頻組件控制示例代碼：constbgAudioManager=uni.getBackgroundAudioManager();bgAudioManager.title='致愛麗絲';bgAudioManager.singer='暫無';bgAudioManager.coverImgUrl='/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png';bgAudioManager.src='/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';6.1.1音頻組件控制6.1.2錄音管理錄音通常用于開發(fā)聊天系統(tǒng)時的發(fā)送語音或者錄音直接轉(zhuǎn)文字。uni.getRecorderManager()可以獲得全局唯一的錄音管理器recorderManager。6.1.2錄音管理方法參數(shù)說明平臺差異說明startoptions開始錄音

pause

暫停錄音App暫不支持resume

繼續(xù)錄音App暫不支持stop

停止錄音

onStartcallback錄音開始事件

onPausecallback錄音暫停事件

onStopcallback錄音停止事件，會回調(diào)文件地址

onResumecallback監(jiān)聽錄音繼續(xù)事件

onInterruptionBegincallback監(jiān)聽錄音因為受到系統(tǒng)占用而被中斷開始事件。微信小程序、百度小程序、QQ小程序onInterruptionEndcallback監(jiān)聽錄音中斷結(jié)束事件。收到此事件之后暫停的小程序內(nèi)的錄音才可再次錄音成功。微信小程序、百度小程序、QQ小程序onFrameRecordedcallback已錄制完指定幀大小的文件，會回調(diào)錄音分片結(jié)果數(shù)據(jù)。如果設(shè)置了frameSize，則會回調(diào)此事件App暫不支持onErrorcallback錄音錯誤事件,會回調(diào)錯誤信息recorderManager對象的方法uni.getRecorderManager(OBJECT)參數(shù)說明屬性類型必填說明支持平臺durationNumber否指定錄音的時長，單位ms，如果傳入了合法的duration，到達(dá)指定的duration后自動停止錄音，最大值600000（10分鐘）,默認(rèn)值60000（1分鐘）

sampleRateNumber否采樣率，有效值8000/16000/44100

numberOfChannelsNumber否錄音通道數(shù)，有效值1/2小程序encodeBitRateNumber否編碼碼率，碼率具體有效值參加官網(wǎng)小程序formatString否音頻格式，有效值aac/mp3/wav/PCM。App默認(rèn)值為mp3，小程序默認(rèn)值aacApp、小程序6.1.2錄音管理演示錄音6.1.2錄音管理6.1.3圖片uni.chooseImage選擇圖片從本地相冊選擇圖片或使用相機拍照來選擇圖片1uni.previewImage(OBJECT)預(yù)覽圖片API可以用來預(yù)覽多張圖片，并設(shè)置默認(rèn)顯示的圖片2uni.getImageInfo用來獲得圖片信息3uni.saveImageToPhotosAlbum保存圖片到相冊4pressImage壓縮圖片56.1.3圖片uni.chooseImage的參數(shù)說明參數(shù)名類型必填說明平臺差異說明countNumber否最多可以選擇的圖片張數(shù)，默認(rèn)9見下方說明sizeTypeArray<String>否original原圖，compressed壓縮圖，默認(rèn)二者都有App、微信小程序、支付寶小程序、百度小程序extensionArray<String>否根據(jù)文件拓展名過濾，每一項都不能是空字符串。默認(rèn)不過濾。H5(HBuilderX2.9.9+)sourceTypeArray<String>否album從相冊選圖，camera使用相機，默認(rèn)二者都有。如需直接開相機或直接選相冊，請只使用一個選項

cropObject否圖像裁剪參數(shù)，設(shè)置后sizeType失效App3.1.19+successFunction是成功則返回圖片的本地文件路徑列表tempFilePaths

failFunction否接口調(diào)用失敗的回調(diào)函數(shù)小程序、AppcompleteFunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）6.1.3圖片參數(shù)名類型必填說明qualityNumber否取值范圍為1-100，數(shù)值越小，質(zhì)量越低（僅對jpg格式有效）。默認(rèn)值為80。widthNumber是裁剪的寬度，單位為px，用于計算裁剪寬高比。heightNumber是裁剪的高度，單位為px，用于計算裁剪寬高比。resizeBoolean否是否將width和height作為裁剪保存圖片真實的像素值。默認(rèn)值為true。注：設(shè)置為false時在裁剪編輯界面顯示圖片的像素值，設(shè)置為true時不顯示crop的取值表6.1.3圖片參數(shù)類型說明pathString本地文件路徑sizeNumber本地文件大小，單位：BnameString包含擴(kuò)展名的文件名稱，僅H5支持typeString文件類型，僅H5支持

File對象結(jié)構(gòu)Success返回參數(shù)說明1.tempFilePaths：圖片的本地文件路徑列表，類型為字符串?dāng)?shù)組Array<String>。2.tempFiles：圖片的本地文件列表，每一項是一個File對象。類型為Array<File>。File對象結(jié)構(gòu)如表所示。6.1.3圖片示例代碼uni.chooseImage({ count:6,//默認(rèn)9 sizeType:['original','compressed'],//可以指定是原圖還是壓縮圖，默認(rèn)二者都有

sourceType:['album'],//從相冊選擇

success:function(res){ console.log(JSON.stringify(res.tempFilePaths)); }});6.1.3圖片uni.previewImage(OBJECT)預(yù)覽圖片API可以用來預(yù)覽多張圖片，并設(shè)置默認(rèn)顯示的圖片。屬性類型必填說明平臺差異currentstring否當(dāng)前顯示圖片的鏈接，不填則默認(rèn)為urls的第一張，注意：app平臺1.95-1.98必填

urlsstringArray是需要預(yù)覽的圖片鏈接列表

indicatorString否圖片指示器樣式，可取值："default"-底部圓點指示器；"number"-頂部數(shù)字指示器；"none"-不顯示指示器。ApploopBoolean否是否可循環(huán)預(yù)覽，默認(rèn)值為falseApplongPressActionsObject否長按圖片顯示操作菜單，如不填默認(rèn)為保存相冊App1.9.5+successFunction否接口調(diào)用成功的回調(diào)函數(shù)

failFunction否接口調(diào)用失敗的回調(diào)函數(shù)

completeFunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）uni.priviewImage的參數(shù)說明6.1.3圖片示例代碼uni.chooseImage({ count:6, sizeType:['original','compressed'], sourceType:['album'], success:function(res){ //預(yù)覽圖片

uni.previewImage({ urls:res.tempFilePaths, longPressActions:{ itemList:['發(fā)送給朋友','保存圖片','收藏'], success:function(data){ console.log('選中了第'+(data.tapIndex+1)+'個按鈕,第'+(data.index+1)+'張圖片'); }, fail:function(err){ console.log(err.errMsg); } } }); } });6.1.3圖片uni.getImageInfo用來獲得圖片信息，網(wǎng)絡(luò)圖片需先配置download域名才能生效，包括圖片的寬度、圖片的高度及圖片返回的圖片路徑屬性類型必填說明srcstring是圖片的路徑，可以是相對路徑、臨時文件路徑、存儲文件路徑、網(wǎng)絡(luò)圖片路徑successFunction否接口調(diào)用成功的回調(diào)函數(shù)failFunction否接口調(diào)用失敗的回調(diào)函數(shù)completeFunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

getImageInfo參數(shù)說明6.1.3圖片參數(shù)類型說明widthnumber圖片寬度，單位為像素heightnumber圖片高度，單位為像素pathstring返回圖片的本地路徑orientationstring拍照時設(shè)備的方向

success返回參數(shù)說明6.1.3圖片示例代碼uni.chooseImage({ count:1, sourceType:['album'], success:function(res){ uni.getImageInfo({ src:res.tempFilePaths[0], success:function(image){ console.log(image.width); console.log(image.height); } }); }});6.1.3圖片屬性類型必填說明filePathstringArray是圖片文件路徑，可以是臨時文件路徑，也可以是永久文件路徑SuccessFunction否接口調(diào)用成功的回調(diào)函數(shù)FailFunction否接口調(diào)用失敗的回調(diào)函數(shù)CompleteFunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）saveImageToPhotosAlbum的參數(shù)說明uni.saveImageToPhotosAlbum保存圖片到相冊6.1.3圖片示例代碼uni.chooseImage({ count:1, sourceType:['camera'], success:function(res){ uni.saveImageToPhotosAlbum({ filePath:res.tempFilePaths[0], success:function(){ console.log('savesuccess'); } }); }});6.1.3圖片pressImage壓縮圖片，微信小程序支持將圖片進(jìn)行壓縮，圖片壓縮質(zhì)量可以根據(jù)自己的需求對quality的屬性進(jìn)行設(shè)置，壓縮質(zhì)量的范圍為

0～100，數(shù)值越小，壓縮質(zhì)量越低，壓縮率越高（僅對

jpg

圖片有效）。屬性類型必填/默認(rèn)值說明srcstring是圖片的路徑，可以是相對路徑、臨時文件路徑、存儲文件路徑qualitynumber80壓縮質(zhì)量，范圍為0～100，數(shù)值越小，質(zhì)量越低，壓縮率越高（僅對jpg有效）successfunction否接口調(diào)用成功的回調(diào)函數(shù)failfunction否接口調(diào)用失敗的回調(diào)函數(shù)completefunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

pressImage(OBJECT)的參數(shù)說明6.1.3圖片pressImage調(diào)用成功后會返回壓縮成功的臨時路徑tempFilePath示例代碼pressImage({src:'/static/logo.jpg',quality:80,success:res=>{console.log(res.tempFilePath)}})6.1.3圖片uni.chooseMedia(OBJECT)：拍攝或從手機相冊中選擇圖片或視頻。uni.saveVideoToPhotosAlbum(OBJECT)：保存視頻到系統(tǒng)相冊。uni.getVideoInfo(OBJECT)：獲取視頻詳細(xì)信息pressVideo(OBJECT)：壓縮視頻接口，開發(fā)者可指定壓縮質(zhì)量quality進(jìn)行壓縮。uni.chooseVideo(OBJECT)：拍攝視頻或從手機相冊中選擇視頻，返回視頻的臨時文件路徑。uni.openVideoEditor(OBJECT)：打開視頻編輯器，僅微信2.120以上版本支持。uni.createVideoContext(videoId,this)用于創(chuàng)建并返回video上下文videoContext對象。6.1.4視頻組件控制方法參數(shù)說明平臺差異說明play無播放

pause無暫停

seekposition跳轉(zhuǎn)到指定位置，單位s

stop

停止視頻微信小程序sendDanmudanmu發(fā)送彈幕，danmu包含兩個屬性text,color

playbackRaterate設(shè)置倍速播放，支持的倍率有0.5/0.8/1.0/1.25/1.5。微信基礎(chǔ)庫2.6.3起支持2.0倍速

requestFullScreen無進(jìn)入全屏，可傳入{direction}參數(shù)，詳見video組件H5和字節(jié)跳動小程序不支持{direction}參數(shù)exitFullScreen無退出全屏

showStatusBar無顯示狀態(tài)欄，僅在iOS全屏下有效微信、百度、QQ小程序hideStatusBar無隱藏狀態(tài)欄，僅在iOS全屏下有效微信、百度、QQ小程序videoContext對象方法6.1.4視頻組件控制視頻及彈幕演示6.1.4視頻組件控制6.1.5相機組件控制方法參數(shù)說明平臺差異說明takePhotoObject拍照，可指定質(zhì)量，成功則返回圖片路徑。

setZoomObject設(shè)置縮放級別微信小程序2.10.0+支持京東小程序不支持startRecordObject開始錄像京東小程序不支持stopRecordObject結(jié)束錄像，成功則返回封面與視頻。京東小程序不支持onCameraFrameFunction獲取Camera實時幀數(shù)據(jù)。CameraContext對象方法6.1.5相機組件控制使用uni.createCameraContext()創(chuàng)建并返回camera上下文CameraContext對象，CameraContext與頁面內(nèi)唯一的camera組件綁定，操作對應(yīng)的camera組件。演示相機拍照功能在本例中拍照后再界面中顯示預(yù)覽圖片，點擊圖片可以預(yù)覽圖片，點擊“保存圖片”按鈕則保存圖片至相冊，在H5版本下，則選擇保存路徑。6.1.5相機組件控制6.2.1文件保存uni.saveFile(OBJECT)方法，才能在應(yīng)用下次啟動時訪問得到uni.saveImageToPhotosAlbum(OBJECT)保存圖片到系統(tǒng)相冊uni.saveVideoToPhotosAlbum(OBJECT)保存視頻到系統(tǒng)相冊6.2.1文件保存OBJECT參數(shù)說明方法Object參數(shù)Success回調(diào)參數(shù)平臺差異uni.saveFiletempFilePath、success、fail、completesavedFilePathH5、快手小程序不支持uni.saveImageToPhotosAlbumfilePath、success、fail、completepath、errMsgH5不支持uni.saveVideoToPhotosAlbumfilePath、success、fail、completeerrMsgH5、京東小程序不支持6.2.1文件保存tempFilePath：臨時文件路徑。filePath：圖片文件路徑，可以是臨時文件路徑也可以是永久文件路徑，不支持網(wǎng)絡(luò)圖片路徑。uni.saveImageToPhotosAlbum中的success返回的path，僅App支持。補充說明6.2.2文件選擇示例代碼：uni.chooseImage({ count:1, sourceType:['camera'], success:function(res){ uni.saveImageToPhotosAlbum({ filePath:res.tempFilePaths[0], success:function(){ console.log('savesuccess'); } }); }});uni.chooseFile(OBJECT)：選擇文件但是僅H5支持uni.chooseImage(OBJECT)：從本地相冊選擇圖片或使用相機拍照6.2.2文件選擇uni.chooseVideo(OBJECT)：拍攝視頻或從手機相冊中選視頻，返回視頻的臨時文件路徑。uni.chooseMedia(OBJECT：拍攝或從手機相冊中選擇圖片或視頻示例代碼：uni.chooseImage({ count:1, sourceType:['camera'], success:function(res){ uni.saveImageToPhotosAlbum({ filePath:res.tempFilePaths[0], success:function(){ console.log('savesuccess'); } }); }});設(shè)備第

三

節(jié)uni.getSystemInfo(OBJECT)：異步獲取系統(tǒng)信息，包括設(shè)備id、設(shè)備類型、操作系統(tǒng)的名稱、版本、屏幕寬度高度等等信息。uni.getDeviceInfo():

獲取設(shè)備基礎(chǔ)信息。返回的內(nèi)容有設(shè)備品牌、設(shè)備id、設(shè)備型號、設(shè)備類型、設(shè)備方向、操作系統(tǒng)及版本等信息。6.3.1得到系統(tǒng)信息6.3.1得到系統(tǒng)信息

onLoad(){ uni.getSystemInfo({ success:function(res){ console.log("系統(tǒng)信息：",res); } }) }6.3.1得到系統(tǒng)信息console.log("設(shè)備信息：",uni.getDeviceInfo());6.3.2掃碼uni.scanCode(OBJECT)：調(diào)起客戶端掃碼界面，掃碼成功后返回對應(yīng)的結(jié)果。uni.scanCode(OBJECT)的參數(shù)說明參數(shù)名類型必填說明平臺差異說明onlyFromCameraBoolean否是否只能從相機掃碼，不允許從相冊選擇圖片字節(jié)跳動、百度、支付寶小程序不支持scanTypeArray否掃碼類型，barCode一維碼、qrCode二維碼、datamatrix、pdf417字節(jié)跳動小程序不支持此參數(shù)successFunction否接口調(diào)用成功的回調(diào)

failFunction否接口調(diào)用失敗的回調(diào)函數(shù)（識別失敗、用戶取消等情況下觸發(fā)）

completeFunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)6.3.2掃碼參數(shù)說明平臺差異說明result所掃碼的內(nèi)容

scanType所掃碼的類型App、微信、百度、QQ、京東、支付