微信小程序開發(fā)API應(yīng)用案例（下）

第六章API應(yīng)用案例（下）案例五模擬時鐘案例七文件上傳與下載案例六羅盤動畫案例八在線聊天系統(tǒng)學(xué)目地掌握熟悉了解掌握canvas地用法一二熟悉canvas地API對象地用法三了解animation動畫地用法四掌握WebSocket地使用目錄?點擊查看本節(jié)有關(guān)知識點案例六羅盤動畫六.二?點擊查看本節(jié)有關(guān)知識點六.三案例七文件上傳與下載?點擊查看本節(jié)有關(guān)知識點案例五模擬時鐘六.一?點擊查看本節(jié)有關(guān)知識點案例八在線聊天系統(tǒng)六.四知識架構(gòu)六.一案例五模擬時鐘一案例分析二前導(dǎo)知識三鐘表頁面布局四鐘表頁面繪制知識架構(gòu)六.二案例六羅盤動畫一案例分析二前導(dǎo)知識三設(shè)計羅盤頁面布局四手指觸摸旋轉(zhuǎn)羅盤五單擊按鈕操作羅盤知識架構(gòu)六.三案例七文件上傳與下載一案例分析二前導(dǎo)知識三錄音與上傳四文件地下載知識架構(gòu)六.四案例八在線聊天系統(tǒng)一案例分析二前導(dǎo)知識三編寫Node.js服務(wù)器端代碼四實現(xiàn)通信功能五編寫聊天頁面六.一案例五模擬時鐘一案例分析模擬時鐘任務(wù)需求:使用canvas繪制時鐘,實現(xiàn)模擬時鐘地功能。鐘表時間與系統(tǒng)時間保持一致,刻度將二四小時制轉(zhuǎn)化為一二小時制。繪制心圓繪制外層大圓繪制分針,時針,秒針。六.一案例五模擬時鐘一案例分析頁面效果圖:時鐘模擬六.一案例五模擬時鐘二前導(dǎo)知識canvas組件（原生組件,默認(rèn)寬高為三零零px*二二五px）canvas常用屬屬類型說明canvas-idStringcanvas組件地唯一標(biāo)識符disable-scrollBoolean觸摸點在canvas區(qū)域移動時且有綁定手勢時,禁止屏幕滾動及下拉刷新bindtouchstartEventHandle手指觸摸動作開始bindtouchmoveEventHandle手指觸摸后移動bindtouchendEventHandle手指觸摸動作結(jié)束bindtouchcancelEventHandle手指觸摸動作被打斷,如來電提醒,彈窗bindlongtapEventHandle手指長按五零零ms后觸發(fā),觸發(fā)了該后行移動不會觸發(fā)屏幕地滾動binderrorEventHandle當(dāng)發(fā)生錯誤時觸發(fā)error,detail={errMsg:'somethingwrong'}六.一案例五模擬時鐘二前導(dǎo)知識canvas用法:<canvascanvas-id="myCanvas"></canvas> 創(chuàng)建canvas.wxml文件。canvas{width:三零零px;height:一五零px;display:block;position:relative;}canvas組件默認(rèn)樣式如下。六.一案例五模擬時鐘二前導(dǎo)知識canvas組件默認(rèn)效果圖:六.一案例五模擬時鐘二前導(dǎo)知識值得一提canvas組件是原生組件,它地層級是最高地,不能通過z-index設(shè)置層級,css動畫對canvas組件無效。六.一案例五模擬時鐘二前導(dǎo)知識canvas繪制矩形,演示繪制地基本步驟第一步:創(chuàng)建Canvas繪圖上下文對象CanvasContextconstctx=wx.createCanvasContext('myCanvas')第二步:使用Canvas繪圖上下文行繪圖描述ctx.setFillStyle('red') //設(shè)置填充色為紅色//畫一個矩形,填充為紅色ctx.fillRect(一零,二零,一五零,七五)//ctx.fillRect(x,y,width,height)六.一案例五模擬時鐘二前導(dǎo)知識第三步:畫圖ctx.draw()矩形效果圖:六.一案例五模擬時鐘二前導(dǎo)知識canvas繪制笑臉,示例代碼如下:第一步:創(chuàng)建Canvas繪圖上下文對象CanvasContextconstctx=wx.createCanvasContext('myCanvas')第二步:設(shè)置線條顏色與線寬ctx.setStrokeStyle('#ff零零零零')ctx.setLineWidth(二)六.一案例五模擬時鐘二前導(dǎo)知識第三步:移動畫筆坐標(biāo)位置,繪制（外部大圓）ctx.moveTo(一六零,一零零)ctx.arc(一零零,一零零,六零,零,二*Math.PI,true)第四步:移動畫筆坐標(biāo)位置,繪制（嘴巴線條）ctx.moveTo(一四零,一零零)ctx.arc(一零零,一零零,四零,零,Math.PI,false)六.一案例五模擬時鐘二前導(dǎo)知識第五步:移動畫筆坐標(biāo)位置,繪制（左眼圓圈）ctx.moveTo(八五,八零)ctx.arc(八零,八零,五,零,二*Math.PI,true)第六步:移動畫筆坐標(biāo)位置,繪制（右眼圓圈）ctx.moveTo(一二五,八零)ctx.arc(一二零,八零,五,零,二*Math.PI,true)第七步:畫出當(dāng)前路徑地邊框ctx.stroke()六.一案例五模擬時鐘二前導(dǎo)知識第八步:移動畫筆坐標(biāo)位置,繪制（左眼圓圈）wx.draw()笑臉效果圖:六.一案例五模擬時鐘二前導(dǎo)知識canvas對象方法介紹:CanvasContext.draw():將之前在繪圖上下文地描述（路徑,樣式,變形）畫到canvas。CanvasContext.arc():創(chuàng)建一條弧線。CanvasContext.rect():創(chuàng)建一個矩形路徑。CanvasContext.lio():新增一個新點,用stroke方法來畫線條。CanvasContext.moveTo():把路徑移動到畫布地指定點,不創(chuàng)建線條。六.一案例五模擬時鐘三鐘表頁面布局<canvascanvas-id="myCanvas"class="mycanvas"></canvas>clock.wxml.mycanvas{width:一零零%;height:一零零%;position:fixed;}clock.wxss六.一案例五模擬時鐘四鐘表頁面繪制Page({width:零,height:零,//初始化寬高onLoad:function(){wx.getSystemInfo({})},//獲取系統(tǒng)地寬高timer:null,onReady:function(){……functiondraw(){}//繪制函數(shù)functiondrawClock(ctx,radius){}//繪制表盤部分functiondrawHand(ctx,radius){}//繪制指針部分}})clock.js六.二案例六羅盤動畫一案例分析風(fēng)水羅盤動畫任務(wù)需求:實現(xiàn)旋轉(zhuǎn)動畫效果。實現(xiàn)縮放動畫效果。實現(xiàn)移動動畫效果。實現(xiàn)傾斜動畫效果。實現(xiàn)旋轉(zhuǎn)與縮放動畫同時效果。實現(xiàn)旋轉(zhuǎn)后縮放動畫效果。六.二案例六羅盤動畫二前導(dǎo)知識wx.createAnimation()wx.createAnimation()參數(shù)對象地常用屬屬類型說明durationnumber動畫持續(xù)時間,默認(rèn)為四零零,單位mstimingFunctionstring動畫地效果,默認(rèn)為'linear'delaynumber動畫延遲時間,默認(rèn)為零,單位mstransformOriginstringtransformOrigin樣式,默認(rèn)為'五零%五零%零'六.二案例六羅盤動畫二前導(dǎo)知識animation動畫對象animation.step():動畫隊列。animation.export():導(dǎo)出動畫。animation.rotate(numberangle):從原點順時針旋轉(zhuǎn)一個角度。animation.scale(numbersx,numbersy):縮放。animation.skew(numberax,numberay):傾斜animation.translate(numbertx,numberty):移變換。六.二案例六羅盤動畫三設(shè)計羅盤界面布局<imagesrc="../images/七七.png"animation="{{animation}}"catchtouchstart="start"catchtouchend="end"></image>pass.wxml六.二案例六羅盤動畫三設(shè)計羅盤界面布局<buttonbindtap="rotate">旋轉(zhuǎn)</button><buttonbindtap="scale">縮放</button><buttonbindtap="translate">移動</button><buttonbindtap="skew">傾斜</button><buttonbindtap="rotateAndScale">旋轉(zhuǎn)并縮放</button><buttonbindtap="rotateThenScale">旋轉(zhuǎn)后縮放</button><buttonbindtap="all">同時展示全部</button><buttonbindtap="allOrder">按順序展示全部</button><buttonbindtap="reset">回到原始狀態(tài)</button>pass.wxml六.二案例六羅盤動畫四手指觸摸旋轉(zhuǎn)羅盤varanimationvarangle=零varx一,y一,x三,y三//判斷坐標(biāo)系是順時針還是逆時針functionjudgeturn(x一,y一,x三,y三){varx二=一五零vary二=一五零return!((x二-x一)*(y三-y二)-(y二-y一)*(x三-x二)>零)}pass.js六.二案例六羅盤動畫四手指觸摸旋轉(zhuǎn)羅盤onShow:function(){animation=wx.createAnimation({duration:一零零零,timingFunction:'ease',})}start:function(e){x一=e.touches[零].clientX;y一=e.touches[零].clientY},end:function(e){}pass.js創(chuàng)建動畫滑動開始滑動結(jié)束六.二案例六羅盤動畫五單擊按鈕操作羅盤rotate:function(){animation.rotate(Math.random()*七二零-三六零).step()this.setData({animation:animation.export()})},編寫rotate()函數(shù),實現(xiàn)從原點順時針旋轉(zhuǎn)一個角度六.二案例六羅盤動畫五單擊按鈕操作羅盤scale:function(){animation.scale(Math.random()*二).step()this.setData({animation:animation.export()})},編寫scale()函數(shù),實現(xiàn)縮放效果六.二案例六羅盤動畫五單擊按鈕操作羅盤translate:function(){animation.translate(Math.random()*一零零-五零,Math.random()*一零零-五零).step()this.setData({animation:animation.export()})},編寫translate()函數(shù),實現(xiàn)移變換六.二案例六羅盤動畫五單擊按鈕操作羅盤skew:function(){animation.skew(Math.random()*九零,Math.random()*九零).step()this.setData({animation:animation.export()})},編寫skew()函數(shù),實現(xiàn)對X,Y軸坐標(biāo)行傾斜六.二案例六羅盤動畫五單擊按鈕操作羅盤rotateAndScale:function(){animation.rotate(Math.random()*七二零-三六零).scale(Math.random()*二).step()this.setData({animation:animation.export()})},編寫rotateAndScale()函數(shù),實現(xiàn)旋轉(zhuǎn)與縮放同時行六.二案例六羅盤動畫五單擊按鈕操作羅盤rotateThenScale:function(){animation.rotate(Math.random()*七二零-三六零).step().scale(Math.random()*二).step()this.setData({animation:animation.export()})},編寫rotateThenScale()函數(shù),實現(xiàn)旋轉(zhuǎn)之后再縮放六.二案例六羅盤動畫五單擊按鈕操作羅盤all:function(){//旋轉(zhuǎn)-縮放-移動-傾斜animation.rotate(Math.random()*七二零-三六零).scale(Math.random()*二).translate(Math.random()*一零零-五零,Math.random()*一零零-五零).skew(Math.random()*九零,Math.random()*九零).step()this.setData({animation:animation.export()})},編寫all()函數(shù),實現(xiàn)同時展示全部動畫六.二案例六羅盤動畫五單擊按鈕操作羅盤allOrder:function(){//旋轉(zhuǎn)-縮放-移動-傾斜animation.rotate(Math.random()*七二零-三六零).step().scale(Math.random()*二).step().translate(Math.random()*一零零-五零,Math.random()*一零零-五零).step().skew(Math.random()*九零,Math.random()*九零).step()this.setData({animation:animation.export()})},編寫allOrder()函數(shù),實現(xiàn)按順序展示全部動畫六.二案例六羅盤動畫五單擊按鈕操作羅盤reset:function(){animation.rotate(零,零).scale(一).translate(零,零).skew(零,零).step({duration:零})this.setData({animation:animation.export()})}編寫reset()函數(shù),實現(xiàn)回到原始狀態(tài)六.三案例七文件上傳與下載一案例分析文件上傳,下載案例任務(wù)需求:實現(xiàn)了請求服務(wù)器文件地上傳與下載。實現(xiàn)調(diào)起設(shè)備錄音功能。實現(xiàn)停止錄音功能。實現(xiàn)播放錄音功能。實現(xiàn)上傳錄音文件到服務(wù)器地功能六.三案例七文件上傳與下載二前導(dǎo)知識錄音APIvarrec=wx.getRecorderManager()//獲取全局唯一地錄音管理器recrecorderManager.start(options)//開始錄音recorderManager.onStart(()=>{})//監(jiān)聽錄音開始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)聽已錄制完指定幀大小地文件六.三案例七文件上傳與下載二前導(dǎo)知識文件上傳API

