微信小程序開發(fā)實戰(zhàn)第6章-API應(yīng)用案例(下)課件

1、第6章 API應(yīng)用案例（下）【案例5】模擬時鐘【案例7】文件上傳與下載【案例6】羅盤動畫【案例8】在線聊天系統(tǒng)學(xué)習(xí)目標(biāo)掌握熟悉了解掌握canvas的用法12熟悉canvas 的API對象的用法3了解animation動畫的用法4掌握WebSocket的使用目錄點擊查看本節(jié)相關(guān)知識點【案例6】羅盤動畫6.2點擊查看本節(jié)相關(guān)知識點6.3【案例7】文件上傳與下載點擊查看本節(jié)相關(guān)知識點【案例5】模擬時鐘6.1點擊查看本節(jié)相關(guān)知識點【案例8】在線聊天系統(tǒng)6.4知識架構(gòu)6.1 【案例5】模擬時鐘1案例分析2前導(dǎo)知識3鐘表頁面布局4鐘表頁面繪制知識架構(gòu)6.2 【案例6】羅盤動畫1案例分析2前導(dǎo)知識3設(shè)計羅盤

2、頁面布局4手指觸摸旋轉(zhuǎn)羅盤5單擊按鈕操作羅盤知識架構(gòu)6.3 【案例7】文件上傳與下載1案例分析2前導(dǎo)知識3錄音和上傳4文件的下載知識架構(gòu)6.4 【案例8】在線聊天系統(tǒng)1案例分析2前導(dǎo)知識3編寫Node.js服務(wù)器端代碼4實現(xiàn)通信功能5編寫聊天頁面6.1 【案例5】模擬時鐘1 案例分析 模擬時鐘任務(wù)需求：使用canvas繪制時鐘，實現(xiàn)模擬時鐘的功能。鐘表時間與系統(tǒng)時間保持一致，刻度將24小時制轉(zhuǎn)化為12小時制。繪制中心圓繪制外層大圓繪制分針、時針、秒針。6.1 【案例5】模擬時鐘1 案例分析 頁面效果圖：時鐘模擬6.1 【案例5】模擬時鐘2 前導(dǎo)知識 canvas組件（原生組件，默認(rèn)寬高為300

3、px*225px）canvas 常用屬性屬性類型說明canvas-idStringcanvas組件的唯一標(biāo)識符disable-scrollBoolean觸摸點在canvas區(qū)域移動時且有綁定手勢事件時，禁止屏幕滾動及下拉刷新bindtouchstartEventHandle手指觸摸動作開始bindtouchmoveEventHandle手指觸摸后移動bindtouchendEventHandle手指觸摸動作結(jié)束bindtouchcancelEventHandle手指觸摸動作被打斷，如來電提醒、彈窗bindlongtapEventHandle手指長按500ms后觸發(fā)，觸發(fā)了該事件后進(jìn)行移動不會觸

4、發(fā)屏幕的滾動binderrorEventHandle當(dāng)發(fā)生錯誤時觸發(fā)error事件，detail = errMsg: something wrong6.1 【案例5】模擬時鐘2 前導(dǎo)知識 canvas用法：創(chuàng)建canvas.wxml文件。canvas width: 300px; height: 150px; display: block; position: relative;canvas組件默認(rèn)樣式如下。6.1 【案例5】模擬時鐘2 前導(dǎo)知識 canvas組件默認(rèn)效果圖：6.1 【案例5】模擬時鐘2 前導(dǎo)知識 值得一提canvas組件是原生組件，它的層級是最高的，不能通過z-index設(shè)置層

