微信小程序开发六.docx
《微信小程序开发六.docx》由会员分享，可在线阅读，更多相关《微信小程序开发六.docx（17页珍藏版）》请在冰点文库上搜索。
微信小程序开发六
微信小程序开发（六）
第六章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）{vardata=res.data},
fail:
function（）{},
complate:
function（）{}
}）
2.上传下载:
wx.upload（object）|wx.download（object）
+选取一个图片上传
Wx.chooseImage（{
Success:
function（res）{
Vartmp=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.视频:
+表现层
get
+逻辑层
Page（{
Data:
{src:
xxx},
getVideo:
function（）{
varthat=this;
wx.chooseVideo（{
sourceType:
[],
success:
function（res）{
that.setData（{
src:
res.tempfilePath
}）}}）}}）
6.音频组件控制:
+创建上下文
Varctx=wx.createAudioContext（audioId）
+播放
Ctx.paly（）
+暂停
Ctx.pause（）
+进到
Ctx.seek（n）
+从头
Ctx.seek（0）
+停止
Ctx.stop（）
7.视频组件控制:
+创建上下文
Varctx=wx.createVedioContext（videoId）
+发送弹幕
Ctx.sendDanmu（{text:
xxxx,color:
#xxxxxx}）
8.文件:
+保存文件
Wx.saveFile（{tempFilePath:
xxx,success:
function（res）{…}}）
+获已保存文件列表
Wx.getSavedFileList（{success:
function（res）{varlist=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.地图组件:
+创建上下文
Varctx=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）{
varnetworkType=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）{vardata=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.动画操作:
+创建动画
Varani=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）{
varuserInfo=res.userInfo
varnickName=userInfo.nickName
varavatarUrl=userInfo.avatarUrl
vargender=userInfo.gender//性别0：
未知、1：
男、2：
女
varprovince=userInfo.province
varcity=userInfo.city
varcountry=userInfo.country
}
}）
3.微信支付
wx.requestPayment（{
"timeStamp":
"",
"nonceStr":
"",
"package":
"",
"signType":
"MD5",
"paySign":
"",
"success":
function（res）{
},
"fail":
function（res）{
}
}）
4.模板信息
不作讲解
5.客服操作API
=接收消息和事件
-进入客服:
-客服消息转发
Client:
request
Weichat:
send
server:
response
-消息类型:
{文本,图片,事件}
-格式类型:
{xml,json}
-公共字段:
{ToUserName,FromUserName,CreateTime,MsgType,}
-专有字段:
文本:
{Content,MsgId}
图片:
{PicUrl,MsgId}
事件:
{Event,SessionFrom}
=发送客服消息
http请求方式:
POST
=临时素材接口
-新增临时素材
Curl-Fupload?
access_token=ACCESS_TOKEN&type=TYPE"
-获取临时素材
get?
access_token=ACCESS_TOKEN&media_id=MEDIA_ID
=接入指导（消息服务器接入）
Step1:
埴写服务器配置:
Step2:
服务器验证（PHP）
privatefunctioncheckSignature（）
{
$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）{
returntrue;
}else{
returnfalse;
}
}
Step3:
实现服务功能
6.分享功能
+设定分享
Page（{
onShareAppMessage:
function（）{
return:
{
title:
xx,path:
xx,
success:
function（res）{…}
}//endreturn
}//endfunction
}）
+显示分享
Wx.showShareMenu（）
+隐藏分享
Wx.hideShareMenu（）
7.二维码
通过后台接口可以获取小程序任意页面的二维码，扫描该二维码可以直接进入小程序对应的页面
接口地址：
createwxaqrcode?
access_token=ACCESS_TOKEN
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,在第七章中专门学习.
升级会员 