模塊4 微信小程序API（上）《微信小程序》教學(xué)課件

《微信小程序》?精品課件合集第X章XXXX模塊4微信小程序API（上）【案例4-1】音樂(lè)播放器01案例分析“音樂(lè)播放器”微信小程序的頁(yè)面由上、中、下3個(gè)部分組成，這3個(gè)部分分別是標(biāo)簽欄區(qū)域、內(nèi)容區(qū)域和播放器區(qū)域。“音樂(lè)播放器”微信小程序的頁(yè)面效果如右圖所示。案例分析下面對(duì)標(biāo)簽欄區(qū)域、內(nèi)容區(qū)域和播放器區(qū)域分別進(jìn)行介紹，具體如下。標(biāo)簽欄區(qū)域：該區(qū)域有音樂(lè)推薦、播放器和播放列表3個(gè)標(biāo)簽按鈕，通過(guò)點(diǎn)擊標(biāo)簽按鈕可以進(jìn)行標(biāo)簽頁(yè)的切換。內(nèi)容區(qū)域：通過(guò)左右滑動(dòng)可以實(shí)現(xiàn)音樂(lè)推薦、播放器和播放列表3個(gè)標(biāo)簽頁(yè)的切換。這3個(gè)標(biāo)簽頁(yè)的具體說(shuō)明如下。音樂(lè)推薦：用于向用戶推薦一些歌曲。播放器：用于顯示當(dāng)前播放音樂(lè)的信息、專輯封面、播放進(jìn)度和時(shí)間。其中，音樂(lè)信息包括當(dāng)前播放音樂(lè)的標(biāo)題和歌手。播放列表：用于顯示當(dāng)前播放的曲目列表，用戶可以進(jìn)行曲目切換。案例分析播放器區(qū)域：顯示當(dāng)前播放的音樂(lè)信息，并且提供了3個(gè)按鈕，按鈕的功能依次為“切換到播放列表”“播放/暫?！薄跋乱磺薄?/p>

在初始狀態(tài)下，“音樂(lè)播放器”微信小程序默認(rèn)顯示第1個(gè)標(biāo)簽頁(yè)，也就是“音樂(lè)推薦”標(biāo)簽頁(yè)。通過(guò)點(diǎn)擊標(biāo)簽欄區(qū)域中的標(biāo)簽或者左右滑動(dòng)內(nèi)容區(qū)域可以切換標(biāo)簽頁(yè)。案例分析“播放器”標(biāo)簽頁(yè)的頁(yè)面效果如右圖所示。圓形的圖片是專輯封面，在音樂(lè)播放時(shí)會(huì)旋轉(zhuǎn)，音樂(lè)暫停時(shí)圖片暫停旋轉(zhuǎn)。下方是滑動(dòng)選擇器，用于顯示或更改音樂(lè)的播放進(jìn)度，滑動(dòng)選擇器左邊的時(shí)間表示當(dāng)前播放音樂(lè)的時(shí)長(zhǎng)，右邊的時(shí)間表示當(dāng)前曲目的總時(shí)長(zhǎng)。案例分析“播放列表”標(biāo)簽頁(yè)的頁(yè)面效果如右圖所示。圖中展示了當(dāng)前播放列表中的曲目信息，點(diǎn)擊其中某一個(gè)曲目項(xiàng)可以切換成該曲目。每個(gè)曲目項(xiàng)的左側(cè)顯示專輯封面、曲目標(biāo)題和歌手；右側(cè)顯示播放狀態(tài)，如果當(dāng)前曲目正在播放則顯示“正在播放”。

先定一個(gè)小目標(biāo)！掌握scroll-view組件，能夠完成視圖區(qū)域的橫向滾動(dòng)或者縱向滾動(dòng)知識(shí)儲(chǔ)備1.scroll-view組件知識(shí)儲(chǔ)備什么是scroll-view組件?1.scroll-view組件知識(shí)儲(chǔ)備當(dāng)一個(gè)容器中的內(nèi)容有很多時(shí)，如果容器無(wú)法完整顯示內(nèi)容，則可以通過(guò)滾動(dòng)操作來(lái)查看完整內(nèi)容。在微信小程序中，可以通過(guò)scroll-view組件來(lái)實(shí)現(xiàn)滾動(dòng)效果，它支持橫向滾動(dòng)和縱向滾動(dòng)，默認(rèn)是不滾動(dòng)的，需要通過(guò)scroll-x和scroll-y屬性允許橫向和縱向滾動(dòng)。1.scroll-view組件屬性類型說(shuō)明scroll-xboolean允許橫向滾動(dòng)，默認(rèn)值為falsescroll-yboolean允許縱向滾動(dòng)，默認(rèn)值為falsescroll-topnumber/string設(shè)置豎向滾動(dòng)條的位置，默認(rèn)值為空scroll-leftnumber/string設(shè)置橫向滾動(dòng)條的位置，默認(rèn)值為空scroll-into-viewstring當(dāng)前可在哪個(gè)方向滾動(dòng)，則在哪個(gè)方向滾動(dòng)到該元素。值為某子元素id（id不能以數(shù)字開(kāi)頭）知識(shí)儲(chǔ)備scroll-view組件的常用屬性如下表。

1.scroll-view組件屬性類型說(shuō)明scroll-with-animationboolean在設(shè)置滾動(dòng)條位置時(shí)是否使用動(dòng)畫過(guò)渡，默認(rèn)值為falsebindscrolltouppereventhandle滾動(dòng)到頂部/左邊時(shí)觸發(fā)的事件bindscrolltolowereventhandle滾動(dòng)到底部/右邊時(shí)觸發(fā)的事件bindscrolleventhandle滾動(dòng)時(shí)觸發(fā)的事件知識(shí)儲(chǔ)備>>接上表1.scroll-view組件知識(shí)儲(chǔ)備1.scroll-view組件在允許橫向滾動(dòng)、縱向滾動(dòng)后，還需要使scroll-view組件中內(nèi)容的寬度和高度大于scroll-view組件本身的寬度和高度，這樣才能滾動(dòng)。在實(shí)際開(kāi)發(fā)中，由于scroll-view組件的默認(rèn)寬度為100%，會(huì)占滿整個(gè)屏幕，所以當(dāng)內(nèi)容的寬度超出屏幕寬度顯示范圍時(shí)，即可橫向滾動(dòng)。若要實(shí)現(xiàn)縱向滾動(dòng)，則需要在樣式中為scroll-view組件設(shè)置一個(gè)固定高度，否則scroll-view組件會(huì)被內(nèi)容撐大，導(dǎo)致無(wú)法縱向滾動(dòng)。步驟1演示scroll-view組件的使用在pages/index/index.wxml文件中編寫頁(yè)面結(jié)構(gòu)。知識(shí)儲(chǔ)備<scroll-viewscroll-x="{{true}}"scroll-y="{{true}}"style="height:200px;"bindscroll="scroll"><viewstyle="width:200%;height:400px;background-image:linear-gradient(tobottomright,red,yellow);"></view></scroll-view>步驟21.scroll-view組件scroll-view組件設(shè)置了允許橫向滾動(dòng)和縱向滾動(dòng)。知識(shí)儲(chǔ)備scroll:function(e){console.log(e.detail)}步驟1步驟2在pages/index/index.js文件中添加scroll()事件處理函數(shù)輸出e.detail的值。1.scroll-view組件演示scroll-view組件的使用通過(guò)e.detail獲取滾動(dòng)時(shí)的位置信息。知識(shí)儲(chǔ)備運(yùn)行程序后，拖曳滾動(dòng)條使scroll()函數(shù)執(zhí)行，然后在控制臺(tái)中查看輸出結(jié)果如下圖。1.scroll-view組件演示scroll-view組件的使用知識(shí)儲(chǔ)備1.scroll-view組件e.detail為自定義事件所攜帶的數(shù)據(jù)，下面對(duì)上圖中獲取到的信息進(jìn)行講解，具體如下。scrollLeft：橫向滾動(dòng)條左側(cè)到視圖左邊的距離。scrollTop：縱向滾動(dòng)條上端到視圖頂部的距離。scrollHeight：縱向滾動(dòng)條在Y軸上最大滾動(dòng)距離。scrollWidth：橫向滾動(dòng)條在X軸上最大的滾動(dòng)距離。deltaX：橫向滾動(dòng)條的滾動(dòng)狀態(tài)。deltaY：縱向滾動(dòng)條的滾動(dòng)狀態(tài)。

