微信小程序开发六

1、微信小程序开发（六）第六章APIAPI框架总览（绘图API专列章学习，暂略）1Wx.request2Wx.uploadFile网络API3Wx.downloadFile4Wx.connectSocket7onSocketOpen|onSocketError5Wx.sendSocketMessage8onSocketMessage6closeSockeonSocketClose1Wx.closeImage2Wx.previewImage3Wx.startRecord媒体API4Wx.stopRecord5Wx.playbackgroundvoice,audio10onBackgroundAudi

2、oPlay6Wx.pausebackgroundvoice,audio11onBackgroundAudioPause7Wx.stopbackgroundvoice,audio12onBackgroundAudioStop8Wx.chooseVideo9Wx.saveFile1Wx.getStorage数据API2Wx.setStorage3Wx.clearStoage位置API1Wx.getLocation2Wx.openLocation设备API1Wx.getNetWorkType3onAccelerometerChange2Wx.getSystemInfo4onCompassChange

3、1Wx.login开放API2Wx.getUserInfo3Wx.requestPayment1Wx.navigateTo7Wx.hideKeyBoard2Wx.navigateBack8Wx.stopPulldownFresh窗口！ ADI3Wx.directTo9Wx.setNavigationBarTitle因 11 API4Wx.createAnimation10wx.showNavigationBarLoading5Wx.createContext11wx.hideNavigationBarLoading绘图API6Wx.drawCanvas第1节网络API1 .发送请求：wx.re