5、級，css動畫對canvas組件無效。6.1 【案例5】模擬時鐘2 前導(dǎo)知識 canvas繪制矩形，演示繪制的基本步驟第1步：創(chuàng)建Canvas繪圖上下文對象CanvasContextconst ctx = wx.createCanvasContext(myCanvas)第2步：使用Canvas繪圖上下文進(jìn)行繪圖描述ctx.setFillStyle(red) / 設(shè)置填充色為紅色/ 畫一個矩形，填充為紅色ctx.fillRect(10, 20, 150, 75) / ctx.fillRect(x, y, width, height)6.1 【案例5】模擬時鐘2 前導(dǎo)知識 第3步：畫圖ctx.dr

6、aw()矩形效果圖：6.1 【案例5】模擬時鐘2 前導(dǎo)知識 canvas繪制笑臉，示例代碼如下：第1步：創(chuàng)建Canvas繪圖上下文對象CanvasContextconst ctx = wx.createCanvasContext(myCanvas)第2步：設(shè)置線條顏色和線寬ctx.setStrokeStyle(#ff0000)ctx.setLineWidth(2)6.1 【案例5】模擬時鐘2 前導(dǎo)知識 第3步：移動畫筆坐標(biāo)位置，繪制（外部大圓）ctx.moveTo(160, 100)ctx.arc(100, 100, 60, 0, 2 * Math.PI, true)第4步：移動畫筆坐標(biāo)位置，

7、繪制（嘴巴線條）ctx.moveTo(140, 100)ctx.arc(100, 100, 40, 0, Math.PI, false)6.1 【案例5】模擬時鐘2 前導(dǎo)知識 第5步：移動畫筆坐標(biāo)位置，繪制（左眼圓圈）ctx.moveTo(85, 80)ctx.arc(80, 80, 5, 0, 2 * Math.PI, true)第6步：移動畫筆坐標(biāo)位置，繪制（右眼圓圈）ctx.moveTo(125, 80)ctx.arc(120, 80, 5, 0, 2 * Math.PI, true)第7步：畫出當(dāng)前路徑的邊框ctx.stroke()6.1 【案例5】模擬時鐘2 前導(dǎo)知識 第8步：移動畫

8、筆坐標(biāo)位置，繪制（左眼圓圈）wx.draw ()笑臉效果圖：6.1 【案例5】模擬時鐘2 前導(dǎo)知識 canvas對象方法介紹：CanvasContext.draw ()：將之前在繪圖上下文中的描述（路徑、樣式、變形）畫到canvas中。CanvasContext.arc()：創(chuàng)建一條弧線。CanvasContext.rect()：創(chuàng)建一個矩形路徑。CanvasContext.lineTo()：新增一個新點，用stroke方法來畫線條。CanvasContext.moveTo()：把路徑移動到畫布中的指定點，不創(chuàng)建線條。6.1 【案例5】模擬時鐘3 鐘表頁面布局 clock.wxml.mycan

9、vas width: 100%;height: 100%;position: fixed; clock.wxss6.1 【案例5】模擬時鐘4 鐘表頁面繪制 Page( width: 0, height: 0 ,/ 初始化寬高 onLoad: function() wx.getSystemInfo( ) , / 獲取系統(tǒng)的寬高 timer:null, onReady: function() function draw() / 繪制函數(shù) function drawClock(ctx, radius) / 繪制表盤部分 function drawHand(ctx, radius) / 繪制指針部分

10、)clock.js6.2 【案例6】羅盤動畫1 案例分析 風(fēng)水羅盤動畫任務(wù)需求：實現(xiàn)旋轉(zhuǎn)動畫效果。實現(xiàn)縮放動畫效果。實現(xiàn)移動動畫效果。實現(xiàn)傾斜動畫效果。實現(xiàn)旋轉(zhuǎn)和縮放動畫同時效果。實現(xiàn)旋轉(zhuǎn)后縮放動畫效果。6.2 【案例6】羅盤動畫2 前導(dǎo)知識 wx.createAnimation()wx.createAnimation() 參數(shù)對象的常用屬性屬性類型說明durationnumber動畫持續(xù)時間，默認(rèn)為400，單位mstimingFunctionstring動畫的效果，默認(rèn)為lineardelaynumber動畫延遲時間，默認(rèn)為0，單位mstransformOriginstringtransfo

11、rmOrigin樣式，默認(rèn)為50% 50% 06.2 【案例6】羅盤動畫2 前導(dǎo)知識 animation動畫對象animation.step()：動畫隊列。animation.export()：導(dǎo)出動畫。animation.rotate(number angle)：從原點順時針旋轉(zhuǎn)一個角度。animation.scale(number sx, number sy)：縮放。animation.skew(number ax, number ay)：傾斜animation.translate(number tx, number ty)：平移變換。6.2 【案例6】羅盤動畫3 設(shè)計羅盤界面布局 com

12、pass.wxml6.2 【案例6】羅盤動畫3 設(shè)計羅盤界面布局 旋轉(zhuǎn)縮放移動傾斜旋轉(zhuǎn)并縮放旋轉(zhuǎn)后縮放同時展示全部按順序展示全部回到原始狀態(tài)compass.wxml6.2 【案例6】羅盤動畫4 手指觸摸旋轉(zhuǎn)羅盤var animationvar angle = 0 var x1, y1, x3, y3/ 判斷坐標(biāo)系是順時針還是逆時針function judgeturn(x1, y1, x3, y3) var x2 = 150 var y2 = 150 return !(x2 - x1) * (y3 - y2) - (y2 - y1) * (x3 - x2) 0)compass.js6.2 【案例