先定一個(gè)小目標(biāo)！掌握slider組件，能夠運(yùn)用slider組件完成滑動(dòng)選擇器的制作知識(shí)儲(chǔ)備2.slider組件知識(shí)儲(chǔ)備什么是slider組件?2.slider組件知識(shí)儲(chǔ)備在微信小程序中，通過(guò)slider組件可以定義一個(gè)滑動(dòng)選擇器。slider組件是微信小程序表單組件中的一種，用于滑動(dòng)選擇某一個(gè)值。用戶可以通過(guò)拖曳滑塊在一個(gè)固定區(qū)間內(nèi)進(jìn)行選擇。2.slider組件屬性類型說(shuō)明minnumber最小值，默認(rèn)值為0maxnumber最大值，默認(rèn)值為100stepnumber步長(zhǎng)，取值大于0，可被max-min整除，默認(rèn)值為1valuenumber當(dāng)前取值，默認(rèn)值為0activeColorcolor已選擇的顏色，默認(rèn)值為#1aad19backgroundColorcolor背景條的顏色，默認(rèn)值為#e9e9e9知識(shí)儲(chǔ)備slider組件的常用屬性如下表。

2.slider組件屬性類型說(shuō)明block-sizenumber滑塊的大小，取值范圍為12~28，默認(rèn)值為28block-colorcolor滑塊的顏色，默認(rèn)值為#ffffffshow-valueboolean是否顯示當(dāng)前值，默認(rèn)值為falsebindchangeeventhandle完成一次拖曳后觸發(fā)的事件bindchangingeventhandle拖曳過(guò)程中觸發(fā)的事件知識(shí)儲(chǔ)備>>接上表2.slider組件步驟1演示slider組件的使用在pages/index/index.wxml文件中編寫頁(yè)面結(jié)構(gòu)。知識(shí)儲(chǔ)備<sliderbindchanging="sliderChanging"show-value="true"/>步驟2當(dāng)拖曳slider組件的滑塊時(shí)，會(huì)執(zhí)行sliderChanging()事件處理函數(shù)2.slider組件通過(guò)設(shè)置show-value屬性可將當(dāng)前值顯示出來(lái)知識(shí)儲(chǔ)備sliderChanging:function(e){console.log(e.detail.value)}步驟1步驟2在pages/index/index.js文件中編寫事件處理函數(shù)sliderChanging()。e.detail.value表示當(dāng)前slider組件的值2.slider組件演示slider組件的使用知識(shí)儲(chǔ)備保存代碼后，會(huì)看到頁(yè)面中顯示了一個(gè)滑動(dòng)選擇器。拖曳滑塊到13的頁(yè)面效果如下圖。2.slider組件演示slider組件的使用知識(shí)儲(chǔ)備在控制臺(tái)中可以看到sliderChanging()函數(shù)執(zhí)行時(shí)輸出的當(dāng)前slider值如下圖。2.slider組件演示slider組件的使用

先定一個(gè)小目標(biāo)！掌握<include>標(biāo)簽，能夠運(yùn)用<include>標(biāo)簽引用其他文件中的代碼知識(shí)儲(chǔ)備3.<include>標(biāo)簽知識(shí)儲(chǔ)備什么是<include>標(biāo)簽?3.<include>標(biāo)簽知識(shí)儲(chǔ)備<include>標(biāo)簽用于引用其他文件的代碼，相當(dāng)于把引用的代碼復(fù)制到<include>標(biāo)簽的位置。3.<include>標(biāo)簽知識(shí)儲(chǔ)備<include>標(biāo)簽的用途主要有以下兩點(diǎn)，具體如下。當(dāng)一個(gè)WXML頁(yè)面中的代碼過(guò)多時(shí)，會(huì)給代碼的維護(hù)帶來(lái)麻煩，有時(shí)為了找到某一處代碼可能需要翻閱幾百行。這時(shí)可以利用<include>標(biāo)簽將代碼拆分到多個(gè)文件中，從而可以更方便地查找代碼。當(dāng)多個(gè)WXML頁(yè)面中有相同的部分時(shí)，可以將這些公共部分抽取出來(lái)，保存到一個(gè)單獨(dú)的WXML文件中，然后在用到的地方通過(guò)<include>標(biāo)簽引入。這樣可以減少重復(fù)的代碼，并且修改時(shí)只需要修改一次。3.<include>標(biāo)簽演示<include>標(biāo)簽的使用知識(shí)儲(chǔ)備3.<include>標(biāo)簽實(shí)現(xiàn)思路假設(shè)在index.wxml文件中，頁(yè)面的頭部和尾部是公共部分，可將頭部代碼抽取到header.wxml文件中、尾部代碼抽取到footer.wxml文件中，然后在index.wxml文件中使用<include>標(biāo)簽進(jìn)行引入。步驟1知識(shí)儲(chǔ)備步驟3步驟23.<include>標(biāo)簽演示<include>標(biāo)簽的使用在pages/index/index.wxml文件中編寫頁(yè)面結(jié)構(gòu)。<!--index.wxml--><includesrc="header.wxml"/><view>body</view><includesrc="footer.wxml"/>在pages/index/header.wxml文件中編寫頭部的頁(yè)面結(jié)構(gòu)。知識(shí)儲(chǔ)備<view>header</view>步驟1步驟3步驟23.<include>標(biāo)簽演示<include>標(biāo)簽的使用知識(shí)儲(chǔ)備步驟1步驟3步驟23.<include>標(biāo)簽演示<include>標(biāo)簽的使用在pages/index/footer.wxml文件中編寫尾部的頁(yè)面結(jié)構(gòu)。<view>footer</view>知識(shí)儲(chǔ)備3.<include>標(biāo)簽演示<include>標(biāo)簽的使用當(dāng)上述代碼運(yùn)行后，實(shí)際得到的pages/index/index.wxml文件的頁(yè)面結(jié)構(gòu)如下所示。<view>header</view><view>body</view><view>footer</view>

