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

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

recorderManager.onStop((res)=>{const{tempFilePath}=res})//監(jiān)聽(tīng)錄音結(jié)束recorderManager.onFrameRecorded((res)=>{const{frameBuffer}=res})//監(jiān)聽(tīng)已錄制完指定幀大小地文件六.三案例七文件上傳與下載二前導(dǎo)知識(shí)文件上傳API

wx.chooseImage({

success(res){

consttempFilePaths=res.tempFilePaths

wx.uploadFile({

url:'https://xxxx',

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

filePath:tempFilePaths[零],

name:'file',

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

formData:{'user':'test'},//HTTPS請(qǐng)求其它額外地formdata

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

})}})六.三案例七文件上傳與下載二前導(dǎo)知識(shí)文件下載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

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

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

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

tempFilePath=res.tempFilePath

console.log(tempFilePath)})Page({……})index.js在Page()前面編寫代碼,獲取音頻實(shí)例對(duì)象與錄音管理器對(duì)象,并在錄音完成后保存音頻文件地臨時(shí)路徑六.三案例七文件上傳與下載三錄音與上傳Page({record:function(){rec.start()},stop:function(){rec.stop()},playback:function(){audioCtx.src=tempFilePathaudioCtx.play()}upload:function(){wx.uploadFile({})}})index.js開(kāi)始錄音停止錄音回放錄音上傳錄音文件在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)一案例分析在線聊天案例實(shí)現(xiàn)了客戶端與服務(wù)器端地對(duì)話聊天,服務(wù)器端用Node.js來(lái)搭建服務(wù),客戶端通過(guò)小程序地WebSocketAPI來(lái)實(shí)現(xiàn)。在線聊天系統(tǒng)任務(wù)需求:服務(wù)器向小程序發(fā)送消息,展示在聊天界面地左側(cè)。小程序向服務(wù)器發(fā)送信息,展示在聊天界面地右側(cè)。小程序發(fā)送消息,服務(wù)器端收到后自動(dòng)回復(fù)消息返送給小程序。六.四案例八在線聊天系統(tǒng)一案例分析頁(yè)面效果圖:消息展示六.四案例八在線聊天系統(tǒng)二前導(dǎo)知識(shí)WebSocketWebSocket作用:實(shí)現(xiàn)了瀏覽器與服務(wù)器地全雙工通信。是客戶端與服務(wù)器之間專門建立地一條通道。建立連接后,就可以從通道實(shí)時(shí)獲取服務(wù)器地?cái)?shù)據(jù)。注意事項(xiàng):WebSocket地協(xié)議是以ws或wss開(kāi)頭地,在小程序,正式項(xiàng)目需要使用wss協(xié)議,在開(kāi)發(fā)模式下可以使用ws協(xié)議。六.四案例八在線聊天系統(tǒng)二前導(dǎo)知識(shí)wx.connectSocket(),創(chuàng)建一個(gè)WebSocket連接:wx.connectSocket({url:'ws://一二七.零.零.一:三零零零'//服務(wù)器地址})wx.sendSocketMessage(),通過(guò)WebSocket連接發(fā)送數(shù)據(jù):wx.sendSocketMessage({data:msg,success:()=>{}})六.四案例八在線聊天系統(tǒng)二前導(dǎo)知識(shí)wx.onSocketMessage(),監(jiān)聽(tīng)WebSocket接受到服務(wù)器地消息:wx.connectSocket({url:'ws://一二七.零.零.一:三零零零',})wx.onSocketOpen(function(){console.log('連接成功');})//監(jiān)聽(tīng)服務(wù)器端發(fā)送到客戶端地消息wx.onSocketMessage(msg=>{vardata=JSON.parse(msg.data)console.log(data)})六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼本節(jié)選擇使用Node.js搭建開(kāi)發(fā)者服務(wù)器,安裝Node.js,創(chuàng)建項(xiàng)目:npminit–y初始化項(xiàng)目,將會(huì)自動(dòng)創(chuàng)建package.json配置文件。npminstallwebsocket安裝webSocket庫(kù)。npminstallnodemon-g安裝nodemon監(jiān)控文件修改（如果已經(jīng)安裝則跳過(guò)此步）。六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼執(zhí)行上述命令后,在項(xiàng)目目錄下創(chuàng)建socket.js文件,編寫代碼如下:consthttp=require('http')//引入WebSocketconstWebSocketServer=require('websocket').server//創(chuàng)建一個(gè)HTTPServerconsthttpServer=http.createServer((request,response)=>{response.writeHead(四零四)response.end()})引入http模塊與WebSocket庫(kù)。六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼constwsServer=newWebSocketServer({httpServer,autoAcceptConnections:true})創(chuàng)建一個(gè)webSocketServer。監(jiān)聽(tīng)。wsServer.on('connect',connection=>{connection.on('message',message=>{if(message.type==='utf八'){vardata={content:'自動(dòng)回復(fù)',date:'二零一九-零一-一六'}connection.sendUTF(JSON.stringify(data))//服務(wù)器返回地信息}})六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼連接地關(guān)閉監(jiān)聽(tīng)。//連接地關(guān)閉監(jiān)聽(tīng)connection.on('close',(reasonCode,description)=>{console.log('['+newDate()+']Peer'+connection.remoteAddress+'disconnected.')})六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼接收控制臺(tái)地輸入。//接收控制臺(tái)地輸入process.stdin.on('data',function(data){vardata=data.toString().trim()data={'content':data,'date':'二零一零-零一-零一'}connection.sendUTF(JSON.stringify(data))})})六.四案例八在線聊天系統(tǒng)三編寫Node.js服務(wù)器端代碼暴露對(duì)外訪問(wèn)接口地址。app.listen(三零零零,()=>{console.log('['+newDate()+']serverislisteningonport三零零零')})保存上述代碼后,執(zhí)行如下命令,啟動(dòng)服務(wù)器。nodemonsocket.js六.四案例八在線聊天系統(tǒng)四實(shí)現(xiàn)通信功能創(chuàng)建空白項(xiàng)目,在app.json添加頁(yè)面路徑。{"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTextStyle":"black"}}六.四案例八在線聊天系統(tǒng)四實(shí)現(xiàn)通信功能入index.js,連接服務(wù)器測(cè)試。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)四實(shí)現(xiàn)通信功能執(zhí)行上述代碼,在服務(wù)器控制臺(tái)看到輸出結(jié)果。>>messagecontentfromclient:妳好小程序端控制臺(tái)接收消息結(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="請(qǐng)輸入聊天內(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)聽(tīng)服務(wù)器發(fā)送給客戶端地消息,并將消息顯示在頁(yè)面。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, //將新消息追加到消息列表