13、6】羅盤動畫4 手指觸摸旋轉(zhuǎn)羅盤 onShow: function() animation = wx.createAnimation( duration: 1000, timingFunction: ease, ) start: function(e) x1 = e.touches0.clientX ; y1 = e.touches0.clientY ,end: function(e) compass.js創(chuàng)建動畫滑動開始滑動結(jié)束6.2 【案例6】羅盤動畫5 單擊按鈕操作羅盤 rotate: function() animation.rotate(Math.random() * 720 - 3

14、60).step() this.setData( animation: animation.export() ),編寫rotate()函數(shù)，實現(xiàn)從原點順時針旋轉(zhuǎn)一個角度6.2 【案例6】羅盤動畫5 單擊按鈕操作羅盤 scale: function() animation.scale(Math.random() * 2).step() this.setData( animation: animation.export() ),編寫scale()函數(shù)，實現(xiàn)縮放效果6.2 【案例6】羅盤動畫5 單擊按鈕操作羅盤 translate: function() animation.translate(Ma

15、th.random() * 100 - 50, Math.random() * 100 - 50).step() this.setData( animation: animation.export() ),編寫translate()函數(shù)，實現(xiàn)平移變換6.2 【案例6】羅盤動畫5 單擊按鈕操作羅盤 skew: function() animation.skew(Math.random() * 90, Math.random() * 90).step() this.setData( animation: animation.export() ),編寫skew()函數(shù)，實現(xiàn)對 X、Y 軸坐標(biāo)進(jìn)行傾斜