先定一個(gè)小目標(biāo)！掌握背景音頻API，能夠運(yùn)用背景音頻API實(shí)現(xiàn)音頻后臺(tái)播放、音頻暫停等功能知識(shí)儲(chǔ)備4.背景音頻API知識(shí)儲(chǔ)備什么是背景音頻API？4.背景音頻API知識(shí)儲(chǔ)備在微信小程序中，使用背景音頻API可以實(shí)現(xiàn)音頻的后臺(tái)播放。4.背景音頻API知識(shí)儲(chǔ)備在使用背景音頻API前，需要在app.json文件中配置requiredBackgroundModes屬性，開(kāi)啟微信小程序后臺(tái)音頻播放功能，示例代碼如下。"requiredBackgroundModes":["audio"]requiredBackgroundModes屬性值為數(shù)組類型，在數(shù)組中添加audio項(xiàng)表示開(kāi)啟后臺(tái)音頻播放功能。4.背景音頻API知識(shí)儲(chǔ)備背景音頻API的使用方法如下：第一步：通過(guò)wx.getBackgroundAudioManager()方法獲取到一個(gè)BackgroundAudioManager實(shí)例；第二步：通過(guò)BackgroundAudioManager實(shí)例的相關(guān)屬性和方法實(shí)現(xiàn)背景音頻的播放。varaudioGbam=wx.getBackgroundAudioManager()BackgroundAudioManager實(shí)例（也是一個(gè)對(duì)象）4.背景音頻API類型名稱說(shuō)明屬性src背景音頻的數(shù)據(jù)源，默認(rèn)值為空字符串，當(dāng)設(shè)置了新的src時(shí)，會(huì)自動(dòng)開(kāi)始播放，目前支持的格式有M4A、AAC、MP3、WAVstartTime背景音頻開(kāi)始播放的位置（單位：秒）title背景音頻標(biāo)題，用于原生音頻播放器的背景音頻標(biāo)題playbackRate播放速率，范圍0.5~2.0倍，默認(rèn)值為1倍duration當(dāng)前背景音頻的長(zhǎng)度（單位：秒），只有在有合法src時(shí)有效（只讀）currentTime當(dāng)前背景音頻的播放位置（單位：秒），只有在有合法src時(shí)有效（只讀）paused當(dāng)前是否暫停或停止（只讀）知識(shí)儲(chǔ)備BackgroundAudioManager實(shí)例常用的屬性和方法如下表。

4.背景音頻API類型名稱說(shuō)明方法play()播放背景音頻pause()暫停背景音頻seek()跳轉(zhuǎn)到指定位置stop()停止背景音頻onCanplay()背景音頻進(jìn)入可以播放狀態(tài)的事件（參數(shù)為回調(diào)函數(shù)）onWaiting()監(jiān)聽(tīng)背景音頻加載中事件，當(dāng)背景音頻因?yàn)閿?shù)據(jù)不足需要停下來(lái)加載時(shí)會(huì)觸發(fā)onError()監(jiān)聽(tīng)背景音頻播放錯(cuò)誤事件知識(shí)儲(chǔ)備>>接上表4.背景音頻API類型名稱說(shuō)明方法onPlay()監(jiān)聽(tīng)背景音頻播放事件onPause()監(jiān)聽(tīng)背景音頻暫停事件onSeeking()監(jiān)聽(tīng)背景音頻開(kāi)始跳轉(zhuǎn)操作事件onSeeked()監(jiān)聽(tīng)背景音頻完成跳轉(zhuǎn)操作事件onEnded()監(jiān)聽(tīng)背景音頻自然播放結(jié)束事件onStop()監(jiān)聽(tīng)背景音頻停止事件onTimeUpdate()監(jiān)聽(tīng)背景音頻播放進(jìn)度更新事件，只有微信小程序在前臺(tái)時(shí)會(huì)回調(diào)知識(shí)儲(chǔ)備>>接上表4.背景音頻API演示背景音頻API的使用在pages/index/index.js文件中的onReady()函數(shù)中編寫如下代碼。知識(shí)儲(chǔ)備onReady:function(){//創(chuàng)建BackgroundAudioManager實(shí)例varaudio=wx.getBackgroundAudioManager()//當(dāng)開(kāi)始播放音樂(lè)時(shí)，輸出調(diào)試信息audio.onPlay(function(){console.log('開(kāi)始播放')})//設(shè)置背景音頻的標(biāo)題audio.title='音樂(lè)標(biāo)題'//設(shè)置背景音頻的資源地址audio.src=':3000/1.mp3'}4.背景音頻API

先定一個(gè)小目標(biāo)！掌握“音樂(lè)播放器”微信小程序的準(zhǔn)備工作，能夠成功搭建小程序目錄結(jié)構(gòu)案例實(shí)現(xiàn)1.準(zhǔn)備工作案例實(shí)現(xiàn)1在微信開(kāi)發(fā)者工具中創(chuàng)建一個(gè)新的微信小程序項(xiàng)目，項(xiàng)目名稱為“音樂(lè)播放器”，模板選擇“不使用模板”。創(chuàng)建項(xiàng)目2項(xiàng)目創(chuàng)建完成后，在app.json文件中配置pages/index/info.wxml、pages/index/play.wxml、pages/index/playlist.wxml頁(yè)面。配置頁(yè)面3在pages/index/index.json文件中配置頁(yè)面導(dǎo)航欄。配置導(dǎo)航欄1.準(zhǔn)備工作案例實(shí)現(xiàn)4復(fù)制素材從本書配套源代碼中找到本案例，復(fù)制pages/index/index.wxss文件和images文件夾到本項(xiàng)目中。啟動(dòng)服務(wù)器從本書配套資源中找到本案例的源代碼，進(jìn)入“服務(wù)器端”文件夾，該文件夾下的內(nèi)容為Node.js本地HTTP服務(wù)器程序。打開(kāi)命令提示符，切換工作目錄到當(dāng)前目錄，然后在命令提示符中執(zhí)行命令nodeindex.js，啟動(dòng)服務(wù)器。51.準(zhǔn)備工作案例實(shí)現(xiàn)“音樂(lè)播放器”微信小程序的目錄結(jié)構(gòu)1.準(zhǔn)備工作

先定一個(gè)小目標(biāo)！掌握“音樂(lè)播放器”微信微信小程序頁(yè)面結(jié)構(gòu)的實(shí)現(xiàn)，能夠完成頁(yè)面結(jié)構(gòu)的代碼編寫案例實(shí)現(xiàn)2.實(shí)現(xiàn)“音樂(lè)播放器”微信小程序的頁(yè)面結(jié)構(gòu)案例實(shí)現(xiàn)編寫“音樂(lè)播放器”微信小程序的頁(yè)面結(jié)構(gòu)2.實(shí)現(xiàn)“音樂(lè)播放器”頁(yè)面結(jié)構(gòu)2.實(shí)現(xiàn)“音樂(lè)播放器”微信小程序的頁(yè)面結(jié)構(gòu)

先定一個(gè)小目標(biāo)！掌握標(biāo)簽頁(yè)切換功能的實(shí)現(xiàn)，能夠完成標(biāo)簽頁(yè)切換的代碼編寫案例實(shí)現(xiàn)3.實(shí)現(xiàn)標(biāo)簽頁(yè)切換案例實(shí)現(xiàn)實(shí)現(xiàn)步驟在“音樂(lè)播放器”微信小程序中，可以通過(guò)點(diǎn)擊標(biāo)簽欄區(qū)域的標(biāo)簽按鈕切換到對(duì)應(yīng)的標(biāo)簽頁(yè)，具體實(shí)現(xiàn)步驟如下。在pages/index/index.wxml文件中修改標(biāo)簽欄區(qū)域；修改內(nèi)容區(qū)域；在pages/index/index.js文件中編寫頁(yè)面中所需的數(shù)據(jù)和changeItem()事件處理函數(shù)；3.實(shí)現(xiàn)標(biāo)簽頁(yè)切換案例實(shí)現(xiàn)實(shí)現(xiàn)步驟在切換標(biāo)簽頁(yè)后，還需要改變當(dāng)前標(biāo)簽頁(yè)對(duì)應(yīng)的標(biāo)簽欄中標(biāo)簽按鈕的樣式，將當(dāng)前標(biāo)簽頁(yè)對(duì)應(yīng)的標(biāo)簽按鈕設(shè)為active樣式。為此，需要修改pages/index/index.wxml文件中的內(nèi)容區(qū)域，通過(guò)給swiper組件綁定change事件感知到標(biāo)簽頁(yè)的變化；在pages/index/index.js文件的data數(shù)據(jù)中添加tab屬性，并通過(guò)changeTab()事件處理函數(shù)設(shè)置tab屬性的值；修改pages/index/index.wxml文件中的標(biāo)簽欄區(qū)域。3.實(shí)現(xiàn)標(biāo)簽頁(yè)切換

先定一個(gè)小目標(biāo)！掌握“音樂(lè)推薦”標(biāo)簽頁(yè)的實(shí)現(xiàn)，能夠完成“音樂(lè)推薦”標(biāo)簽頁(yè)的代碼編寫案例實(shí)現(xiàn)4.實(shí)現(xiàn)“音樂(lè)推薦”標(biāo)簽頁(yè)案例實(shí)現(xiàn)“音樂(lè)推薦”是內(nèi)容區(qū)域中的第1個(gè)標(biāo)簽頁(yè)，對(duì)應(yīng)swiper-item組件的索引為0，該頁(yè)面由3個(gè)部分組成，分別是輪播圖、功能按鈕、推薦歌曲。由于內(nèi)容區(qū)域的可視高度是有限的，而“音樂(lè)推薦”標(biāo)簽頁(yè)的實(shí)際頁(yè)面內(nèi)容可能會(huì)超出內(nèi)容區(qū)域的可視高度，因此需要將“音樂(lè)推薦”標(biāo)簽頁(yè)放入可滾動(dòng)的容器中?！耙魳?lè)推薦”標(biāo)簽頁(yè)的實(shí)現(xiàn)思路4.實(shí)現(xiàn)“音樂(lè)推薦”標(biāo)簽頁(yè)案例實(shí)現(xiàn)實(shí)現(xiàn)步驟在pages/index/info.wxml文件中刪除原有代碼，然后創(chuàng)建一個(gè)滾動(dòng)區(qū)域；“音樂(lè)推薦“標(biāo)簽頁(yè)的頂部區(qū)域?yàn)檩啿D，切換效果通過(guò)swiper組件實(shí)現(xiàn)。在pages/index/info.wxml文件中編寫輪播圖的頁(yè)面結(jié)構(gòu)，首先需刪除原有代碼，然后再進(jìn)行編寫；在輪播圖代碼段下方編寫功能按鈕的頁(yè)面結(jié)構(gòu)；在功能按鈕代碼段下方編寫推薦歌曲的頁(yè)面結(jié)構(gòu)。4.實(shí)現(xiàn)“音樂(lè)推薦”標(biāo)簽頁(yè)

