第6章小程序API-Part1電子工業(yè)出版社微信小程序依托于微信客戶端的運行支持，并且，為了使小程序具有更加靈活的功能，微信客戶端開放一系列功能供小程序使用，可以通過使用稱為API的函數(shù)調(diào)用這組由微信客戶端開放給小程序的功能。這些API功能非常豐富，包括基礎(chǔ)功能、界面操作功能、頁面跳轉(zhuǎn)控制功能、媒體處理功能、網(wǎng)絡(luò)通信功能、甚至還有AI功能等，不僅如此，微信頁面與API結(jié)合起來，更能發(fā)揮小程序的能力。本章對小程序API的基本功能使用進行介紹，下一章對API進階功能進行介紹。目錄6.1基礎(chǔ)API6.2界面API6.3路由API6.4數(shù)據(jù)緩存API6.5文件系統(tǒng)操作API6.6媒體API6.7案例：自制錄音播放器6.8練習(xí)：視頻錄制播放器6.1基礎(chǔ)API微信基礎(chǔ)API提供了眾多的微信功能調(diào)用，包括：獲取系統(tǒng)信息、獲取設(shè)備信息、更新微信客戶端系統(tǒng)、系統(tǒng)日志管理等，作為舉例，本節(jié)只對幾個常用的基礎(chǔ)API進行介紹，更多基礎(chǔ)API的使用參見微信小程序技術(shù)文檔。6.1.1獲取系統(tǒng)信息微信提供的Objectwx.getSystemInfoSync()和wx.getSystemInfoAsync(Objectobject)函數(shù)用于獲取系統(tǒng)相關(guān)信息。微信所有API函數(shù)，均以”wx.”開頭，其后是函數(shù)的名稱，函數(shù)尾部的“Sync”或者“Async”表示是同步函數(shù)還是異步函數(shù)。例如，有兩個獲取系統(tǒng)信息的API函數(shù)，其中，wx.getSystemInfoSync()是同步函數(shù)，而wx.getSystemInfoAsync(Objectobject)則是異步函數(shù)。所謂“同步函數(shù)”是指函數(shù)的返回值就是函數(shù)的執(zhí)行結(jié)果；而“異步函數(shù)”則需要通過提供回調(diào)函數(shù)參數(shù)，并從回調(diào)函數(shù)中得到執(zhí)行結(jié)果。本質(zhì)上，“同步函數(shù)”與“異步函數(shù)”會得到相同的執(zhí)行結(jié)果，但是一般而言，“異步函數(shù)”的運行效率更好，并且，用戶體驗也會更好一些。wx.getSystemInfoSync()函數(shù)直接返回執(zhí)行結(jié)果，其返回值是一個Object對象，其中保存有系統(tǒng)的信息，該對象的常用屬性及其含義如表。序號屬性名類型說明1brandstring設(shè)備品牌2modelstring設(shè)備型號。3pixelRationumber設(shè)備像素比4screenWidthnumber屏幕寬度，單位px5screenHeightnumber屏幕高度，單位px6languagestring微信設(shè)置的語言7versionstring微信版本號8systemstring操作系統(tǒng)及版本9SDKVersionstring客戶端基礎(chǔ)庫版本10cameraAuthorizedboolean允許微信使用攝像頭的開關(guān)11locationAuthorizedboolean允許微信使用定位的開關(guān)12bluetoothEnabledboolean藍牙的系統(tǒng)開關(guān)13wifiEnabledbooleanWi-Fi的系統(tǒng)開關(guān)14deviceOrientationstring設(shè)備方向：portrait，豎屏；landscape，橫屏對于異步函數(shù)wx.getSystemInfoAsync(Objectobject)，其參數(shù)是一個Object對象，在這個對象中指定異步執(zhí)行結(jié)果調(diào)用函數(shù)，除非特別說明，一般包括三個屬性，如表所示。success，fail，complete回調(diào)函數(shù)在被調(diào)用時會傳入一個Object類型參數(shù)，這個Object參數(shù)包含的字段、字段類型及其含義如下：1、errMsg，string，錯誤信息，如果調(diào)用成功返回${apiName}:ok；2、errCode，number，錯誤碼，部分API支持，具體含義參考對應(yīng)API文檔，成功時為0。后續(xù)章節(jié)介紹的所有異步API的success，fail，complete回調(diào)函數(shù)的參數(shù)對象具有相似的屬性。序號屬性名類型默認(rèn)值必填說明1successfunction無否接口調(diào)用成功的回調(diào)函數(shù)?；卣{(diào)函數(shù)的參數(shù)是一個對象，其屬性名稱、屬性類型及其含義如表6-1所示2failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)3completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）舉一個例子演示這兩個函數(shù)的使用。這個例子中，用戶點擊“HelloWorld”，在console控制臺顯示系統(tǒng)信息。為此，新建名為mini-ch06-01的小程序工程，修改index.wxml為如下內(nèi)容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"bind:tap="getSysInfo">HelloWorld</view></scroll-view>修改index.js文件為如下內(nèi)容：//index.jsPage({getSysInfo(e){letinfo=wx.getSystemInfoSync();console.log(info);wx.getSystemInfoAsync({success(e){console.log(e);},fail(e){},complete(e){console.log(e);}})}})運行這個程序，點擊“HelloWorld”文字，顯示如圖所示的結(jié)果。6.1.2獲取設(shè)備信息微信提供了Objectwx.getDeviceInfo()函數(shù)用于獲取設(shè)備相關(guān)信息。注意，這個函數(shù)沒有“Sync”結(jié)尾也沒有“Async”結(jié)尾，表示這個函數(shù)只有一種調(diào)用方式。對這個函數(shù)而言，只提供同步執(zhí)行方式。wx.getDeviceInfo()函數(shù)的返回值Object對象的常用屬性及其含義如表。序號屬性名類型說明1abistring應(yīng)用（微信APP）二進制接口類型（僅Android支持）2brandstring設(shè)備品牌3modelstring設(shè)備型號。4systemstring操作系統(tǒng)及版本5cpuTypestring設(shè)備CPU型號（僅Android支持）6memorySizestring設(shè)備內(nèi)存大小，單位為MB6.2界面API微信提供了一組用于操作程序界面的API，這些API包括交互式API、tabBar操作API、下拉刷新控制API、動畫API等，下面對這些API分別進行介紹。6.2.1界面交互API界面交互API用于對程序運行過程中的實時信息進行顯示，用以告知用戶稱·程序運行狀態(tài)等，這些交互API包括消息顯示框、模態(tài)對話框、加載顯示框、菜單顯示框等。1、顯示/隱藏消息框wx.showToast(Objectobject)用于顯示簡短的消息以提示用戶某個操作的完成情況或者程序運行的狀態(tài)。它接受一個Object類型的對象參數(shù)，Object對象的屬性及其含義如表。序號屬性名類型默認(rèn)值必填說明1titlestring無是提示消息的內(nèi)容2iconstringsuccess否消息在消息框中的圖標(biāo)?？蛇x值包括：success：顯示成功圖標(biāo)，此時title文本最多顯示7個漢字長度；error：顯示失敗圖標(biāo)，此時title文本最多顯示7個漢字長度；loading：顯示加載圖標(biāo)，此時title文本最多顯示7個漢字長度；none：不顯示圖標(biāo)，此時title文本最多可顯示兩行。3imagestring無否自定義圖標(biāo)的本地路徑，image屬性的優(yōu)先級高于icon屬性4maskbooleanfalse否顯示透明蒙層，防止觸摸穿透5durationnumber否1500提示消息在屏幕上的顯示時長，單位為毫秒6successfunction無否接口調(diào)用成功的回調(diào)函數(shù)7failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)8completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）wx.hideToast(Objectobject)用于隱藏已經(jīng)顯示的消息框，它接受一個Object類型的對象參數(shù)，Object對象的屬性及其含義如表。序號屬性名類型默認(rèn)值必填說明1noConflictbooleanfalse否目前toast消息框和loading加載框相關(guān)接口可以相互混用，此參數(shù)可用于取消混用特性2successfunction無否接口調(diào)用成功的回調(diào)函數(shù)3failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)4completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）2、模態(tài)對話框wx.showModal(Objectobject)用于顯示模態(tài)對話框。所謂模態(tài)對話框，是指在用戶關(guān)閉對話框之前，用戶不能進行任何其他的與對話框無關(guān)的窗口操作。它接受一個Object類型的對象參數(shù)，Object對象的屬性及其含義如表。序號屬性名類型默認(rèn)值必填說明1titlestring無否對話框提示的標(biāo)題2contentstring無否提示的內(nèi)容3showCancelbooleantrue否是否顯示取消按鈕4cancelTextstring取消否取消按鈕的文字，最多4個字符5cancelColorstring#000000否取消按鈕的文字顏色，必須是16進制格式的顏色字符串6confirmTextstring確定否確認(rèn)按鈕的文字，最多4個字符7confirmColorstring#576B95否確認(rèn)按鈕的文字顏色，必須是16進制格式的顏色字符串8editablebooleanfalse否是否顯示輸入框9placeholderTextstring無否顯示輸入框時的提示文本10successfunction無否接口調(diào)用成功的回調(diào)函數(shù)?；卣{(diào)函數(shù)的參數(shù)是一個對象，對象的屬性及其其含義如下：content屬性，string類型，當(dāng)editable為true時，用戶輸入的文本；confirm屬性，boolean類型，為true時，表示用戶點擊了確定按鈕；cancel屬性， boolean類型，為true時，表示用戶點擊了取消。11failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)12completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）3、顯示/隱藏加載框wx.showLoading(Objectobject)用于顯示loading框，使用該API顯示的loading框必須調(diào)用與之配套的wx.hideLoading(Objectobject)隱藏。wx.showLoading(Objectobject)接受一個Object類型的對象參數(shù)，Object對象的屬性及其含義如表。wx.hideLoading(Objectobject)也接受一個Object類型的對象參數(shù)，對象的屬性及其含義如表。序號屬性名類型默認(rèn)值必填說明1titlestring無是提示的內(nèi)容2maskbooleanfalse否是否顯示透明蒙層，防止觸摸穿透3successfunction無否接口調(diào)用成功的回調(diào)函數(shù)4failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)5completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）序號屬性名類型默認(rèn)值必填說明1noConflictbooleanfalse否目前toast消息框和loading加載框相關(guān)接口可以相互混用，此參數(shù)可用于取消混用特性2successfunction無否接口調(diào)用成功的回調(diào)函數(shù)3failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)4completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）4、4、顯示菜單可以使用wx.showActionSheet(Objectobject)顯示并操作菜單。它接受一個Object類型的對象參數(shù)，Object對象的屬性及其含義如表。序號屬性名類型默認(rèn)值必填說明