16、6.2 【案例6】羅盤動畫5 單擊按鈕操作羅盤 rotateAndScale: function() animation.rotate(Math.random() * 720 - 360) .scale(Math.random() * 2) .step() this.setData( animation: animation.export() ),編寫rotateAndScale()函數(shù)，實現(xiàn)旋轉(zhuǎn)和縮放同時進(jìn)行6.2 【案例6】羅盤動畫5 單擊按鈕操作羅盤 rotateThenScale: function() animation.rotate(Math.random() * 720 - 36

17、0).step() .scale(Math.random() * 2).step() this.setData( animation: animation.export() ),編寫rotateThenScale()函數(shù)，實現(xiàn)旋轉(zhuǎn)之后再縮放6.2 【案例6】羅盤動畫5 單擊按鈕操作羅盤 all: function() / 旋轉(zhuǎn)-縮放-移動-傾斜 animation.rotate(Math.random() * 720 - 360) .scale(Math.random() * 2) .translate(Math.random() * 100 - 50, Math.random() * 100

18、 - 50) .skew(Math.random() * 90, Math.random() * 90) .step() this.setData( animation: animation.export() ),編寫all()函數(shù)，實現(xiàn)同時展示全部動畫6.2 【案例6】羅盤動畫5 單擊按鈕操作羅盤 allOrder: function() / 旋轉(zhuǎn)-縮放-移動-傾斜 animation.rotate(Math.random() * 720 - 360).step() .scale(Math.random() * 2).step() .translate(Math.random() * 100

19、 - 50, Math.random() * 100 - 50).step() .skew(Math.random() * 90, Math.random() * 90) .step() this.setData( animation: animation.export() ),編寫allOrder()函數(shù)，實現(xiàn)按順序展示全部動畫6.2 【案例6】羅盤動畫5 單擊按鈕操作羅盤 reset: function() animation.rotate(0, 0).scale(1).translate(0, 0).skew(0, 0) .step(duration: 0) this.setData(

20、animation: animation.export() )編寫reset()函數(shù)，實現(xiàn)回到原始狀態(tài)6.3 【案例7】文件上傳與下載1 案例分析 文件上傳、下載案例任務(wù)需求：實現(xiàn)了請求服務(wù)器文件的上傳與下載。實現(xiàn)調(diào)起設(shè)備錄音功能。實現(xiàn)停止錄音功能。實現(xiàn)播放錄音功能。實現(xiàn)上傳錄音文件到服務(wù)器的功能6.3 【案例7】文件上傳與下載2 前導(dǎo)知識 錄音APIvar rec = wx.getRecorderManager() /獲取全局唯一的錄音管理器recrecorderManager.start(options) / 開始錄音recorderManager.onStart() = ) / 監(jiān)聽錄音