先定一個(gè)小目標(biāo)！掌握“播放器”標(biāo)簽頁(yè)的實(shí)現(xiàn)，能夠完成“播放器”標(biāo)簽頁(yè)的代碼編寫案例實(shí)現(xiàn)5.實(shí)現(xiàn)“播放器”標(biāo)簽頁(yè)案例實(shí)現(xiàn)“播放器”是內(nèi)容區(qū)域中的第2個(gè)標(biāo)簽頁(yè)，對(duì)應(yīng)swiper-item組件的索引為1，該頁(yè)面由3個(gè)部分組成，分別是音樂(lè)信息、專輯封面和播放進(jìn)度。“播放器”標(biāo)簽頁(yè)的實(shí)現(xiàn)思路5.實(shí)現(xiàn)“播放器”標(biāo)簽頁(yè)案例實(shí)現(xiàn)實(shí)現(xiàn)步驟在pages/index/index.js文件的data對(duì)象中定義播放列表數(shù)組playlist；在data中定義一些狀態(tài)屬性，用來(lái)記錄音樂(lè)的播放狀態(tài)等信息；pages/index/index.js文件中編寫代碼，實(shí)現(xiàn)在頁(yè)面初次渲染時(shí)，自動(dòng)選擇播放列表中的第1個(gè)曲目；編寫setMusic()函數(shù)，實(shí)現(xiàn)設(shè)置當(dāng)前播放的曲目；在app.json文件中添加requiredBackgroundModes配置項(xiàng)；在pages/index/play.wxml文件中刪除原有代碼，然后編寫“播放器”標(biāo)簽頁(yè)的頁(yè)面結(jié)構(gòu)。5.實(shí)現(xiàn)“播放器”標(biāo)簽頁(yè)

先定一個(gè)小目標(biāo)！掌握播放器區(qū)域的實(shí)現(xiàn)，能夠完成播放器區(qū)域的代碼編寫案例實(shí)現(xiàn)6.實(shí)現(xiàn)播放器區(qū)域案例實(shí)現(xiàn)首先編寫播放器區(qū)域的整體結(jié)構(gòu)，然后實(shí)現(xiàn)播放、暫停、下一曲的功能，其中播放和暫停功能使用同一個(gè)按鈕實(shí)現(xiàn)。播放器區(qū)域的實(shí)現(xiàn)思路6.實(shí)現(xiàn)播放器區(qū)域案例實(shí)現(xiàn)實(shí)現(xiàn)步驟在pages/index/index.wxml文件中編寫頁(yè)面播放器區(qū)域的代碼，將當(dāng)前播放的曲目信息顯示在播放器中；為了實(shí)現(xiàn)點(diǎn)擊播放按鈕播放音樂(lè)，再次點(diǎn)擊為暫停音樂(lè)的效果，修改播放器區(qū)域中的播放區(qū)域；在pages/index/index.js文件中編寫事件處理函數(shù)play()和pause()；修改“下一曲”圖片按鈕的代碼；編寫事件處理函數(shù)next()函數(shù)，實(shí)現(xiàn)點(diǎn)擊播放進(jìn)行下一曲的操作。6.實(shí)現(xiàn)播放器區(qū)域

先定一個(gè)小目標(biāo)！掌握播放進(jìn)度的控制功能的實(shí)現(xiàn)，能夠完成播放進(jìn)度的控制功能的代碼編寫案例實(shí)現(xiàn)7.實(shí)現(xiàn)播放進(jìn)度的控制案例實(shí)現(xiàn)在“播放器”標(biāo)簽頁(yè)的底部有播放進(jìn)度和時(shí)間區(qū)域，用于顯示播放進(jìn)度。播放進(jìn)度的控制的實(shí)現(xiàn)思路7.實(shí)現(xiàn)播放進(jìn)度的控制案例實(shí)現(xiàn)實(shí)現(xiàn)步驟在pages/index/play.wxml文件中編寫播放進(jìn)度和時(shí)間區(qū)域的頁(yè)面結(jié)構(gòu)；在pages/index/index.js文件中控制進(jìn)度條的進(jìn)度和時(shí)間的顯示；在Page()函數(shù)前定義一個(gè)formatTime()函數(shù)；在Page({})中編寫sliderChangeLock屬性、sliderChanging()函數(shù)和sliderChange()函數(shù)。7.實(shí)現(xiàn)播放進(jìn)度的控制

先定一個(gè)小目標(biāo)！掌握“播放列表”標(biāo)簽頁(yè)的實(shí)現(xiàn)，能夠完成“播放列表”標(biāo)簽頁(yè)的代碼編寫案例實(shí)現(xiàn)8.實(shí)現(xiàn)“播放列表”標(biāo)簽頁(yè)案例實(shí)現(xiàn)“播放列表”是內(nèi)容區(qū)域中的第3個(gè)標(biāo)簽頁(yè)，對(duì)應(yīng)swiper-item組件的索引為2，該頁(yè)面顯示當(dāng)前播放的曲目列表。“播放列表”標(biāo)簽頁(yè)的實(shí)現(xiàn)思路8.實(shí)現(xiàn)“播放列表”標(biāo)簽頁(yè)案例實(shí)現(xiàn)實(shí)現(xiàn)步驟在pages/index/playlist.wxml文件中編寫“播放列表”標(biāo)簽頁(yè)的頁(yè)面結(jié)構(gòu)；在pages/index/index.js文件中編寫change()函數(shù)，實(shí)現(xiàn)點(diǎn)擊播放列表中的某一項(xiàng)時(shí)進(jìn)行該曲目的播放。8.實(shí)現(xiàn)“播放列表”標(biāo)簽頁(yè)【案例4-2】錄音機(jī)02案例分析錄音機(jī)是生活中的常用工具，它可以在開(kāi)會(huì)的時(shí)候記錄說(shuō)話人的聲音，也可以在生活中留下一段美妙歌聲。錄音機(jī)可以記錄聲音和播放聲音，因此成為新聞工作者工作的重要器材?！颁浺魴C(jī)”微信小程序的頁(yè)面效果如右圖所示。案例分析“錄音機(jī)”微信小程序頁(yè)面分為頂部區(qū)域和按鈕控制區(qū)域。頂部區(qū)域展示錄音時(shí)長(zhǎng)；按鈕控制區(qū)域中從左到右的3個(gè)按鈕分別是“播放錄音”按鈕、“開(kāi)始/暫停錄音”按鈕和“停止錄音”按鈕，這3個(gè)按鈕分別實(shí)現(xiàn)播放錄音、開(kāi)始或暫停錄音、停止錄音的功能。