alertTextstring無否菜單提示信息

itemListArray.<string>無是按鈕的文字?jǐn)?shù)組，數(shù)組長度最大為6

itemColorstring#000000否按鈕的文字顏色

successfunction無否接口調(diào)用成功的回調(diào)函數(shù)?；卣{(diào)函數(shù)的參數(shù)是一個對象，對象的屬性及其其含義如下：tapIndex屬性，number類型，用戶點擊的按鈕序號，從上到下的順序，從0開始。

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

completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）舉一個例子演示常用界面API的使用。這個例子顯示4個按鈕，當(dāng)點擊按鈕時分別顯示一個消息框、模態(tài)對話框、加載框、菜單操作。新建名為mini-ch06-02的小程序工程，修改index.wxml為如下內(nèi)容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><buttontype="primary"bind:tap="toast">ShowToast</button><buttontype="primary"bind:tap="dialog">ModalDialog</button><buttontype="primary"bind:tap="loading">ShowLoding</button><buttontype="primary"bind:tap="action">ActionSheet</button></view></scroll-view>index.js文件內(nèi)容如下：//index.jsPage({toast(){wx.showToast({title:'消息框',duration:2000})},dialog(){wx.showModal({title:'模態(tài)對話框',content:'這是一個模態(tài)對話框',complete:(res)=>{if(res.cancel){wx.showToast({title:'點擊了確定按鈕',})return;}if(res.confirm){wx.showToast({title:'點擊了取消按鈕',})return;}}})},loading(){wx.showLoading({title:'正在加載',complete:(res)=>{setTimeout(()=>{wx.hideLoading();},5000);}})},action(){wx.showActionSheet({itemList:['打開相冊','打開PDF文件','顯示目錄'],success(res){console.log(res.tapIndex)},fail(res){console.log(res.errMsg)}})}})運行這個程序，顯示如圖6-2所示的界面。6.2.2TabBar操作API微信提供了一系列API用于操作TabBar界面。這些函數(shù)包括：顯示/隱藏TabBar、設(shè)置TabBar上條目的屬性等。1、顯示/隱藏TabBar使用wx.showTabBar(Objectobject)顯示TabBar，使用wx.hideTabBar(Objectobject)隱藏TabBar。這兩個函數(shù)都接受一個Object對象作為參數(shù)，Object對象的屬性及其含義如表。序號屬性名類型默認(rèn)值必填說明1animationBooleanFalse否是否需要動畫效果2SuccessFunction無否接口調(diào)用成功的回調(diào)函數(shù)3FailFunction無否接口調(diào)用失敗的回調(diào)函數(shù)4CompleteFunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）2、顯示/隱藏TabBar條目上的紅點使用wx.showTabBarRedDot(Objectobject)顯示紅點，使用wx.hideTabBarRedDot(Objectobject)隱藏紅點。這兩個函數(shù)都接受一個Object對象作為參數(shù)，Object對象的屬性及其含義如表。序號屬性名類型默認(rèn)值必填說明1index number無是tabBar的哪一項，從左邊算起，最左邊為02successfunction無否接口調(diào)用成功的回調(diào)函數(shù)3failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)4completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）3、設(shè)置/移除TabBar條目右上角的文本使用wx.setTabBarBadge(Objectobject)設(shè)置文本，使用wx.removeTabBarBadge(Objectobject)移除文本。wx.setTabBarBadge(Objectobject)函數(shù)的參數(shù)屬性如表。wx.removeTabBarBadge(Objectobject)函數(shù)的參數(shù)與wx.setTabBarBadge(Objectobject)類似，只是少了text屬性。序號屬性名類型默認(rèn)值必填說明1index number無是tabBar的哪一項，從左邊算起，最左邊為02textstring無是顯示的文本，超過4個字符則顯示成“...”。3successfunction無否接口調(diào)用成功的回調(diào)函數(shù)4failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)5completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）6.2.3動畫API在微信小程序中，可以通過Animation對象控制組件執(zhí)行特定的動畫，進而使組件的顯示產(chǎn)生特定的效果。可以使用動畫API的wx.createAnimation(Objectobject)函數(shù)獲得一個Animation對象，它接收一個Object對象參數(shù)，Object對象參數(shù)的屬性及其含義如表。序號屬性名類型默認(rèn)值必填說明1durationnumber400否動畫持續(xù)時間，單位ms2timingFunctionstring'linear'否動畫的效果。可選值：'linear'，動畫從頭到尾的速度是相同的；'ease'，動畫以低速開始，然后加快，在結(jié)束前變慢；'ease-in'，動畫以低速開始；'ease-in-out'，動畫以低速開始和結(jié)束；'ease-out'，動畫以低速結(jié)束；'step-start'，動畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束；'step-end'，動畫一直保持開始狀態(tài)，最后一幀跳到結(jié)束狀態(tài)。3delay number0否動畫延遲時間，單位ms4transformOriginstring'50%50%0'否動畫執(zhí)行時的原點一旦創(chuàng)建了Animation對象，可使用Animation對象提供的方法設(shè)置一系列動畫動作。常用的動畫動作及其含義如表。序號方法名稱及參數(shù)含義1ObjectAnimation.export()導(dǎo)出動畫隊列。export方法每次調(diào)用后會清掉之前的動畫操作。2AnimationAnimation.step(Objectobject)表示一組動畫完成。可以在一組動畫中調(diào)用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。3AnimationAnimation.rotate(numberangle)從原點順時針旋轉(zhuǎn)一個角度4AnimationAnimation.rotateX(numberangle)從X軸順時針旋轉(zhuǎn)一個角度5AnimationAnimation.rotateY(numberangle)從Y軸順時針旋轉(zhuǎn)一個角度6AnimationAnimation.scale(numbersx,numbersy)縮放7AnimationAnimation.skew(numberax,numberay)對X、Y軸坐標(biāo)進行傾斜8AnimationAnimation.translate(numbertx,numberty)平移變換9AnimationAnimation.opacity(numbervalue)設(shè)置透明度10AnimationAnimation.backgroundColor(stringvalue)設(shè)置背景色11AnimationAnimation.width(number|stringvalue)設(shè)置寬度12AnimationAnimation.height(number|stringvalue)設(shè)置高度在小程序中，實現(xiàn)動畫功能的步驟：第一步，在頁面的.js文件的data屬性中聲明動畫一個動畫屬性，例如，data:{animation:{}}；第二步，在合適的時機創(chuàng)建一個動畫實例，例如，this.animation=wx.createAnimation({})；第三步，調(diào)用實例的方法，也就是表6-15中的方法描述動畫，例如：this.animation.rotate(150).scale(3)；第四步，調(diào)用動畫操作方法后調(diào)用step()來表示一組動畫完成，可以在一組動畫中調(diào)用任意多個動畫方法，一組動畫中的所有動畫會同時開始；第五步，最后通過動畫實例export方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的animation。舉一個例子介紹操作TabBar的API和動畫API的使用。在這個例子中，首先顯示一個TabBar，TabBar中有兩個頁面，通過點擊頁面上的組件完成指定的動畫或者操作TabBar組件的功能。新建名為mini-ch06-03的工程，在工程中新建images文件夾，并在文件夾中放置兩張圖標(biāo)，并修改app.js問如下內(nèi)容：{"pages":["pages/index/index","pages/animex/animex"],"tabBar":{"list":[{"pagePath":"pages/index/index","text":"動畫演示","iconPath":"images/icon1.png","selectedIconPath":"images/icon1.png"},{"pagePath":"pages/animex/animex","text":"Tab演示","iconPath":"images/icon2.png","selectedIconPath":"images/icon2.png"}]},//以下省略完成后的工程如圖所示：修改index.wxml文件為如下內(nèi)容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><viewanimation="{{animation}}">點擊按鈕，我是可以轉(zhuǎn)動的</view><buttonbindtap="rotate">點擊旋轉(zhuǎn)</button></view></scroll-view>修改index.js文件為如下內(nèi)容：//index.jsPage({data:{animation:{}},onReady:function(){this.animation=wx.createAnimation({duration:500,timingFunction:'linear',delay:500})},rotate:function(){this.animation.rotate(360).scale(1.5).step().rotate(-360).scale(1).step()this.setData({animation:this.animation.export()//輸出動畫

})}})修改animex.wxml文件為內(nèi)容：修改animex.json文件為如下內(nèi)容：<!s/animex/animex.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"bind:tap="hong">

