微信小程序開(kāi)發(fā)六)

1、微信小程序開(kāi)發(fā) ( 六)第六章 APIAPI 框架總覽 ( 繪圖 API 專列章學(xué)習(xí) , 暫略 )網(wǎng)絡(luò)媒體數(shù)據(jù)位置設(shè)備開(kāi)放窗口繪圖1 Wx.request2 Wx.uploadFile3 Wx.downloadFile1 Wx.closeImage2 Wx.previewImage3 Wx.startRecord4 Wx.stopRecord1 Wx.getStorage2 Wx.setStorage1Wx.getLocation1Wx.getNetWorkType3onAccelerometerChange2Wx.getSystemInfo4onCompassChange1 Wx.login

2、2 Wx.getUserInfo1Wx.navigateTo7Wx.hideKeyBoard2Wx.navigateBack8Wx.stopPulldownFresh3Wx.directTo9Wx.setNavigationBarTitle4Wx.createAnimation10wx.showNavigationBarLoading第1節(jié)網(wǎng)絡(luò) API1. 發(fā)送請(qǐng)求 :wx.request(object)+數(shù)據(jù)請(qǐng)求Wx.request(url:url,data:object,method:get|post,dataType:json,header:content-type:applicatio

3、n/json,success:function(res)var data=res.data,2. 上傳下載 :wx.upload(object)|wx.download(object)+選取一個(gè)圖片上傳Wx.chooseImage(Success:function(res)Var tmp=res.tempFilePathsWx.uploadFile(url:url,filePath:tmp0,name:”file”,formData:user:test3. 嵌套字 :+下載一段音樂(lè)播放Wx.downloadFile(url:url,type:audio,success:function(res

4、)wx.playVoice(filePath:res.tmpFilePath)+連接Wx.connectSocket(url:url,data:data,header:,method:get|post)+打開(kāi)Wx.onSocketOpen(function(res) )+出錯(cuò)Wx.onSocketError(function(res) )+發(fā)數(shù)據(jù)Wx.sendSocketMessage(data:msg)+發(fā)消息 ( 回調(diào) )Wx.onSocketMessage(function(res)第2節(jié)媒體 API1. 圖片:+選圖Wx.chooseImage(count:1,sizetype:,so

5、urceType:album,camera,success:function(res)+預(yù)覽2. 錄音 :+錄音Wx.startRecord(success:function(),fail:function()+停止3. 音頻控制 :+播放Wx.playVoice(filePath:xxxx,comlete:function() )+暫停Wx.pauseVoice()4. 音樂(lè)控制 :+獲狀態(tài)Wx.getBackgroundAudioPlayState(success:function(res)res.status|dataUrl|currentPosition|duration)+播放Wx.

6、playBackgroundAudio(dataUrl:xx,title:xx,coverImgUrl:xx)+暫停Wx.pauseBackgroundAudio()+定位5. 視頻 :+表現(xiàn)層get6. 音頻組件控制 :+創(chuàng)建上下文Var ctx=wx.createAudioContext(audioId)+播放Ctx.paly()+暫停Ctx.pause()+進(jìn)到Ctx.seek(n)7. 視頻組件控制 :+邏輯層Page(Data:src:xxx,getVideo:function()var that=this;wx.chooseVideo(sourceType:,+創(chuàng)建上下文Var c

7、tx=wx.createVedioContext(videoId)+發(fā)送彈幕8. 文件 :+保存文件Wx.saveFile(tempFilePath:xxx,success:function(res)+獲已保存文件列表Wx.getSavedFileList(success:function(res)var list=res.fileList)+獲已保存文件信息Wx.getSavedFileInfo(filePath:xxx,success:function(res) )+移除已保存文件第3節(jié)數(shù)據(jù) API+設(shè)置數(shù)據(jù)Wx.setStorage(key:xxx,value:xxx)+獲取數(shù)據(jù)Wx.g

8、etStorage(key:xxx,success:function(res)+清空數(shù)據(jù)Wx.clearStorage()+設(shè); 置數(shù)據(jù) (異步 )Wx.setStorageSync(key:xxx,value:xxx)+獲取數(shù)據(jù) ( 異步 )第4節(jié)位置 API1. 位置:+獲取位置Wx.getLocation(type:xxx,success:function(res) )+打開(kāi)位置Wx.openLocation(latitude:xx,longItude:xx,scale:xx)+選擇位置2. 地圖組件 :+創(chuàng)建上下文Var ctx=wx.createMapContext(mapId)+中

9、心打開(kāi)Ctx.openCenterLocation(success:function(res) )第5節(jié)設(shè)備 API1. 系統(tǒng)信息 :+同步獲取信息wx.getSystemInfo(success: function(res) console.log(res.model)console.log(res.pixelRatio)console.log(res.windowWidth)console.log(res.windowHeight)console.log(res.language)console.log(res.version)console.log(res.platform)2. 網(wǎng)絡(luò)類

10、型 :+網(wǎng)絡(luò)類型wx.getNetworkType(success: function(res) var networkType = workType /返回網(wǎng)絡(luò)類型2g，3g，4g，wifi, none, unknown3. 重力感應(yīng) :+重力感應(yīng)wx.onAccelerometerChange(function(res) console.log(res.x)console.log(res.y)4. 羅盤指南 :+羅盤指南wx.onCompassChange(function (res) console.log(res.direction)5. 撥打電話 :+撥打電話wx.makePhone

11、Call()6. 掃碼 :+掃碼wx.scanCode(success: function(res) console.log(res)7. 剪貼板 :+加入剪貼板Wx.setClipboadData(data:xx,success:function(res)+讀取剪貼板8. 籃牙 :+籃牙wx.openBluetoothAdapter( success: function (res) console.log(res) )第6節(jié)窗口 API1. 互動(dòng)操作 :+自消窗口Wx.showToast(title:xx,icon:xx,duration:xx)+對(duì)話框Wx.showDialog(title

12、:xx)+對(duì)話框 ( 模態(tài) )Wx.showModal(title:xx,content:xx,success:function(res) )2. 導(dǎo)航設(shè)置 :+設(shè)標(biāo)題Wx.setNavigationBarTitle(title:xxx)+顯動(dòng)畫Wx.showNavigationBarLoading()3. 導(dǎo)航操控 :+轉(zhuǎn)到Wx.vavigatorTo(url:xx,success:function(res)+重定向Wx.redirectTo(url:xx;success:funtion(res) )+重載Wx.reLaunch(url:xx,success:function(res) )+

13、切頁(yè)4. 動(dòng)畫操作 :+創(chuàng)建動(dòng)畫Var ani=wx.createAnimation(transformOrign:xx,duration:xx,timingFunction:xx第7節(jié)繪圖 API詳述于第七章 .第8節(jié)開(kāi)放接口 API1. 小程序登錄 API =登錄微信 :+登錄微信Wx.login(success:function()+檢查會(huì)話Wx.checkSession(success:function(),fail:function()=簽名驗(yàn)證 | 加密解密為了確保開(kāi)放接口返回用戶數(shù)據(jù)的安全性，微信會(huì)對(duì)明文數(shù)據(jù)進(jìn)行簽名。開(kāi)發(fā)者可以根據(jù)業(yè)務(wù)需要對(duì)數(shù)據(jù)包進(jìn)行簽名校驗(yàn)，確保數(shù)據(jù)的完整性。

14、簽名校驗(yàn)算法涉及用戶的 session_key ，通過(guò) wx.login 登錄流程獲取用戶 session_key ，并自行維護(hù)與應(yīng)用自身登錄態(tài)的對(duì)應(yīng)關(guān)系。通過(guò)調(diào)用接口（如 wx.getUserInfo）獲取數(shù)據(jù)時(shí)，接口會(huì)同時(shí)返回rawData 、 signature，其 中signature= sha1(rawData +session_key )開(kāi)發(fā)者將 signature、rawData 發(fā)送到開(kāi)發(fā)者服務(wù)器進(jìn)行校驗(yàn)。服務(wù)器利用用戶對(duì)應(yīng)的session_key使用相同的算法計(jì)算出簽名signature2，比對(duì) signature與 signature2即可校驗(yàn)數(shù)據(jù)的完整性。2.用戶信息wx

15、.getUserInfo(success: function(res) var userInfo = res.userInfovar nickName = userInfo.nickNamevar avatarUrl = userInfo.avatarUrlvar gender = userInfo.gender /性別 0 ：未知、 1：男、 2：女var province = userIvincevar city = userInfo.city3.微信支付wx.requestPayment(timeStamp: ,nonceStr: ,package: ,signType:

16、MD5,paySign: ,success:function(res),4. 模板信息不作講解5. 客服操作 API =接收消息和事件- 進(jìn)入客服 :- 客服消息轉(zhuǎn)發(fā)Client:reqWeichat:seserver:res- 消息類型 : 文本, 圖片, 事件- 格式類型 :xml,json- 公共字段 :ToUserName,FromUserName,CreateTime,MsgType,- 專有字段 :文本 :Content,MsgId圖片 :PicUrl,MsgId事件 :Event,SessionFrom=發(fā)送客服消息http 請(qǐng)求方式 : POST=臨時(shí)素材接口- 新增臨時(shí)素材C

17、url -Fupload ?access_token=ACCESS_TOKEN&type=TYPE- 獲取臨時(shí)素材get ?access_token=ACCESS_TOKEN&media_id=MEDIA_ID=接入指導(dǎo) ( 消息服務(wù)器接入 )Step1: 埴寫服務(wù)器配置 :Step2: 服務(wù)器驗(yàn)證 (PHP)private function checkSignature()$signature = $_GETsignature;$timestamp = $_GETtimestamp;$nonce = $_GETnonce;$token = TOKEN;$tmpArr = array($tok

18、en, $timestamp, $nonce);sort($tmpArr, SORT_STRING);$tmpStr = implode( $tmpArr );$tmpStr = sha1( $tmpStr );if( $tmpStr = $signature )return true;Step3: 實(shí)現(xiàn)服務(wù)功能6. 分享功能+設(shè)定分享Page(onShareAppMessage:function()return:title:xx,path:xx,success:function(res) /end return/end function)7. 二維碼通過(guò)后臺(tái)接口可以獲取小程序任意頁(yè)面的二維碼，掃描該二維碼可以直接進(jìn)入小程序?qū)?yīng)的頁(yè)面接口地址：createwxaqrcode ?access_token=ACCESS_TOKEN8. 收貨地址wx.chooseAddress(success: function (res) console.log(res.userName)console.log(res.postalCode)console.log(vinceName)console.log(res.cityName