21、開始事件recorderManager.onResume() = )/ 監(jiān)聽錄音繼續(xù)事件recorderManager.onPause() = ) / 監(jiān)聽錄音暫停事件recorderManager.onStop(res) = const tempFilePath = res ) / 監(jiān)聽錄音結(jié)束事件recorderManager.onFrameRecorded(res) = const frameBuffer = res ) / 監(jiān)聽已錄制完指定幀大小的文件事件6.3 【案例7】文件上傳與下載2 前導(dǎo)知識 文件上傳APIwx.chooseImage( success (res) const

22、tempFilePaths = res.tempFilePaths wx.uploadFile( url: https:/xxxx, / 開發(fā)者服務(wù)器地址 filePath: tempFilePaths0, name: file, / 文件對應(yīng)的key formData: user: test, / HTTPS請求中其他額外的form data success (res) const data = res.data / do something ) )6.3 【案例7】文件上傳與下載2 前導(dǎo)知識 文件下載APIwx.downloadFile( url: : https:/xxxx, succe

23、ss (res) if(res.statusCode = 200) wx.playVoice( filePath: res.tempFilePath ) )6.3 【案例7】文件上傳與下載3 錄音和上傳錄音停止回放上傳index.wxml6.3 【案例7】文件上傳與下載3 錄音和上傳var tempFilePath = null / 音頻文件臨時路徑var audioCtx = wx.createInnerAudioContext() / 獲取音頻對象var rec = wx.getRecorderManager() / 獲取錄音管理器對象 rec.onStop(res = tempFileP

24、ath = res.tempFilePath console.log(tempFilePath)Page( )index.js在Page()前面編寫代碼，獲取音頻實例對象和錄音管理器對象，并在錄音完成后保存音頻文件的臨時路徑6.3 【案例7】文件上傳與下載3 錄音和上傳Page( record: function() rec.start() , stop: function() rec.stop() , playback:function() audioCtx.src = tempFilePath audioCtx.play() upload: function() wx.uploadFile

25、( ) )index.js開始錄音停止錄音回放錄音上傳錄音文件在Page()中編寫代碼：6.3 【案例7】文件上傳與下載4 文件的下載 文件的下載任務(wù)需求：用戶單擊“播放文章”按鈕，調(diào)用wx.downloadFile()方法。把服務(wù)器文件下載到本地。接口調(diào)用成功后，在success()回調(diào)函數(shù)中播放音頻文件。6.3 【案例7】文件上傳與下載4 文件的下載播放文章暫停 index.wxml6.3 【案例7】文件上傳與下載4 文件的下載play: function () / 從服務(wù)器上下載音頻文件 wx.showLoading( / 加載提示信息 ) wx.downloadFile( url: *

26、 , / 服務(wù)器地址 success: res = / 播放音頻 wx.playVoice( filePath: res.tempFilePath ) ) pause: function () if(audioCtx.pauesd) audioCtx.paly() else audioCtx.pause index.js播放文章暫停/繼續(xù)播放下載文件6.4 【案例8】在線聊天系統(tǒng)1 案例分析 在線聊天案例實現(xiàn)了客戶端和服務(wù)器端的對話聊天，服務(wù)器端用Node.js來搭建服務(wù)，客戶端通過小程序中的WebSocket API來實現(xiàn)。在線聊天系統(tǒng)任務(wù)需求：服務(wù)器向小程序發(fā)送消息，展示在聊天界面的左側(cè)。

27、小程序向服務(wù)器發(fā)送信息，展示在聊天界面的右側(cè)。小程序發(fā)送消息，服務(wù)器端收到后自動回復(fù)消息返送給小程序。6.4 【案例8】在線聊天系統(tǒng)1 案例分析 頁面效果圖：消息展示6.4 【案例8】在線聊天系統(tǒng)2 前導(dǎo)知識 WebSocketWebSocket作用：實現(xiàn)了瀏覽器和服務(wù)器的全雙工通信。是客戶端與服務(wù)器之間專門建立的一條通道。建立連接后，就可以從通道中實時獲取服務(wù)器的數(shù)據(jù)。注意事項：WebSocket的協(xié)議是以ws或wss開頭的，在小程序中，正式項目必須使用wss協(xié)議，在開發(fā)模式下可以使用ws協(xié)議。6.4 【案例8】在線聊天系統(tǒng)2 前導(dǎo)知識 wx.connectSocket()，創(chuàng)建一個WebS

28、ocket連接：wx.connectSocket( url: ws:/:3000 / 服務(wù)器地址)wx.sendSocketMessage()，通過WebSocket連接發(fā)送數(shù)據(jù)：wx.sendSocketMessage( data: msg, success: () = )6.4 【案例8】在線聊天系統(tǒng)2 前導(dǎo)知識 wx.onSocketMessage()，監(jiān)聽WebSocket接受到服務(wù)器的消息事件：wx.connectSocket( url: ws:/:3000, )wx.onSocketOpen(function() console.log(連接成功); )/ 監(jiān)聽服務(wù)器端發(fā)送到客戶端

29、的消息wx.onSocketMessage(msg = var data = JSON.parse(msg.data) console.log(data)6.4 【案例8】在線聊天系統(tǒng)3 編寫Node.js服務(wù)器端代碼本節(jié)選擇使用Node.js搭建開發(fā)者服務(wù)器，安裝Node.js，創(chuàng)建項目：npm init y初始化項目，將會自動創(chuàng)建package.json配置文件。npm install websocket安裝webSocket庫。npm install nodemon -g安裝nodemon監(jiān)控文件修改（如果已經(jīng)安裝則跳過此步）。6.4 【案例8】在線聊天系統(tǒng)3 編寫Node.js服務(wù)器端

30、代碼執(zhí)行上述命令后，在項目目錄下創(chuàng)建socket.js文件，編寫代碼如下：const http = require(http)/ 引入WebSocketconst WebSocketServer = require(websocket).server/ 創(chuàng)建一個HTTP Serverconst httpServer = http.createServer(request, response) = response.writeHead(404) response.end()引入http模塊和WebSocket庫。6.4 【案例8】在線聊天系統(tǒng)3 編寫Node.js服務(wù)器端代碼const wsSe

31、rver = new WebSocketServer( httpServer, autoAcceptConnections: true)創(chuàng)建一個webSocket Server。事件監(jiān)聽。wsServer.on(connect, connection = connection.on(message, message = if (message.type = utf8) var data = content: 自動回復(fù), date: 2019-01-16 connection.sendUTF( JSON.stringify(data) ) / 服務(wù)器返回的信息 )6.4 【案例8】在線聊天系統(tǒng)3

32、 編寫Node.js服務(wù)器端代碼連接的關(guān)閉監(jiān)聽。 / 連接的關(guān)閉監(jiān)聽 connection.on(close, (reasonCode, description) = console.log( + new Date() + Peer + connection.remoteAddress + disconnected.) )6.4 【案例8】在線聊天系統(tǒng)3 編寫Node.js服務(wù)器端代碼接收控制臺中的輸入。 / 接收控制臺中的輸入 process.stdin.on(data, function(data) var data = data.toString().trim() data = cont

33、ent: data, date: 2010-01-01 connection.sendUTF( JSON.stringify(data) ) )6.4 【案例8】在線聊天系統(tǒng)3 編寫Node.js服務(wù)器端代碼暴露對外訪問接口地址。app.listen(3000, () = console.log( + new Date() + server is listening on port 3000)保存上述代碼后，執(zhí)行如下命令，啟動服務(wù)器。nodemon socket.js6.4 【案例8】在線聊天系統(tǒng)4 實現(xiàn)通信功能創(chuàng)建空白項目，在app.json中添加頁面路徑。 pages: pages/ind

34、ex/index , window: backgroundTextStyle:light, navigationBarBackgroundColor: #fff, navigationBarTextStyle:black 6.4 【案例8】在線聊天系統(tǒng)4 實現(xiàn)通信功能進(jìn)入index.js中，連接服務(wù)器測試。 Page( onLoad: function() wx.connectSocket( url: ws:/:3000 ) / 連接成功 wx.onSocketOpen(function() wx.sendSocketMessage( data: 你好 ) ) wx.onSocketMessa

35、ge(function(msg) console.log(msg) ) wx.onSocketClose(function(res) console.log(WebSocket已關(guān)閉) ) )6.4 【案例8】在線聊天系統(tǒng)4 實現(xiàn)通信功能執(zhí)行上述代碼，在服務(wù)器控制臺看到輸出結(jié)果。 message content from client: 你好小程序端控制臺接收消息結(jié)果，如下圖所示：6.4 【案例8】在線聊天系統(tǒng)5 編寫聊天界面 index.wxml6.4 【案例8】在線聊天系統(tǒng)5 編寫聊天界面 發(fā)送 index.wxml6.4 【案例8】在線聊天系統(tǒng)5 編寫聊天界面進(jìn)入index.js文件，監(jiān)

36、聽服務(wù)器發(fā)送給客戶端的消息，并將消息顯示在頁面中。wx.onSocketMessage(msg) = var data = JSON.parse(msg.data) data.role = server / 設(shè)置角色; data.id = +this.id var list = this.data.newslist; list.push(data) this.setData( newslist: list, / 將新消息追加到消息列表 message: null / 發(fā)送完成之后清空輸入框信息 ) this.rolling_bottom()6.4 【案例8】在線聊天系統(tǒng)5 編寫聊天界面編寫rolling_bottom()方法，使聊天內(nèi)容始終顯示在最底端。rolling_bottom: function() var s = 0 var list = wx.createSelectorQuery().selectAll(.list) list.boundingClientRect(rects = rects.forEach(