點擊：在tabbar上顯示文字和紅點</view></scroll-view>{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改animex.wxss文件為如下內(nèi)容：修改animex.js為如下內(nèi)容：/*pages/animex/animex.wxss*/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}//pages/animex/animex.jsPage({hong(){wx.showTabBarRedDot({index:1});wx.setTabBarBadge({index:1,text:'OK'});}})運行這個程序，顯示如圖所示的界面。6.3路由API除了可以使用navigator組件實現(xiàn)小程序頁面之間的跳轉(zhuǎn)外，微信還提供了一組API實現(xiàn)頁面之間的跳轉(zhuǎn)。6.3.1頁面跳轉(zhuǎn)API微信提供的頁面跳轉(zhuǎn)API包括：wx.navigateTo、wx.navigateBack、wx.redirectTo等，下面進行詳細介紹。1、使用wx.navigateTo實現(xiàn)頁面跳轉(zhuǎn)wx.navigateTo(Objectobject)實現(xiàn)頁面之間的跳轉(zhuǎn)。這個函數(shù)會保留當(dāng)前頁面，并跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到tabbar頁面?？梢允褂脀x.navigateBack（Objectobject）函數(shù)返回到原頁面。該函數(shù)的Object參數(shù)屬性如表序號屬性名類型默認(rèn)值必填說明1urlstring無是需要跳轉(zhuǎn)的應(yīng)用內(nèi)非tabBar的頁面的路徑,路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔，如：'path?key=value&key2=value2'2eventsObject無否頁面間通信接口，用于監(jiān)聽被打開頁面發(fā)送到當(dāng)前頁面的數(shù)據(jù)3routeTypestring無否自定義路由類型4successfunction無否接口調(diào)用成功的回調(diào)函數(shù)5failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)6completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）2、使用wx.navigateBack返回到上一個頁面wx.navigateBack(Objectobject)函數(shù)關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面?？梢灾付ㄐ枰祷貙蛹?。該函數(shù)的Object參數(shù)屬性如表。序號屬性名類型默認(rèn)值必填說明1deltanumber1否返回的頁面數(shù)，如果delta大于現(xiàn)有頁面數(shù)，則返回到首頁。2successfunction無否接口調(diào)用成功的回調(diào)函數(shù)3failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)4completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）3、使用wx.redirectTo跳轉(zhuǎn)頁面wx.redirectTo(Objectobject)函數(shù)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，但是不允許跳轉(zhuǎn)到tabbar頁面。該函數(shù)的Object參數(shù)屬性如表。序號屬性名類型默認(rèn)值必填說明1urlstring無是需要跳轉(zhuǎn)的應(yīng)用內(nèi)非tabBar的頁面的路徑,路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔，如：'path?key=value&key2=value2'2successfunction無否接口調(diào)用成功的回調(diào)函數(shù)3failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)4completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）4、使用wx.reLaunch調(diào)轉(zhuǎn)頁面wx.reLaunch(Objectobject)函數(shù)關(guān)閉所有頁面，并打開到應(yīng)用內(nèi)的指定頁面。該函數(shù)的Object參數(shù)屬性如表。序號屬性名類型默認(rèn)值必填說明1urlstring無是需要跳轉(zhuǎn)的應(yīng)用內(nèi)非tabBar的頁面的路徑,路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔，如：'path?key=value&key2=value2'2successfunction無否接口調(diào)用成功的回調(diào)函數(shù)3failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)4completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）5、使用wx.switchTab跳轉(zhuǎn)tabBar頁面wx.switchTab(Objectobject)函數(shù)跳轉(zhuǎn)到tabBar頁面，并關(guān)閉其他所有非tabBar頁面。該函數(shù)的Object參數(shù)屬性及其含義如表。序號屬性名類型默認(rèn)值必填說明1urlstring無是需要跳轉(zhuǎn)的tabBar頁面的路徑（需在app.json的tabBar字段定義的頁面），路徑后不能帶參數(shù)。2successfunction無否接口調(diào)用成功的回調(diào)函數(shù)3failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)4completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）6.3.2路由API使用舉例這個程序顯示一個包含三個Tab的TabBar首頁面，在第一個Tab頁面，點擊不同的按鈕以不同的方式實現(xiàn)頁面跳轉(zhuǎn)，也可以實現(xiàn)不同Tab之間的跳轉(zhuǎn)。新建名稱為mini-ch06-04的小程序工程，在工程中新建images子目錄，并準(zhǔn)備相應(yīng)圖片文件。然后修改app.json為如下內(nèi)容：{"pages":["pages/index/index","pages/tab2/tab2","pages/tab3/tab3","pages/example/example"],"tabBar":{"list":[{"pagePath":"pages/index/index","text":"路由演示","iconPath":"images/icon1.png","selectedIconPath":"images/icon1.png"},{"pagePath":"pages/tab2/tab2","text":"卡片一號","iconPath":"images/icon2.png","selectedIconPath":"images/icon2.png"},{"pagePath":"pages/tab3/tab3","text":"卡片二號","iconPath":"images/icon3.png","selectedIconPath":"images/icon3.png"}]},//以下省略修改index.wxml為如下內(nèi)容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><buttontype="primary"bind:tap="navigateto">NavigateTo</button><buttontype="primary"bind:tap="relaunch">Relaunch</button><buttontype="primary"bind:tap="redirectto">RedirectTo</button><buttontype="primary"bind:tap="switchtab">SwitchTab</button></view></scroll-view>修改index.js為如下內(nèi)容：//index.jsPage({navigateto(){wx.navigateTo({url:'/pages/example/example',})},relaunch(){wx.reLaunch({url:'/pages/example/example',})},redirectto(){wx.redirectTo({url:'/pages/example/example',})},switchtab(){wx.switchTab({url:'/pages/tab2/tab2',})}})修改tab2.json為如下內(nèi)容：修改tab2.wxml問如下內(nèi)容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}<!s/tab2/tab2.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><imagesrc="/images/01.jpg"></image></view></scroll-view>類似的，修改tab3.json和tab3.wxml為類似的內(nèi)容。然后，修改example.json問如下內(nèi)容：修改example.wxml為如下內(nèi)容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}<!s/example/example.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><buttontype="primary"bind:tap="navigateback">NavigateBack</button></view></scroll-view>運行這個程序，顯示如圖所示的頁面。6.4數(shù)據(jù)緩存API微信小程序可以使用數(shù)據(jù)緩存API在微信客戶端保存少量數(shù)據(jù)。數(shù)據(jù)以“key:value”形式存儲，單個key允許存儲的最大數(shù)據(jù)長度為1MB，所有數(shù)據(jù)存儲上限為10MB。6.4.1保存數(shù)據(jù)函數(shù)wx.setStorageSync(stringkey,anydata)和wx.setStorage(Objectobject)用于存儲數(shù)據(jù)。它們都將數(shù)據(jù)存儲在本地緩存中指定的key中，并且會覆蓋掉原來該key對應(yīng)的內(nèi)容。除非用戶主動刪除或因存儲空間原因被系統(tǒng)清理，否則數(shù)據(jù)都一直可用。同步函數(shù)wx.setStorageSync(stringkey,anydata)直接以key和value作為參數(shù)，異步函數(shù)wx.setStorage(Objectobject)接受一個Object對象參數(shù)，Object參數(shù)的屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1keystring無是本地緩存中指定的key2dataany無是需要存儲的內(nèi)容。只支持原生類型、Date、及能夠通過JSON.stringify序列化的對象。3encryptBooleanfalse否是否開啟加密存儲。若開啟加密存儲，setStorage和getStorage需要同時聲明encrypt的值為true。4successfunction無否接口調(diào)用成功的回調(diào)函數(shù)5failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)6completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）6.4.2讀取數(shù)據(jù)函數(shù)anywx.getStorageSync(stringkey)和wx.getStorage(Objectobject)讀取保存的數(shù)據(jù)。其中，wx.getStorageSync(stringkey)讀取指定參數(shù)key的值；wx.getStorage(Objectobject)接受一個Object對象的參數(shù)，Object參數(shù)的屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1keystring無是本地緩存中指定的key2encryptBooleanfalse否是否開啟加密存儲。若開啟加密存儲，setStorage和getStorage需要同時聲明encrypt的值為true。3successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。接受一個Object參數(shù)對象，該對象的data屬性就是讀取得到的key對應(yīng)的值。4failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)5completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）6.4.3清除數(shù)據(jù)可以一次清除一個指定key的數(shù)據(jù)，或者一次性清除所有存儲的數(shù)據(jù)。函數(shù)wx.removeStorage(Objectobject)和wx.removeStorageSync(stringkey)清除指定key及其值；函數(shù)wx.clearStorage(Objectobject)和wx.clearStorageSync()清除所有存儲的key及其值。wx.removeStorage(Objectobject)函數(shù)的Object對象參數(shù)屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1keystring無是本地緩存中指定的key2successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。接受一個Object參數(shù)對象，該對象的data屬性就是讀取得到的key對應(yīng)的值。3failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)4completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）wx.clearStorage(Objectobject)函數(shù)的Object對象參數(shù)屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。接受一個Object參數(shù)對象，該對象的data屬性就是讀取得到的key對應(yīng)的值。2failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)3completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）6.4.4獲取數(shù)據(jù)緩存狀態(tài)函數(shù)wx.getStorageInfo(Objectobject)和Objectwx.getStorageInfoSync()獲取數(shù)據(jù)緩存的狀態(tài)。wx.getStorageInfo(Objectobject)接受一個Object對象參數(shù)，Object對象參數(shù)屬性及其含義如表：函數(shù)Objectwx.getStorageInfoSync()的返回值Object對象，以及wx.getStorageInfo(Objectobject)的success回調(diào)函數(shù)的參數(shù)Object對象，這個Object對象的屬性及其含義如表:序號屬性名類型默認(rèn)值必填說明1successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。接受一個Object參數(shù)對象，該對象的屬性及其含義如表6-25所示。2failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)3completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）序號屬性名類型說明1keysArray.<string>當(dāng)前數(shù)據(jù)緩存中所有的key2currentSizenumber當(dāng)前占用的空間大小,單位KB3limitSizenumber限制的空間大小，單位KB6.4.5數(shù)據(jù)緩存使用舉例舉一個例子演示數(shù)據(jù)緩存API的使用。在程序的首頁面顯示4個按鈕，分別用于保存數(shù)據(jù)、讀取數(shù)據(jù)、清除數(shù)據(jù)和查看數(shù)據(jù)緩存狀態(tài)。為此，新建名稱為mini-ch06-05的小程序工程，修改index.wxml為如下內(nèi)容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><buttontype="primary"bind:tap="save">保存數(shù)據(jù)</button><buttontype="primary"bind:tap="read">讀取數(shù)據(jù)</button><buttontype="primary"bind:tap="clear">清除數(shù)據(jù)</button><buttontype="primary"bind:tap="status">數(shù)據(jù)緩存狀態(tài)</button></view></scroll-view>修改index.js為如下內(nèi)容：//index.jsPage({save(){letd=newDate();wx.setStorageSync('date',d.toTimeString());wx.setStorageSync('name','張三');wx.setStorageSync('age',20);},read(){console.log(wx.getStorageSync('date'));console.log(wx.getStorageSync('name'));console.log(wx.getStorageSync('age'));},clear(){wx.clearStorage();},status(){wx.getStorageInfo({success(res){console.log(res.keys);console.log(res.currentSize);console.log(res.limitSize);},fail(){console.log('讀取數(shù)據(jù)緩存狀態(tài)失??！');}})}})運行這個程序，點擊“保存數(shù)據(jù)”按鈕后再點擊“讀取數(shù)據(jù)”按鈕，顯示如圖界面:6.5文件系統(tǒng)操作API典型的文件操作API包括：wx.openDocument(Objectobject)用于打開指定的文檔；FileSystemManagerwx.getFileSystemManager()則用于獲取一個FileSystemManager對象，通過這個對象可以對文件進行讀寫等操作。6.5.1打開文檔函數(shù)wx.openDocument(Objectobject)用于打開指定的文檔。這個函數(shù)接受一個Object對象參數(shù)，參數(shù)Object對象的屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1filePathstring無是文件路徑(本地路徑)，例如通過wx.downloadFile獲得2showMenubooleanfalse否是否顯示右上角菜單3fileTypestring無否文件類型，指定文件類型打開文件。可選值：doc；docx；xls；xlsx；ppt；pptx；pdf4successfunction無否接口調(diào)用成功的回調(diào)函數(shù)5failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)6completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）6.5.2使用FileSystemManager對象操作文件如果需要對文件進行完全的操作，例如，打開文件、讀取文件數(shù)據(jù)、像文件中寫入數(shù)據(jù)、關(guān)閉文件、刪除文件等操作，則需要首先獲取一個FileSystemManager對象?？梢哉{(diào)用通過如下函數(shù)：FileSystemManagerwx.getFileSystemManager()獲取FileSystemManager對象。一旦獲得了FileSystemManager對象，就可以通過FileSystemManager對象提供的方法對文件進行操作。FileSystemManager對象提供的方法及其作用如表：序號方法含義1FileSystemManager.access(Objectobject)判斷文件/目錄是否存在。2FileSystemManager.saveFile(Objectobject)保存臨時文件到本地。此接口會移動臨時文件，調(diào)用成功后，tempFilePath將不可用。3FileSystemManager.getSavedFileList(Objectobject)獲取該小程序下已保存的本地緩存文件列表4FileSystemManager.removeSavedFile(Objectobject)刪除該小程序下已保存的本地緩存文件5FileSystemManager.close(Objectobject)關(guān)閉文件6FileSystemManager.copyFile(Objectobject)復(fù)制文件7FileSystemManager.getFileInfo(Objectobject)獲取該小程序下的本地臨時文件或本地緩存文件信息8FileSystemManager.open(Objectobject)打開文件，返回文件描述符9FileSystemManager.read(Objectobject)讀文件10FileSystemManager.readFile(Objectobject)讀取本地文件內(nèi)容。單個文件大小上限為100M。11FileSystemManager.unlink(Objectobject)刪除文件12FileSystemManager.write(Objectobject)寫入文件13FileSystemManager.writeFile(Objectobject)寫文件1、FileSystemManager.saveFile(Objectobject)的Object參數(shù)FileSystemManager.saveFile(Objectobject)函數(shù)將某個臨時文件保存到文件系統(tǒng)的指定文件中，它的Object參數(shù)對象的屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1tempFilePathstring無是臨時存儲文件路徑(本地路徑)2filePathstring無否要存儲的文件路徑(本地路徑)3successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。該回調(diào)函數(shù)接受一個Object對象參數(shù)，其屬性、類型及含如下：savedFilePath，string，存儲后的文件路徑(本地路徑)4failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)5completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）2、FileSystemManager.getSavedFileList(Objectobject)的Object參數(shù)FileSystemManager.getSavedFileList(Objectobject)函數(shù)獲取該小程序下已保存的本地緩存文件列表。它的Object參數(shù)對象的屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。該回調(diào)函數(shù)接受一個Object對象參數(shù)，其屬性、類型及含如下：fileList，Array.<Object>，文件數(shù)組，元素的成員：filePath，string，文件路徑(本地路徑)；size，number，本地文件大小，以字節(jié)為單位；createTime，number，文件保存時的時間戳。2failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)3completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）3、FileSystemManager.removeSavedFile(Objectobject)的Object參數(shù)FileSystemManager.removeSavedFile(Objectobject)函數(shù)刪除該小程序下已保存的本地緩存文件。它的Object參數(shù)對象的屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1filePathstring無是需要刪除的文件路徑(本地路徑)2successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。3failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)4completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）4、FileSystemManager.readFile(Objectobject)的Object參數(shù)FileSystemManager.readFile(Objectobject)函數(shù)讀取本地文件內(nèi)容。單個文件大小上限為100M。它的Object參數(shù)對象的屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1filePathstring無是要讀取的文件的路徑(本地路徑)2encodingstring無否指定讀取文件的字符編碼，如果不傳encoding，則以ArrayBuffer格式讀取文件的二進制內(nèi)容?？蛇x值：ascii、base64、binary、hex、utf-8、utf8、latin1。3positionnumber無否從文件指定位置開始讀，如果不指定，則從文件頭開始讀。4lengthnumber無否指定文件的長度，如果不指定，則讀到文件末尾。有效范圍：[1,fileLength]。單位：byte5successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。該回調(diào)函數(shù)接受一個Object對象參數(shù)，其屬性、類型及含如下：data，string/ArrayBuffer，文件內(nèi)容。6failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)7completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）5、FileSystemManager.unlink(Objectobject)的Object參數(shù)FileSystemManager.unlink(Objectobject)函數(shù)刪除指定文件。它的Object參數(shù)對象的屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1filePathstring無是要刪除的文件路徑(本地路徑)2successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。該回調(diào)函數(shù)接受一個Object對象參數(shù)，其屬性、類型及含如下：data，string/ArrayBuffer，文件內(nèi)容。3failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)4completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）6.6媒體API微信媒體API包括圖像API、音頻API、視頻API、錄音API、相機操作API、地圖API等，下面對常用的媒體API進行介紹。6.6.1圖像API圖像API包括選擇圖像、預(yù)覽圖像、保存圖像到相冊、圖像壓縮、獲取圖像基本信息等API調(diào)用。下面先介紹常用圖像API，再通過舉例介紹常用API的使用。1、選擇圖像wx.chooseImage函數(shù)wx.chooseImage(Objectobject)允許從本地相冊選擇圖片或使用相機拍照，并返回選擇或者拍攝的圖像。它接受一個Object對象作為參數(shù)，Object參數(shù)對象的屬性及其含義如表：當(dāng)wx.chooseImage(Objectobject)成功執(zhí)行后，將回調(diào)success屬性所指定的函數(shù)，并傳遞一個Object對象作為參數(shù)，該Object對象的屬性及其含義如表：序號屬性名類型說明1tempFilePathsArray.<string>圖片的本地臨時文件路徑列表(本地路徑)2tempFilesArray.<Object>圖片的本地臨時文件列表。Object元素包括如下屬性：path，string，本地臨時文件路徑(本地路徑)；size，number，本地臨時文件大小，單位B。序號屬性名類型默認(rèn)值必填說明1countnumber9否最多可以選擇的圖片張數(shù)2sizeTypeArray.<string>['original','compressed']否所選的圖片的尺寸.可選值：original，原圖；compressed，壓縮圖。3sourceTypeArray.<string>['album','camera']否選擇圖片的來源?？蛇x值：album，從相冊選圖；camera，使用相機。4successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。接受一個Object參數(shù)對象，該對象的屬性及其含義如表6-27所示。5failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)6completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）2、圖像預(yù)覽wx.previewImage函數(shù)wx.previewImage(Objectobject)在新頁面中全屏預(yù)覽圖片，預(yù)覽的過程中用戶可以進行保存圖片、發(fā)送給朋友等操作。它接受一個Object對象作為參數(shù)，Object參數(shù)對象的屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1urlsArray.<string>無是需要預(yù)覽的圖片鏈接列表。2showmenubooleantrue否是否顯示長按菜單。3currentstringurls中的第一張否當(dāng)前顯示圖片的鏈接4successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。5failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)6completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）3、獲取圖像基本信息wx.getImageInfo函數(shù)wx.getImageInfo(Objectobject)獲取圖片信息。它接受一個Object對象作為參數(shù)，Object參數(shù)對象的屬性及其含義如表：當(dāng)wx.getImageInfo(Objectobject)成功執(zhí)行后，將回調(diào)success屬性所指定的函數(shù)，并傳遞一個Object對象作為參數(shù)，該Object對象的屬性及其含義如表：序號屬性名類型默認(rèn)值必填說明1srcstring無是圖片的路徑，支持網(wǎng)絡(luò)路徑、本地路徑、代碼包路徑2successfunction無否接口調(diào)用成功的回調(diào)函數(shù)。接受一個Object參數(shù)對象，該對象的屬性及其含義如表6-37所示。3failfunction無否接口調(diào)用失敗的回調(diào)函數(shù)4completefunction無否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）