微信小程序开发六)

1、微信小程序开发 ( 六)第六章 APIAPI 框架总览 ( 绘图 API 专列章学习 , 暂略 )网络媒体数据位置设备开放窗口绘图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节网络 API1. 发送请求 :wx.request(object)+数据请求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)+选取一个图片上传Wx.chooseImage(Success:function(res)Var tmp=res.tempFilePathsWx.uploadFile(url:url,filePath:tmp0,name:”file”,formData:user:test3. 嵌套字 :+下载一段音乐播放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)+打开Wx.onSocketOpen(function(res) )+出错Wx.onSocketError(function(res) )+发数据Wx.sendSocketMessage(data:msg)+发消息 ( 回调 )Wx.onSocketMessage(function(res)第2节媒体 API1. 图片:+选图Wx.chooseImage(count:1,sizetype:,so

5、urceType:album,camera,success:function(res)+预览2. 录音 :+录音Wx.startRecord(success:function(),fail:function()+停止3. 音频控制 :+播放Wx.playVoice(filePath:xxxx,comlete:function() )+暂停Wx.pauseVoice()4. 音乐控制 :+获状态Wx.getBackgroundAudioPlayState(success:function(res)res.status|dataUrl|currentPosition|duration)+播放Wx.

6、playBackgroundAudio(dataUrl:xx,title:xx,coverImgUrl:xx)+暂停Wx.pauseBackgroundAudio()+定位5. 视频 :+表现层get6. 音频组件控制 :+创建上下文Var ctx=wx.createAudioContext(audioId)+播放Ctx.paly()+暂停Ctx.pause()+进到Ctx.seek(n)7. 视频组件控制 :+逻辑层Page(Data:src:xxx,getVideo:function()var that=this;wx.chooseVideo(sourceType:,+创建上下文Var c

7、tx=wx.createVedioContext(videoId)+发送弹幕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节数据 API+设置数据Wx.setStorage(key:xxx,value:xxx)+获取数据Wx.g

8、etStorage(key:xxx,success:function(res)+清空数据Wx.clearStorage()+设; 置数据 (异步 )Wx.setStorageSync(key:xxx,value:xxx)+获取数据 ( 异步 )第4节位置 API1. 位置:+获取位置Wx.getLocation(type:xxx,success:function(res) )+打开位置Wx.openLocation(latitude:xx,longItude:xx,scale:xx)+选择位置2. 地图组件 :+创建上下文Var ctx=wx.createMapContext(mapId)+中

9、心打开Ctx.openCenterLocation(success:function(res) )第5节设备 API1. 系统信息 :+同步获取信息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. 网络类

10、型 :+网络类型wx.getNetworkType(success: function(res) var networkType = workType /返回网络类型2g，3g，4g，wifi, none, unknown3. 重力感应 :+重力感应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节窗口 API1. 互动操作 :+自消窗口Wx.showToast(title:xx,icon:xx,duration:xx)+对话框Wx.showDialog(title

12、:xx)+对话框 ( 模态 )Wx.showModal(title:xx,content:xx,success:function(res) )2. 导航设置 :+设标题Wx.setNavigationBarTitle(title:xxx)+显动画Wx.showNavigationBarLoading()3. 导航操控 :+转到Wx.vavigatorTo(url:xx,success:function(res)+重定向Wx.redirectTo(url:xx;success:funtion(res) )+重载Wx.reLaunch(url:xx,success:function(res) )+

13、切页4. 动画操作 :+创建动画Var ani=wx.createAnimation(transformOrign:xx,duration:xx,timingFunction:xx第7节绘图 API详述于第七章 .第8节开放接口 API1. 小程序登录 API =登录微信 :+登录微信Wx.login(success:function()+检查会话Wx.checkSession(success:function(),fail:function()=签名验证 | 加密解密为了确保开放接口返回用户数据的安全性，微信会对明文数据进行签名。开发者可以根据业务需要对数据包进行签名校验，确保数据的完整性。

14、签名校验算法涉及用户的 session_key ，通过 wx.login 登录流程获取用户 session_key ，并自行维护与应用自身登录态的对应关系。通过调用接口（如 wx.getUserInfo）获取数据时，接口会同时返回rawData 、 signature，其 中signature= sha1(rawData +session_key )开发者将 signature、rawData 发送到开发者服务器进行校验。服务器利用用户对应的session_key使用相同的算法计算出签名signature2，比对 signature与 signature2即可校验数据的完整性。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 =接收消息和事件- 进入客服 :- 客服消息转发Client:reqWeichat:seserver:res- 消息类型 : 文本, 图片, 事件- 格式类型 :xml,json- 公共字段 :ToUserName,FromUserName,CreateTime,MsgType,- 专有字段 :文本 :Content,MsgId图片 :PicUrl,MsgId事件 :Event,SessionFrom=发送客服消息http 请求方式 : POST=临时素材接口- 新增临时素材C

17、url -Fupload ?access_token=ACCESS_TOKEN&type=TYPE- 获取临时素材get ?access_token=ACCESS_TOKEN&media_id=MEDIA_ID=接入指导 ( 消息服务器接入 )Step1: 埴写服务器配置 :Step2: 服务器验证 (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: 实现服务功能6. 分享功能+设定分享Page(onShareAppMessage:function()return:title:xx,path:xx,success:function(res) /end return/end function)7. 二维码通过后台接口可以获取小程序任意页面的二维码，扫描该二维码可以直接进入小程序对应的页面接口地址：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