先定一個(gè)小目標(biāo)！掌握錄音API，能夠運(yùn)用錄音API實(shí)現(xiàn)錄音功能知識(shí)儲(chǔ)備1.錄音API知識(shí)儲(chǔ)備什么是錄音API？1.錄音API知識(shí)儲(chǔ)備錄音功能在日常生活中使用很廣泛，使用該功能可以記錄重要的工作內(nèi)容、優(yōu)美的歌聲等。那么在微信小程序中如何實(shí)現(xiàn)錄音功能呢？微信小程序?yàn)殚_(kāi)發(fā)者提供了錄音API。1.錄音API知識(shí)儲(chǔ)備錄音API的使用方法如下：第一步：通過(guò)wx.getRecorderManager()方法獲取到一個(gè)RecorderManager實(shí)例，該實(shí)例是一個(gè)全局唯一的錄音管理器，用于實(shí)現(xiàn)錄音功能；第二步：通過(guò)RecorderManager實(shí)例的方法實(shí)現(xiàn)錄音功能。varrecorderManager=wx.getRecorderManager()RecorderManager實(shí)例（也是一個(gè)對(duì)象）1.錄音API方法名稱說(shuō)明start()開(kāi)始錄音pause()暫停錄音resume()繼續(xù)錄音stop()停止錄音onStart()監(jiān)聽(tīng)錄音開(kāi)始事件onResume()監(jiān)聽(tīng)錄音繼續(xù)事件onPause()監(jiān)聽(tīng)錄音暫停事件onStop()監(jiān)聽(tīng)錄音結(jié)束事件知識(shí)儲(chǔ)備RecorderManager實(shí)例的常用方法如下表。

1.錄音API方法名稱說(shuō)明onFrameRecored()監(jiān)聽(tīng)已錄制完指定幀大小的文件事件。如果設(shè)置了frameSize，則會(huì)回調(diào)此事件onError()監(jiān)聽(tīng)錄音錯(cuò)誤事件onInterruptionBegin()監(jiān)聽(tīng)錄音因?yàn)橄到y(tǒng)占用而被中斷開(kāi)始事件。以下場(chǎng)景會(huì)觸發(fā)此事件：微信語(yǔ)音聊天、微信視頻聊天，此事件觸發(fā)后，錄音會(huì)被暫停。pause事件在此事件后觸發(fā)onInterruptionEnd()監(jiān)聽(tīng)錄音中斷結(jié)束事件。在收到interruptionBegin事件后，微信小程序內(nèi)所有錄音會(huì)暫停，收到此事件之后才可再次錄音成功知識(shí)儲(chǔ)備>>接上表1.錄音API演示錄音API的使用在pages/index/index.js文件中的onReady()函數(shù)中編寫如下代碼。知識(shí)儲(chǔ)備//獲取全局唯一的錄音管理器RecorderManagervarrecorderManager=wx.getRecorderManager()//監(jiān)聽(tīng)錄音開(kāi)始事件recorderManager.onStart(()=>{console.log('錄音開(kāi)始');})1.錄音API演示錄音API的使用知識(shí)儲(chǔ)備//監(jiān)聽(tīng)錄音停止事件recorderManager.onStop(res=>{console.log('錄音停止')console.log(res.tempFilePath)})//開(kāi)始錄音recorderManager.start()//5秒后自動(dòng)停止錄音setTimeout(()=>{recorderManager.stop()},5000)1.錄音API

先定一個(gè)小目標(biāo)！掌握音頻API，能夠運(yùn)用音頻API實(shí)現(xiàn)音頻播放、暫停等功能知識(shí)儲(chǔ)備2.音頻API知識(shí)儲(chǔ)備什么是音頻API？2.音頻API知識(shí)儲(chǔ)備在微信小程序中，除了背景音頻API可以實(shí)現(xiàn)播放音頻的功能外，還可以通過(guò)音頻API來(lái)播放音樂(lè)。背景音頻API與音頻API的區(qū)別在于背景音頻API支持后臺(tái)播放，而音頻API不支持后臺(tái)播放。2.音頻API知識(shí)儲(chǔ)備音頻API的使用方法如下：第一步：通過(guò)wx.createInnerAudioContext()方法獲取到一個(gè)InnerAudioContext實(shí)例；第二步：通過(guò)InnerAudioContext實(shí)例的屬性和方法實(shí)現(xiàn)音頻播放功能。varaudioCtx=wx.createInnerAudioContext()InnerAudioContext實(shí)例（也是一個(gè)對(duì)象）2.音頻API類型名稱說(shuō)明屬性autoplay是否自動(dòng)開(kāi)始播放，默認(rèn)值為falseloop是否循環(huán)播放，默認(rèn)值為falsevolume音量，范圍0~1，默認(rèn)值為1方法destroy()銷毀當(dāng)前實(shí)例知識(shí)儲(chǔ)備InnerAudioContext實(shí)例常用的屬性和方法與BackgroundAudioManager實(shí)例常用的屬性和方法相同，但是InnerAudioContext實(shí)例沒(méi)有title屬性。InnerAudioContext實(shí)例特有的屬性和方法如下表。

2.音頻API演示音頻API的使用在pages/index/index.js文件中的onReady()函數(shù)中編寫如下代碼。知識(shí)儲(chǔ)備//創(chuàng)建InnerAudioContext實(shí)例varaudioCtx=wx.createInnerAudioContext()//設(shè)置音頻資源地址audioCtx.src=':3000/1.mp3'//當(dāng)開(kāi)始播放音頻時(shí)，輸出調(diào)試信息audioCtx.onPlay(()=>{console.log('開(kāi)始播放')})//開(kāi)始播放audioCtx.play()2.音頻API

先定一個(gè)小目標(biāo)！掌握“錄音機(jī)”微信小程序的準(zhǔn)備工作，能夠成功搭建小程序目錄結(jié)構(gòu)案例實(shí)現(xiàn)1.準(zhǔn)備工作案例實(shí)現(xiàn)1在微信開(kāi)發(fā)者工具中創(chuàng)建一個(gè)新的微信小程序項(xiàng)目，項(xiàng)目名稱為“錄音機(jī)”，模板選擇“不使用模板”。創(chuàng)建項(xiàng)目2在pages/index/index.json文件中配置頁(yè)面導(dǎo)航欄。配置導(dǎo)航欄3復(fù)制素材從本書配套源代碼中找到本案例，復(fù)制pages/index/index.wxss文件和utils文件夾到本項(xiàng)目中。1.準(zhǔn)備工作案例實(shí)現(xiàn)“錄音機(jī)”微信小程序的目錄結(jié)構(gòu)1.準(zhǔn)備工作

