微信小程序开发(六).doc_咨信网zixin.com.cn

资源描述

微信小程序开发(六) 第六章 API API框架总览(绘图API专列章学习,暂略) 网络API 媒体API 数据API 位置API 窗口API 绘图API 开放API 设备API 1 Wx.request 2 Wx.uploadFile 3 Wx.downloadFile 4 Wx.connectSocket 7 onSocketOpen|onSocketError 5 Wx.sendSocketMessage 8 onSocketMessage 6 closeSocke onSocketClose 1 Wx.closeImage 2 Wx.previewImage 3 Wx.startRecord 4 Wx.stopRecord 5 Wx.play[background][voice,audio] 10 onBackgroundAudioPlay 6 Wx.pause[background][voice,audio] 11 onBackgroundAudioPause 7 Wx.stop[background][voice,audio] 12 onBackgroundAudioStop 8 Wx.chooseVideo 9 Wx.saveFile 1 Wx.getStorage 2 Wx.setStorage 3 Wx.clearStoage 1 Wx.getLocation 2 Wx.openLocation 1 Wx.getNetWorkType 3 onAccelerometerChange 2 Wx.getSystemInfo 4 onCompassChange 1 Wx.login 2 Wx.getUserInfo 3 Wx.requestPayment 1 Wx.navigateTo 7 Wx.hideKeyBoard 2 Wx.navigateBack 8 Wx.stopPulldownFresh 3 Wx.directTo 9 Wx.setNavigationBarTitle 4 Wx.createAnimation 10 wx.showNavigationBarLoading 5 Wx.createContext 11 wx.hideNavigationBarLoading 6 Wx.drawCanvas 第1节网络API 1. 发送请求:wx.request(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.chooseImage({ Success:function(res){ Var tmp=res.tempFilePaths Wx.uploadFile({ url:url, filePath:tmp[0], name:”file”, formData:{user:test} }) } }) +下载一段音乐播放 Wx.downloadFile({ url:url, type:audio, success:function(res){ wx.playVoice({filePath:res.tmpFilePath}) } }) 3. 嵌套字: +连接 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){…}) +关闭 Wx.closeSocket({url:url}) +关闭(回调) Wx.onSocketClose(function(res){…}) 第2节媒体API 1. 图片: +选图 Wx.chooseImage({count:1,sizetype:[],sourceType:[album,camera],success:function(res){…}}) +预览 Wx.previewImage({current:’’,urls:[]}) 2. 录音: +录音 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: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(){ var that=this; wx.chooseVideo({ sourceType:[], success:function(res){ that.setData({ src:res.tempfilePath })}})}}) 6. 音频组件控制: +创建上下文 Var ctx=wx.createAudioContext(audioId) +播放 Ctx.paly() +暂停 Ctx.pause() +进到 Ctx.seek(n) +从头 Ctx.seek(0) +停止 Ctx.stop() 7. 视频组件控制: +创建上下文 Var ctx=wx.createVedioContext(videoId) +发送弹幕 Ctx.sendDanmu({text:xxxx,color:#xxxxxx}) 8. 文件: +保存文件 Wx.saveFile({tempFilePath:xxx,success:function(res){…}}) +获已保存文件列表 Wx.getSavedFileList({success:function(res){var list=res.fileList}}) +获已保存文件信息 Wx.getSavedFileInfo({filePath:xxx,success:function(res){…}}) +移除已保存文件 Wx.removeSavedFile({filePath:xxx,complete:function(res){…}}) +打开文件 Wx.openDocument({filePath: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节位置API 1. 位置: +获取位置 Wx.getLocation({type:xxx,success:function(res){…}}) +打开位置 Wx.openLocation({latitude:xx,longItude:xx,scale:xx}) +选择位置 Wx.chooseLocation({success:function(res){…}}) 2. 地图组件: +创建上下文 Var ctx=wx.createMapContext(mapId) +中心打开 Ctx.openCenterLocation({success:function(res){…}}) +移动位置 Ctx.moveToLocation({success:function(res){…}}) 第5节设备API 1. 系统信息: +同步获取信息 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.getNetworkType({ 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. 拨打电话: +拨打电话 wx.makePhoneCall({ phoneNumber: '15093843683' }) 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)} }) 第6节窗口API 1. 互动操作: +自消窗口 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() +隐动画 Wx.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, timingFunction:xx }) +具体方法(略) 第7节绘图API 详述于第七章. 第8节开放接口API 1. 小程序登录API =登录微信: +登录微信 Wx.login({success:function(){…}}) +检查会话 Wx.checkSession({success:function(){,,,},fail:function(){…}}) =签名验证|加密解密为了确保开放接口返回用户数据的安全性，微信会对明文数据进行签名。开发者可以根据业务需要对数据包进行签名校验，确保数据的完整性。签名校验算法涉及用户的session_key，通过 wx.login 登录流程获取用户session_key，并自行维护与应用自身登录态的对应关系。通过调用接口（如 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.userInfo var nickName = userInfo.nickName var avatarUrl = userInfo.avatarUrl var gender = userInfo.gender //性别 0：未知、1：男、2：女 var province = userInfo.province var city = userInfo.city var country = userInfo.country } }) 3. 微信支付 wx.requestPayment({ "timeStamp": "", "nonceStr": "", "package": "", "signType": "MD5", "paySign": "", "success":function(res){ }, "fail":function(res){ } }) 4. 模板信息不作讲解 5. 客服操作API =接收消息和事件 -进入客服:<contack-button /> -客服消息转发 Client:request Weichat:send server:response -消息类型:{文本,图片,事件} -格式类型:{xml,json} -公共字段:{ToUserName,FromUserName,CreateTime,MsgType,} -专有字段: 文本:{Content,MsgId} 图片:{PicUrl,MsgId} 事件:{Event,SessionFrom} =发送客服消息 http请求方式: POST =临时素材接口 -新增临时素材 Curl -F media=@test.jpg " -获取临时素材 =接入指导(消息服务器接入) Step1:埴写服务器配置: Step2:服务器验证(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; }else{ return false; } } Step3:实现服务功能 6. 分享功能 +设定分享 Page({ onShareAppMessage:function(){ return:{ title:xx,path:xx, success:function(res){…} }//end return }//end function }) +显示分享 Wx.showShareMenu() +隐藏分享 Wx.hideShareMenu() 7. 二维码通过后台接口可以获取小程序任意页面的二维码，扫描该二维码可以直接进入小程序对应的页面接口地址： 8. 收货地址 wx.chooseAddress({ success: function (res) { console.log(res.userName) console.log(res.postalCode) console.log(res.provinceName) console.log(res.cityName) console.log(res.countyName) console.log(res.detailInfo) console.log(res.nationalCode) console.log(res.telNumber) } }) 9. 卡券 +加载卡券 Wx.addCard({cardList:[],success:function(res){…}}) +打开卡券 Wx.openCard({cardList:[],success:function(res){…}}) +card结构 {code:xx,openId:xx,timeStamp:xx,signature:xx} 10. 设置 +打开设置 Wx.openSetting({success:function(res){…}}) 第9节拓展接口API 数据转换 1．数据缓冲转为BASE64： Wx.arrayBufferToBase64(arrayBuffer) 2． BASE64转为数据缓冲： Wx.base64ToArrayBuffer(base64) [说明] 此章中没有列举绘图API,在第七章中专门学习.

展开阅读全文