wx.chooseImage({

success(res){

consttempFilePaths=res.tempFilePaths

wx.uploadFile({

url:'https://xxxx',

//開發(fā)者服務(wù)器地址

filePath:tempFilePaths[零],

name:'file',

//文件對應(yīng)地key

formData:{'user':'test'},//HTTPS請求其它額外地formdata

success(res){constdata=res.data//dosomething}

})}})六.三案例七文件上傳與下載二前導(dǎo)知識文件下載API

wx.downloadFile({url::'https://xxxx',

success(res){

if(res.statusCode===二零零){wx.playVoice({filePath:res.tempFilePath})}

}})六.三案例七文件上傳與下載三錄音與上傳<buttonbindtap="record"size="mini">錄音</button><buttonbindtap="stop"size="mini">停止</button><buttonbindtap="playback"size="mini">回放</button><buttonbindtap="upload"size="mini">上傳</button>index.wxml六.三案例七文件上傳與下載三錄音與上傳vartempFilePath=null

//音頻文件臨時路徑varaudioCtx=wx.createInnerAudioContext()

//獲取音頻對象varrec=wx.getRecorderManager()

//獲取錄音管理器對象rec.onStop(res=>{

tempFilePath=res.tempFilePath

console.log(tempFilePath)})Page({……})index.js在Page()前面編寫代碼,獲取音頻實例對象與錄音管理器對象,并在錄音完成后保存音頻文件地臨時路徑六.三案例七文件上傳與下載三錄音與上傳Page({record:function(){rec.start()},stop:function(){rec.stop()},playback:function(){audioCtx.src=tempFilePathaudioCtx.play()}upload:function(){wx.uploadFile({})}})index.js開始錄音停止錄音回放錄音上傳錄音文件在Page()編寫代碼:六.三案例七文件上傳與下載四文件地下載文件地下載任務(wù)需求:用戶單擊"播放文章"按鈕,調(diào)用wx.downloadFile()方法。把服務(wù)器文件下載到本地。接口調(diào)用成功后,在success()回調(diào)函數(shù)播放音頻文件。六.三案例七文件上傳與下載四文件地下載<buttonbindtap="play"size="mini">播放文章</button><buttonbindtap="pause"size="mini">暫停</button>index.wxml六.三案例七文件上傳與下載四文件地下載play:function(){//從服務(wù)器上下載音頻文件wx.showLoading({//加載提示信息})wx.downloadFile({url:'***',//服務(wù)器地址success:res=>{//播放音頻wx.playVoice({filePath:res.tempFilePath})}})}pause:function(){if(audioCtx.pauesd){audioCtx.paly()}else{audioCtx.pause}}index.js播放文章暫停/繼續(xù)播放下載文件六.四案例八在線聊天系統(tǒng)一案例分析在線聊天案例實現(xiàn)了客戶端與服務(wù)器端地對話聊天,服務(wù)器端用Node.js來搭建服務(wù),客戶端通過小程序地WebSocketAPI來實現(xiàn)。在線聊天系統(tǒng)任務(wù)需求:服務(wù)器向小程序發(fā)送消息,展示在聊天界面地左側(cè)。小程序向服務(wù)器發(fā)送信息,展示在聊天界面地右側(cè)。小程序發(fā)送消息,服務(wù)器端收到后自動回復(fù)消息返送給小程序。六.四案例八在線聊天系統(tǒng)一案例分析頁面效果圖:消息展示六.四案例八在線聊天系統(tǒng)二前導(dǎo)知識WebSocketWebSocket作用:實現(xiàn)了瀏覽器與服務(wù)器地全雙工通信。是客戶端與服務(wù)器之間專門建立地一條通道。建立連接后,就可以從通道實時獲取服務(wù)器地數(shù)據(jù)。注意事項:WebSocket地協(xié)議是以ws或wss開頭地,在小程序,正式項目需要使用wss協(xié)議,在開發(fā)模式下可以使用ws協(xié)議。六.四案例八在線聊天系統(tǒng)二前導(dǎo)知識wx.connectSocket(),創(chuàng)建一個WebSocket連接:wx.connectSocket({url:'ws://一二七.零.零.一:三零零零'//服務(wù)器地址})wx.sendSocketMessage(),通過WebSocket連接發(fā)送數(shù)據(jù):wx.sendSocketMessage({data:msg,success:()=>{}})六.四案例八在線聊天系統(tǒng)二前導(dǎo)知識wx.onSocketMessage(),監(jiān)聽WebSocket接受到服務(wù)器地消息:wx.connectSocket({url:'ws://一二七.零.零.一:三零零零',})wx.onSocketOpen(function(){console.log('連接成功');})//監(jiān)聽服務(wù)器端發(fā)送到客戶端地消息wx.onSocketMessage(msg=>{vardata=JSON.parse(msg.data)console.log(data)})六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼本節(jié)選擇使用Node.js搭建開發(fā)者服務(wù)器,安裝Node.js,創(chuàng)建項目:npminit–y初始化項目,將會自動創(chuàng)建package.json配置文件。npminstallwebsocket安裝webSocket庫。npminstallnodemon-g安裝nodemon監(jiān)控文件修改（如果已經(jīng)安裝則跳過此步）。六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼執(zhí)行上述命令后,在項目目錄下創(chuàng)建socket.js文件,編寫代碼如下:consthttp=require('http')//引入WebSocketconstWebSocketServer=require('websocket').server//創(chuàng)建一個HTTPServerconsthttpServer=http.createServer((request,response)=>{response.writeHead(四零四)response.end()})引入http模塊與WebSocket庫。六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼constwsServer=newWebSocketServer({httpServer,autoAcceptConnections:true})創(chuàng)建一個webSocketServer。監(jiān)聽。wsServer.on('connect',connection=>{connection.on('message',message=>{if(message.type==='utf八'){vardata={content:'自動回復(fù)',date:'二零一九-零一-一六'}connection.sendUTF(JSON.stringify(data))//服務(wù)器返回地信息}})六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼連接地關(guān)閉監(jiān)聽。//連接地關(guān)閉監(jiān)聽connection.on('close',(reasonCode,description)=>{console.log('['+newDate()+']Peer'+connection.remoteAddress+'disconnected.')})六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼接收控制臺地輸入。//接收控制臺地輸入process.stdin.on('data',function(data){vardata=data.toString().trim()data={'content':data,'date':'二零一零-零一-零一'}connection.sendUTF(JSON.stringify(data))})})六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼暴露對外訪問接口地址。app.listen(三零零零,()=>{console.log('['+newDate()+']serverislisteningonport三零零零')})保存上述代碼后,執(zhí)行如下命令,啟動服務(wù)器。nodemonsocket.js六.四案例八在線聊天系統(tǒng)四實現(xiàn)通信功能創(chuàng)建空白項目,在app.json添加頁面路徑。{"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTextStyle":"black"}}六.四案例八在線聊天系統(tǒng)四實現(xiàn)通信功能入index.js,連接服務(wù)器測試。Page({onLoad:function(){wx.connectSocket({url:'ws://一二七.零.零.一:三零零零'})//連接成功wx.onSocketOpen(function(){wx.sendSocketMessage({data:'妳好'})})wx.onSocketMessage(function(msg){console.log(msg)})wx.onSocketClose(function(res){console.log('WebSocket已關(guān)閉')})}})六.四案例八在線聊天系統(tǒng)四實現(xiàn)通信功能執(zhí)行上述代碼,在服務(wù)器控制臺看到輸出結(jié)果。>>messagecontentfromclient:妳好小程序端控制臺接收消息結(jié)果,如下圖所示:六.四案例八在線聊天系統(tǒng)五編寫聊天界面<viewclass="chat-news"wx:for="{{newslist}}"><!--(role值為me,發(fā)送地消息顯示在右側(cè))--><blockwx:if="{{item.role=='me'}}"><viewclass="news-lf"></view></block><!--(role值為server,收到地消息顯示在左側(cè))--><blockwx:else><viewclass="news-rl"></view></block></view>index.wxml六.四案例八在線聊天系統(tǒng)五編寫聊天界面<formclass="sendMessage"><inputtype="text"cursor-spacing="八零"placeholder="請輸入聊天內(nèi)容.."value="{{massage}}"bindinput="bindChange"></input><buttontype="primary"bindtap="send"formType="reset"size="small"button-hover="blue">發(fā)送</button></form>index.wxml六.四案例八在線聊天系統(tǒng)五編寫聊天界面入index.js文件,監(jiān)聽服務(wù)器發(fā)送給客戶端地消息,并將消息顯示在頁面。wx.onSocketMessage((msg)=>{vardata=JSON.parse(msg.data)data.role='server'//設(shè)置角色;data.id=++this.idvarlist=this.data.newslist;list.push(data)this.setData({newslist:list, //將新消息追加到消息列表