先定一個(gè)小目標(biāo)！掌握錄音功能的初始化，能夠完成初始化錄音功能的代碼編寫案例實(shí)現(xiàn)2.初始化錄音功能案例實(shí)現(xiàn)實(shí)現(xiàn)步驟在pages/index/index.js文件的Page()函數(shù)前編寫獲取RecorderManager實(shí)例并監(jiān)聽(tīng)錄音結(jié)束事件；在Page({})中定義頁(yè)面中所需的數(shù)據(jù)。2.初始化錄音功能

先定一個(gè)小目標(biāo)！掌握“錄音機(jī)”微信小程序頁(yè)面結(jié)構(gòu)的實(shí)現(xiàn)，能夠完成頁(yè)面結(jié)構(gòu)的代碼編寫案例實(shí)現(xiàn)3.實(shí)現(xiàn)“錄音機(jī)”微信小程序的頁(yè)面結(jié)構(gòu)案例實(shí)現(xiàn)編寫“錄音機(jī)”微信小程序的頁(yè)面結(jié)構(gòu)3.實(shí)現(xiàn)“錄音機(jī)”微信小程序的頁(yè)面結(jié)構(gòu)

先定一個(gè)小目標(biāo)！掌握錄音功能的實(shí)現(xiàn)，能夠完成錄音功能的代碼編寫案例實(shí)現(xiàn)4.實(shí)現(xiàn)錄音功能案例實(shí)現(xiàn)實(shí)現(xiàn)步驟在pages/index/index.js文件的開(kāi)頭位置引入timer模塊，用于對(duì)錄音時(shí)間進(jìn)行計(jì)時(shí)；在Page({})中編寫rec()函數(shù)，實(shí)現(xiàn)開(kāi)始或暫停錄音；在Page({})中編寫stop()函數(shù)，實(shí)現(xiàn)停止錄音。4.實(shí)現(xiàn)錄音功能

先定一個(gè)小目標(biāo)！掌握播放錄音功能的實(shí)現(xiàn)，能夠完成播放錄音功能的代碼編寫案例實(shí)現(xiàn)5.實(shí)現(xiàn)播放錄音功能案例實(shí)現(xiàn)實(shí)現(xiàn)步驟在pages/index/index.js文件的開(kāi)頭位置獲取InnerAudioContext實(shí)例；在Page({})中編寫play()函數(shù)，實(shí)現(xiàn)播放錄音；當(dāng)錄音處于開(kāi)始錄制或者暫停錄制時(shí)，應(yīng)該先自動(dòng)停止錄音，并在停止錄音后，執(zhí)行播放錄音的代碼，找到rec.onStop()代碼進(jìn)行修改；在play()函數(shù)中編寫第1種情況的代碼。5.實(shí)現(xiàn)播放錄音功能【案例4-3】頭像上傳下載03案例分析頭像上傳下載是微信小程序開(kāi)發(fā)中常見(jiàn)的一個(gè)功能，一般會(huì)出現(xiàn)在用戶中心模塊中，用于設(shè)置用戶的頭像。“頭像上傳下載”微信小程序的頁(yè)面效果如右圖所示。案例分析“頭像上傳下載”微信小程序展示了頭像信息，并提供了3個(gè)按鈕，依次為“更改頭像”“頭像上傳”“頭像下載”。點(diǎn)擊“更改頭像”按鈕，可以重新選擇頭像圖片；點(diǎn)擊“頭像上傳”按鈕，可以將頭像上傳到服務(wù)器；點(diǎn)擊“頭像下載”按鈕，可以從服務(wù)器中下載頭像圖片并預(yù)覽。

先定一個(gè)小目標(biāo)！掌握選擇媒體API，能夠運(yùn)用wx.chooseMedia()方法選擇圖片或視頻知識(shí)儲(chǔ)備1.選擇媒體API知識(shí)儲(chǔ)備什么是選擇媒體API?1.選擇媒體API知識(shí)儲(chǔ)備微信小程序提供了選擇媒體API，其用于選擇圖片或視頻，一般用于上傳頭像、上傳照片和上傳視頻等功能中。通過(guò)調(diào)用wx.chooseMedia()方法即可使用選擇媒體API，該方法執(zhí)行后，會(huì)提示用戶拍攝圖片或視頻，或從手機(jī)相冊(cè)中選擇圖片或視頻。1.選擇媒體API選項(xiàng)類型說(shuō)明countnumber最多可以選擇的文件個(gè)數(shù)，默認(rèn)值為9mediaTypeArray.<string>文件類型，默認(rèn)值為['image','video']sourceTypeArray.<string>圖片和視頻選擇的來(lái)源，默認(rèn)值為['album','camera']maxDurationnumber拍攝視頻最長(zhǎng)拍攝時(shí)間，單位秒。時(shí)間范圍為3~60秒之間。不限制相冊(cè)，默認(rèn)值為10camerastring僅在sourceType為camera時(shí)生效，可設(shè)置使用前置或后置攝像頭，默認(rèn)值為backsuccessfunction接口調(diào)用成功的回調(diào)函數(shù)failfunction接口調(diào)用失敗的回調(diào)函數(shù)completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）知識(shí)儲(chǔ)備wx.chooseMedia()方法的常用選項(xiàng)如下表。