4、quest(object)+数据请求Wx.request(url:url,data:object,method:get|post,dataType:json,header:content-type:application/json,success:function(res)var data=res.data,fail:function(),complate:function()2 .上传下载：wx.upload(object)|wx.download(object)+ 下载一段音乐播放Wx.downloadFile(url:url,type:audio,success:function(res

5、)wx.playVoice(filePath:res.tmpFilePath)+选取一个图片上传Wx.chooseImage(Success:function(res)Var tmp=res.tempFilePathsWx.uploadFile(url:url,filePath:tmp0,name: "file",formData:user:test)3.嵌套字：+连接Wx.connectSocket(url:url,data:data,header:,method:get|post)巾开Wx.onSocketOpen(function(res)+出错Wx.onSocket

6、Error(function(res)一)+发数据Wx.sendSocketMessage(data:msg)+发消息(回调)Wx.onSocketMessage(function(res)短闭Wx.closeSocket(url:url)+1虫回调)Wx.onSocketClose(function(res)第2节媒体API1 .图片：+选图Wx.chooseImage(count:1,sizetype:口,sourceType:album,camera,success:function(res) -)+预览Wx.previewImage(current: ,u,rls:)2 . 录首:+录

7、音Wx.startRecord(success:function(),fail:function()+亭止Wx.stopRecord()3 .首频控制：琳放Wx.playVoice(filePath:xxxx,comlete:function() -)也停Wx.pauseVoice()+亭止Wx.stopVoice()4 .音乐控制：以状态Wx.getBackgroundAudioPlayState(success:function(res)res.status|dataUrl|currentPosition|duration)琳放Wx.playBackgroundAudio(dataUrl:

8、xx,title:xx,coverImgUrl:xx)也停Wx.pauseBackgroundAudio()+定位Wx.seekBackgroundAudio(position:60)+亭止Wx.stopBackgroundAudion()5 .视频:铉现层<view><video src="src"></video><button bindTap= "getVideo”>get</button></view>+逻辑层Page(Data:src:xxx,getVideo:function()v

9、ar that=this;wx.chooseVideo(sourceType:口，success:function(res)that.setData(src:res.tempfilePath)6 .音频组件控制珀lj建上下文Var ctx=wx.createAudioContext(audioId)琳放Ctx.paly()也停Ctx.pause()+进到Ctx.seek(n)+从头Ctx.seek(0)+亭止Ctx.stop()7 .视频组件控制：珀|J建上下文Var ctx=wx.createVedioContext(videoId)+发送弹幕Ctx.sendDanmu(text:xxxx,

10、color:#xxxxxx)8 .文件：+保存文件Wx.saveFile(tempFilePath:xxx,success:function(res)+获已保存文件列表Wx.getSavedFileList(success:function(res)va门ist=res.fileList)+获已保存文件信息Wx.getSavedFileInfo(filePath:xxx,success:function(res)-)+移除已保存文件Wx.removeSavedFile(filePath:xxx,complete:function(res)旬开文件Wx.openDocument(filePath

11、:xxx,success:function(res) -)第3节数据API+设置数据Wx.setStorage(key:xxx,value:xxx)以取数据Wx.getStorage(key:xxx,success:function(res)-)+清空数据Wx.clearStorage()+设;置数据(异步)Wx.setStorageSync(key:xxx,value:xxx)+获取数据(异步)Wx.getStorageSync(key:xxx,success:function(res)-)+清空数据(异步)Wx.clearStorageSync()第4节位置API1 .位置：以取位置Wx.

12、getLocation(type:xxx,success:function(res)-)巾开位置Wx.openLocation(latitude:xx,longItude:xx,scale:xx)+选择位置Wx.chooseLocation(success:function(res)2 .地图组件：珀|J建上下文Var ctx=wx.createMapContext(mapId)+中心打开Ctx.openCenterLocation(success:function(res) )+移动位置Ctx.moveToLocation(success:function(res)-)第5节设备API1 .

13、系统信息：+同步获取信息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)+ 异步获取信息wx.getSystemInfo(success:function(res)2 .网络类型：+网络类型wx.getNet

14、workType(success: function(res) var networkType = workType / 返回网络类型 2g, 3g, 4g, wifi, none, unknown )3 .重力感应：+重力感应wx.onAccelerometerChange(function(res) console.log(res.x)console.log(res.y)console.log(res.z) )4 .罗盘指南：+罗盘指南wx.onCompassChange(function (res) console.log(res.direction)5 .拨打电话：+tt打电话wx.m

15、akePhoneCall(phoneNumber:'')6 .扫码：出码wx.scanCode(success: function(res) console.log(res)7 .剪贴板:+加入剪贴板Wx.setClipboadData(data:xx,success:function(res)-)+ 读取剪贴板Wx.getClipboardData(success:function(res)var data=res.data)8 .篮牙：+篮牙wx.openBluetoothAdapter( success: function (res) console.log(res) )

16、第6节窗口 API1 .互动操作：+自消窗口Wx.showToast(title:xx,icon:xx,duration:xx)+对话框Wx.showDialog(title:xx)+对话框(模态)Wx.showModal(title:xx,content:xx,success:function(res) -)+活动页签Wx.showActionSheet(itemList:口,success:function(res) -)2 .导航设置：+设标题Wx.setNavigationBarTitle(title:xxx)+显动画Wx.showNavigationBarLoading()+隐动画W

17、x.hideVavigationBarLoading()3 .导航操控：喈专到Wx.vavigatorTo(url:xx,success:function(res)-)+重定向Wx.redirectTo(url:xx;success:funtion(res) -)+重载Wx.reLaunch(url:xx,success:function(res) -)+切页Wx.switchTab(url:xxx)+返回Wx.navigatorBack(delta:xx)4 .动画操作：珀|建动画Var ani=wx.createAnimation(transformOrign:xx,duration:xx

18、,timingFunction:xx)+具体方法(略)第7节绘图API详述于第七章.第8节开放接口 API1 .小程序登录API=登录微信：橙录微信Wx.login(success:function()-)抽查会话Wx.checkSession(success:function(),fail:function() -)=签名3证|加密解密为了确保开放接口返回用户数据的安全性，微信会对明文数据进行签名。开发者可以根据业务需要对数据包进行签名校验，确保数据的完整性。签名校验算法涉及用户的session_key,通过wx.login登录流程获取用户 session_key,并自行维护与应用自身登录态

19、的对应关系。通过调用接口(如 wx.getUserInfo )获取数据时，接口会同时返回 rawData、signature ,其中 signature = sha1( rawData + session_key )开发者将signature > rawData发送到开发者服务器进行校验。服务器利用用户对应的 session_key使用相同的算法计算出签名signature2,比对signature与signature2即可校验数据的完整性。2 .用户信息wx.getUserInfo(success: function(res) var userInfo = res.userInfova

20、r nickName = userInfo.nickNamevar avatarUrl = userInfo.avatarUrlvar gender = userInfo.gender 性别 0：未知、1：男、2：女var province = userIvincevar city = userInfo.cityvar country = userInfo.country)3 .微信支付wx.requestPayment("timeStamp":"","nonceStr":"","packa

21、ge":"","signType": "MD5","paySign":"","success":function(res),"fail":function(res)4 .模板信息不作讲解5 .客服操作API=接收消息和事件-进入客服：<contack-button />-客服消息转发Client:requestWeichat:sendserver:response-消息类型：文本，图片，事件-格式类型:xml,json-公共字段：To

22、UserName,FromUserName,CreateTime,MsgType,- 专有字段：文本:Content,MsgId图片:PicUrl,MsgId事件:Event,SessionFrom=发送客服消息http请求方式：POST.com/cgi-bin/message/custom/send?access_token=ACCESS_TOKEN=临时素材接口- 新增临时素材Curl -F media=test.jpg ".com/cgi-bin/media/ upload ?access_token=ACCESS_TOKEN&type=TYPE"- 获取临时

23、素材.com/cgi-bin/media/ get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID=接入指导（消息服务器接入）Stepl:埴写服务器配置：瓦苴掘务器信息 WWX 配君阳痛御服招E域名靠鲤即匚P费其，密苗双域名品24”谢后才可配区 域名格式JQ支持要女大力与字中、敬字及-不支 持叩地趾及洞口鼻.新吹有总务X与罐名j R前桂JK讯云KI式与配音点击鼬往口Mquest合法域名hit时,©合法域名WS5”土Jupl 己dFil-徜域名hit网/downloadFil-eito£tSShttps/Step2:服务器验证(

24、PHP)private function checkSignature()($signature = $_GET"signature"$timestamp = $_GET"timestamp"$nonce = $_GET"nonce"$token = TOKEN;$tmpArr = array($token, $timestamp, $nonce);sort($tmpArr, SORT_STRING);$tmpStr = implode( $tmpArr );$tmpStr = sha1( $tmpStr );if( $tmpStr = $signature )return true;elsereturn false;Step3:实现服务功能6 .分享功能+设