1.選擇媒體API知識(shí)儲(chǔ)備mediaType選項(xiàng)的合法值有3個(gè)：image（只能拍攝圖片或從相冊(cè)選擇圖片）；video（只能拍攝視頻或從相冊(cè)選擇視頻）；mix（可同時(shí)選擇圖片和視頻）。sourceType選項(xiàng)的合法值有2個(gè)：album（從相冊(cè)選擇）；camera（使用相機(jī)拍攝）。1.選擇媒體API步驟1演示選擇媒體API的使用在pages/index/index.wxml文件中編寫頁(yè)面結(jié)構(gòu)。知識(shí)儲(chǔ)備<buttonbindtap="test">選擇圖片</button>步驟21.選擇媒體API為按鈕綁定了test()函數(shù)知識(shí)儲(chǔ)備test:function(){wx.chooseMedia({count:9,

//最多可以選擇9個(gè)文件mediaType:['image'],

//文件類型為只能拍攝圖片或從相冊(cè)中選圖片sourceType:['album','camera'],//圖片來(lái)源為從相冊(cè)選擇和使用相機(jī)拍攝success(res){//獲取用戶選擇的文件consttempFilePath=res.tempFiles[0].tempFilePathconsole.log(tempFilePath)}})}步驟1步驟2在pages/index/index.js文件中編寫事件處理函數(shù)test()。1.選擇媒體API演示選擇媒體API的使用

先定一個(gè)小目標(biāo)！掌握?qǐng)D片預(yù)覽API，能夠運(yùn)用wx.previewImage()方法預(yù)覽圖片知識(shí)儲(chǔ)備2.圖片預(yù)覽API知識(shí)儲(chǔ)備什么是圖片預(yù)覽API?2.圖片預(yù)覽API知識(shí)儲(chǔ)備微信小程序提供了圖片預(yù)覽API，通過(guò)圖片預(yù)覽API可以預(yù)覽圖片，且在預(yù)覽過(guò)程中用戶可以進(jìn)行保存圖片、發(fā)送給朋友等操作。通過(guò)調(diào)用wx.previewImage()方法即可使用預(yù)覽圖片API。2.圖片預(yù)覽API選項(xiàng)類型說(shuō)明urlsArray.<string>需要預(yù)覽的圖片鏈接，為必填項(xiàng)，默認(rèn)值為""showmenuboolean是否顯示長(zhǎng)按菜單，默認(rèn)值為truecurrentstring當(dāng)前顯示圖片的鏈接，默認(rèn)值為urls的第一張successfunction接口調(diào)用成功的回調(diào)函數(shù)failfunction接口調(diào)用失敗的回調(diào)函數(shù)completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）知識(shí)儲(chǔ)備wx.previewImage()方法的常用選項(xiàng)如下表。

urls選項(xiàng)支持http或者h(yuǎn)ttps協(xié)議的網(wǎng)絡(luò)圖片地址，如果使用本地圖片進(jìn)行預(yù)覽，會(huì)出現(xiàn)黑屏加載不出圖片的情況。2.圖片預(yù)覽API步驟1知識(shí)儲(chǔ)備步驟3步驟2演示如何通過(guò)wx.previewImage()方法預(yù)覽圖片在pages/index/index.js文件的Page({})中定義頁(yè)面所需的數(shù)據(jù)。data:{url:':3000/tree.jpg'},定義了url屬性，表示圖片地址，該圖片來(lái)自本地服務(wù)器2.圖片預(yù)覽API知識(shí)儲(chǔ)備步驟1步驟3步驟2演示如何通過(guò)wx.previewImage()方法預(yù)覽圖片在pages/index/index.wxml文件中編寫頁(yè)面結(jié)構(gòu)。<imagesrc="{{url}}"bindtap="previewImage"/>為image組件綁定tap事件，事件處理函數(shù)為previewImage()函數(shù)，點(diǎn)擊按鈕可實(shí)現(xiàn)圖片的預(yù)覽2.圖片預(yù)覽API知識(shí)儲(chǔ)備步驟1步驟3步驟2在pages/index/index.js文件的Page({})中添加previewImage()函數(shù)，實(shí)現(xiàn)圖片的預(yù)覽。previewImage(){wx.previewImage({urls:[this.data.url//需要預(yù)覽的圖片鏈接列表

]})}演示如何通過(guò)wx.previewImage()方法預(yù)覽圖片2.圖片預(yù)覽API知識(shí)儲(chǔ)備運(yùn)行程序，單擊圖片前后的對(duì)比如下圖所示。演示如何通過(guò)wx.previewImage()方法預(yù)覽圖片2.圖片預(yù)覽API

先定一個(gè)小目標(biāo)！掌握文件上傳API，能夠?qū)崿F(xiàn)將本地資源上傳到服務(wù)器中知識(shí)儲(chǔ)備3.文件上傳API知識(shí)儲(chǔ)備什么是文件上傳API？3.文件上傳API知識(shí)儲(chǔ)備在生活中，經(jīng)常需要進(jìn)行文件上傳操作，例如更改頭像需要將新的頭像上傳到服務(wù)器中。微信小程序提供了文件上傳API，使用文件上傳API可以在微信小程序中發(fā)起一個(gè)POST請(qǐng)求，將本地資源上傳到服務(wù)器。通過(guò)調(diào)用wx.uploadFile()方法即可使用文件上傳API。3.文件上傳API選項(xiàng)類型說(shuō)明urlstring開(kāi)發(fā)者服務(wù)器地址，該項(xiàng)為必填項(xiàng)headerobjectHTTP請(qǐng)求的Header，Header中不能設(shè)置Referertimeoutnumber超時(shí)時(shí)間，單位為毫秒namestring文件對(duì)應(yīng)的key，開(kāi)發(fā)者在服務(wù)器端可以通過(guò)這個(gè)key獲取文件的二進(jìn)制內(nèi)容，該項(xiàng)為必填項(xiàng)filePathstring要上傳的文件資源的路徑（本地路徑），該項(xiàng)為必填項(xiàng)successfunction接口調(diào)用成功的回調(diào)函數(shù)failfunction接口調(diào)用失敗的回調(diào)函數(shù)completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)（接口調(diào)用成功、失敗都會(huì)執(zhí)行）知識(shí)儲(chǔ)備wx.uploadFile()方法的常用選項(xiàng)，具體如下。

3.文件上傳API演示文件上傳API的使用知識(shí)儲(chǔ)備wx.uploadFile({filePath:'文件路徑',name:'image',url:':3000/upload',success:res=>{console.log(res)}})3.文件上傳API

先定一個(gè)小目標(biāo)！掌握文件下載API，能夠運(yùn)用wx.downloadFile()方法實(shí)現(xiàn)資源文件的下載

知識(shí)儲(chǔ)備4.文件下載API知識(shí)儲(chǔ)備什么是文件下載API？4.文件下載API知識(shí)儲(chǔ)備在生活中，經(jīng)常需要下載一些文件，例如將網(wǎng)絡(luò)中某個(gè)參考資料下載到本地進(jìn)行查看。微信小程序提供了文件下載API，使用文件下載API可以實(shí)現(xiàn)文件下載功能。通過(guò)調(diào)用wx.downloadFile()方法即可使用文件下載API。4.文件下載API選項(xiàng)類型說(shuō)明urlstring下載資源url，該項(xiàng)為必填項(xiàng)headerobjectHTTP請(qǐng)求的Header，Header中不能設(shè)置Referertimeoutnumber超時(shí)時(shí)間，單位為毫秒filePathstring指定文件下載后存儲(chǔ)的路徑（本地路徑）successfunction接口調(diào)用成功的回調(diào)函數(shù)failfunction接口調(diào)用失敗的回調(diào)函數(shù)completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)（接口調(diào)用成功、失敗都會(huì)執(zhí)行）知識(shí)儲(chǔ)備wx.downloadFile()方法的常用選項(xiàng)如下表。

4.文件下載API演示文件下載API的使用知識(shí)儲(chǔ)備wx.downloadFile({url:':3000/tree.jpg',success:res=>{//判斷服務(wù)器響應(yīng)的狀態(tài)碼if(res.statusCode===200){console.log(res.tempFilePath)}}})4.文件下載API

先定一個(gè)小目標(biāo)！掌握“頭像上傳下載”微信小程序的準(zhǔn)備工作，能夠成功搭建小程序目錄結(jié)構(gòu)案例實(shí)現(xiàn)1.準(zhǔn)備工作1在微信開(kāi)發(fā)者工具中創(chuàng)建一個(gè)新的微信小程序項(xiàng)目，項(xiàng)目名稱為“頭像上傳下載”，模板選擇“不使用模板”。創(chuàng)建項(xiàng)目案例實(shí)現(xiàn)23在pages/index/index.json文件中配置頁(yè)面導(dǎo)航欄。配置導(dǎo)航欄4從本書配套資源中找到本案例的源代碼，進(jìn)入“服務(wù)器端”文件夾。打開(kāi)命令提示符，切換工作目錄到當(dāng)前目錄，然后在命令提示符中執(zhí)行命令nodeindex.js，啟動(dòng)服務(wù)器。啟動(dòng)服務(wù)器從本書配套源代碼中找到本案例，復(fù)制pages/index/index.wxss文件和images文件夾。復(fù)制素材1.準(zhǔn)備工作案例實(shí)現(xiàn)“頭像上傳下載”微信小程序的目錄結(jié)構(gòu)1.準(zhǔn)備工作

先定一個(gè)小目標(biāo)！掌握“頭像上傳下載”微信小程序頁(yè)面結(jié)構(gòu)的實(shí)現(xiàn)，能夠完成頁(yè)面結(jié)構(gòu)的代碼編寫案例實(shí)現(xiàn)2.實(shí)現(xiàn)“頭像上傳下載”微信小程序的頁(yè)面結(jié)構(gòu)案例實(shí)現(xiàn)編寫“頭像上傳下載”微信小程序的頁(yè)面結(jié)構(gòu)2.實(shí)現(xiàn)“頭像上傳下載”微信小程序的頁(yè)面結(jié)構(gòu)

先定一個(gè)小目標(biāo)！掌握“頭像上傳下載”微信小程序頁(yè)面邏輯的實(shí)現(xiàn)，能夠完成頁(yè)面邏輯的代碼編寫案例實(shí)現(xiàn)3.實(shí)現(xiàn)“頭像上傳下載”微信小程序的頁(yè)面邏輯案例實(shí)現(xiàn)實(shí)現(xiàn)步驟在data中定義初始數(shù)據(jù)；編寫事件處理函數(shù)changeImg()，實(shí)現(xiàn)圖片選擇；編寫事件處理函數(shù)upload()，實(shí)現(xiàn)頭像的上傳；在微信開(kāi)發(fā)者工具的本地設(shè)置中勾選“不校驗(yàn)合法域名、web-view（業(yè)務(wù)域名）、TLS版本以及HTTPS證書”復(fù)選框；編寫事件處理函數(shù)download()，實(shí)現(xiàn)圖片的下載。3.實(shí)現(xiàn)“頭像上傳下載”微信小程序的頁(yè)面邏輯【案例4-4】模擬時(shí)鐘04案例分析“模擬時(shí)鐘”微信小程序利用canvas組件繪制時(shí)鐘，刻度為12個(gè)刻度，需要分別畫出中心圓、外層大圓、時(shí)針、分針、秒針?！澳M時(shí)鐘”微信小程序的頁(yè)面效果如右圖所示。

先定一個(gè)小目標(biāo)！掌握canvas組件，能夠靈活運(yùn)用canvas組件創(chuàng)建畫布知識(shí)儲(chǔ)備1.canvas組件知識(shí)儲(chǔ)備什么是canvas組件?1.canvas組件知識(shí)儲(chǔ)備在HTML中，<canvas>標(biāo)簽可用于圖形的繪制，也可用于創(chuàng)建圖片特效和動(dòng)畫。在微信小程序中，canvas組件也起著類似作用，可用于自定義繪制圖形，該組件支持2D和WebGL的繪圖。1.canvas組件屬性類型說(shuō)明typestring指定canvas組件的類型，支持2D和WebGLcanvas-idstringcanvas組件的唯一標(biāo)識(shí)符，若指定了type屬性則無(wú)須再指定該屬性disable-scrollboolean當(dāng)在canvas中移動(dòng)時(shí)且有綁定手勢(shì)事件時(shí)，禁止屏幕滾動(dòng)及下拉刷新，默認(rèn)值為falsebindtouchstarteventhandle手指觸摸動(dòng)作開(kāi)始bindtouchmoveeventhandle手指觸摸后移動(dòng)bindtouchendeventhandle手指觸摸動(dòng)作結(jié)束bindtouchcanceleventhandle手指觸摸動(dòng)作被打斷，例如來(lái)電提醒，彈窗等bindlongtapeventhandle手指長(zhǎng)按500毫秒之后觸發(fā)，觸發(fā)了長(zhǎng)按事件后進(jìn)行移動(dòng)不會(huì)觸發(fā)屏幕的滾動(dòng)binderroreventhandle當(dāng)發(fā)生錯(cuò)誤時(shí)觸發(fā)error事件知識(shí)儲(chǔ)備canvas組件的常用屬性如下表。

1.canvas組件步驟1演示canvas組件的使用在pages/index/index.wxml文件中編寫頁(yè)面結(jié)構(gòu)。知識(shí)儲(chǔ)備<canvasid="myCanvas"type="2d"></canvas>步驟2定義了canvas組件，用于創(chuàng)建畫布。其中，type屬性值為2d，表示使用Canvas2D接口。1.canvas組件知識(shí)儲(chǔ)備#myCanvas{display:block;width:300px;height:150px;position:relative;border:1pxsolidred;}步驟1步驟2在pages/index/index.wxss文件中編寫canvas組件的頁(yè)面樣式。1.canvas組件演示canvas組件的使用知識(shí)儲(chǔ)備為了方便查看默認(rèn)canvas組件的大小，設(shè)置了1px的紅色實(shí)心邊框，頁(yè)面效果如下圖。1.canvas組件演示canvas組件的使用

先定一個(gè)小目標(biāo)！掌握畫布API，能夠運(yùn)用畫布API完成圖形的繪制知識(shí)儲(chǔ)備2.畫布API知識(shí)儲(chǔ)備通過(guò)canvas組件創(chuàng)建畫布后，要想在畫布中繪制圖案，需要通過(guò)畫布API來(lái)完成。畫布API的使用方法如下：第一步：獲取Canvas實(shí)例；第二步：通過(guò)Canvas實(shí)例獲取RenderingContext（渲染上下文）實(shí)例；第三步：通過(guò)RenderingContext實(shí)例的屬性和方法完成繪圖操作。2.畫布API獲取Canvas實(shí)例的示例代碼如下。知識(shí)儲(chǔ)備wx.createSelectorQuery().select('#myCanvas')//頁(yè)面中<canvas>標(biāo)簽的id.fields({node:true,size:true}).exec(res=>{//獲取Canvas實(shí)例constcanvas=res[0].node//調(diào)用getContext()方法獲取RenderingContext實(shí)例constctx=canvas.getContext('2d')})2.畫布API類型名稱說(shuō)明屬性width畫布寬度height畫布高度f(wàn)illStyle設(shè)置或返回用于填充繪畫的顏色、漸變或模式

strokeStyle設(shè)置描邊顏色lineWidth設(shè)置或返回當(dāng)前的線條寬度f(wàn)ont設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性textBaseline設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線知識(shí)儲(chǔ)備RenderingContext實(shí)例的常用屬性和方法如下表。

2.畫布API類型名稱說(shuō)明方法rect()創(chuàng)建矩形fillRect()繪制“被填充”的矩形strokeRect()繪制矩形（無(wú)填充）clearRect()在給定的矩形內(nèi)清除指定的像素stroke()繪制已定義的路徑beginPath()開(kāi)始創(chuàng)建一個(gè)路徑closePath()創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑知識(shí)儲(chǔ)備>>接上表2.畫布API類型名稱說(shuō)明方法moveTo()把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條arc()創(chuàng)建一條弧線rotate()以原點(diǎn)為中心順時(shí)針旋轉(zhuǎn)當(dāng)前坐標(biāo)軸。多次調(diào)用旋轉(zhuǎn)的角度會(huì)疊加。原點(diǎn)可以用translate()方法修改，旋轉(zhuǎn)角度為正數(shù)，順時(shí)針旋轉(zhuǎn)，否則逆時(shí)針旋轉(zhuǎn)translate()對(duì)當(dāng)前坐標(biāo)系的原點(diǎn)(0,0)進(jìn)行變換。默認(rèn)的坐標(biāo)系原點(diǎn)為頁(yè)面左上角fillText()在畫布上繪制被填充的文本restore()恢復(fù)之前保存的繪圖上下文save()保存繪圖上下文知識(shí)儲(chǔ)備>>接上表2.畫布API知識(shí)儲(chǔ)備演示Canvas繪制的基本步驟在pages/index/index.wxml文件中編寫頁(yè)面結(jié)構(gòu)。<canvasid="draw"type="2d"></canvas>定義了canvas組件，用于創(chuàng)建畫布。其中，type屬性值為2d，表示使用Canvas2D接口。步驟1步驟3步驟22.畫布API知識(shí)儲(chǔ)備在pages/index/index.js文件中編寫代碼獲取Canvas實(shí)例。onReady:function(){wx.createSelectorQuery().select('#draw').fields({node:true,size:true}).exec(res=>{constcanvas=res[0].nodeconstctx=canvas.getContext('2d')this.drawRect(ctx)this.drawSmile(ctx)})},演示Canvas繪制的基本步驟步驟1步驟3步驟22.畫布API知識(shí)儲(chǔ)備>>接上頁(yè)drawRect:function(ctx){//繪制矩形，在后面的步驟中實(shí)現(xiàn)},drawSmile:function(ctx){//繪制笑臉，在后面的步驟中實(shí)現(xiàn)}演示Canvas繪制的基本步驟步驟1步驟3步驟22.